Soumettre la recherche
Mettre en ligne
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
•
Télécharger en tant que PPTX, PDF
•
112 j'aime
•
20,189 vues
Shin Takeuchi
Suivre
#1 9つの箱とセマンティクスHTML #2 各サービスにおける現状のブラウザシェア #3 コーディングルール #4 CSS4 #5 レビュー&ディスカッション
Lire moins
Lire la suite
Signaler
Partager
Signaler
Partager
1 sur 40
Télécharger maintenant
Recommandé
マルチデバイス時代の高速化
マルチデバイス時代の高速化
Shin Takeuchi
次世代エンタープライズの開発環境をライブで読み解く
次世代エンタープライズの開発環境をライブで読み解く
Shin Takeuchi
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
コーディングが上達するコツ
コーディングが上達するコツ
evol-ni
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
Recommandé
マルチデバイス時代の高速化
マルチデバイス時代の高速化
Shin Takeuchi
次世代エンタープライズの開発環境をライブで読み解く
次世代エンタープライズの開発環境をライブで読み解く
Shin Takeuchi
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
コーディングが上達するコツ
コーディングが上達するコツ
evol-ni
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
takumaro web
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
Jun Futakawa
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
schoowebcampus
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
Muyuu Fujita
SMACSS入門
SMACSS入門
iPride Co., Ltd.
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
Shinichi Nishikawa
WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介
Takashi Uemura
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
Muyuu Fujita
0からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.3
Yasuji Takase
2009 Right to Play Jordan Training
2009 Right to Play Jordan Training
Sport in Society
Contenu connexe
Tendances
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
takumaro web
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
Jun Futakawa
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
schoowebcampus
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
Muyuu Fujita
SMACSS入門
SMACSS入門
iPride Co., Ltd.
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
Shinichi Nishikawa
WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介
Takashi Uemura
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
Muyuu Fujita
Tendances
(20)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
CSS の歩き方
CSS の歩き方
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
WordPress を使いこなそう
WordPress を使いこなそう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
SMACSS入門
SMACSS入門
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
En vedette
0からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.3
Yasuji Takase
2009 Right to Play Jordan Training
2009 Right to Play Jordan Training
Sport in Society
R2 a2b-russian history year 5, class 2, 2012 - 2013 gorbachev
R2 a2b-russian history year 5, class 2, 2012 - 2013 gorbachev
Joe Boisvert Adjunct Professor of History, Gulf Coast State College Encore Program, Director of Compassionate Care, Amherst First Baptist Church, NH, Stephen Minister, Instructor Noah's Ark, Panama City, Florida
E 3-2012-ancient egypt year 5 - class 3- nubia
E 3-2012-ancient egypt year 5 - class 3- nubia
Joe Boisvert Adjunct Professor of History, Gulf Coast State College Encore Program, Director of Compassionate Care, Amherst First Baptist Church, NH, Stephen Minister, Instructor Noah's Ark, Panama City, Florida
20140704 gesop informe complet
20140704 gesop informe complet
Jordi San José Buenaventura
Aula formularios 2
Aula formularios 2
Denise Lima
Ancient Egyptian History Class One, 2010, Fall (2400 BC To Approximately 140...
Ancient Egyptian History Class One, 2010, Fall (2400 BC To Approximately 140...
Joe Boisvert Adjunct Professor of History, Gulf Coast State College Encore Program, Director of Compassionate Care, Amherst First Baptist Church, NH, Stephen Minister, Instructor Noah's Ark, Panama City, Florida
7 Ideas To Fight Recession
7 Ideas To Fight Recession
eschonher
Taller de creación de documentos ePub
Taller de creación de documentos ePub
JA Merlo Vega USAL
New Media Communication: Using Word of Mouth Marketing Online
New Media Communication: Using Word of Mouth Marketing Online
John Paul Richards
Making The Double Page Spread
Making The Double Page Spread
stevenpwells
Digital Photography Class 4
Digital Photography Class 4
Joe Boisvert Adjunct Professor of History, Gulf Coast State College Encore Program, Director of Compassionate Care, Amherst First Baptist Church, NH, Stephen Minister, Instructor Noah's Ark, Panama City, Florida
Jd pop proj in bdp1
Jd pop proj in bdp1
South West Observatory
Open access and the South Australian Red Cross Information Bureau: A case stu...
Open access and the South Australian Red Cross Information Bureau: A case stu...
Katie Hannan
TRUSTe Privacy Index 2011 Website Edition
TRUSTe Privacy Index 2011 Website Edition
ddeasy
Unit 6 Topic 4 - The End Of The Great War 4
Unit 6 Topic 4 - The End Of The Great War 4
wesleybatcheller
Communicative Competence Patricia
Communicative Competence Patricia
descobar24
Hanging On
Hanging On
summerthemermaid
Energy Conservation And Going Green Class 3
Energy Conservation And Going Green Class 3
Joe Boisvert Adjunct Professor of History, Gulf Coast State College Encore Program, Director of Compassionate Care, Amherst First Baptist Church, NH, Stephen Minister, Instructor Noah's Ark, Panama City, Florida
Grad survey
Grad survey
mbucy21
En vedette
(20)
0からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.3
2009 Right to Play Jordan Training
2009 Right to Play Jordan Training
R2 a2b-russian history year 5, class 2, 2012 - 2013 gorbachev
R2 a2b-russian history year 5, class 2, 2012 - 2013 gorbachev
E 3-2012-ancient egypt year 5 - class 3- nubia
E 3-2012-ancient egypt year 5 - class 3- nubia
20140704 gesop informe complet
20140704 gesop informe complet
Aula formularios 2
Aula formularios 2
Ancient Egyptian History Class One, 2010, Fall (2400 BC To Approximately 140...
Ancient Egyptian History Class One, 2010, Fall (2400 BC To Approximately 140...
7 Ideas To Fight Recession
7 Ideas To Fight Recession
Taller de creación de documentos ePub
Taller de creación de documentos ePub
New Media Communication: Using Word of Mouth Marketing Online
New Media Communication: Using Word of Mouth Marketing Online
Making The Double Page Spread
Making The Double Page Spread
Digital Photography Class 4
Digital Photography Class 4
Jd pop proj in bdp1
Jd pop proj in bdp1
Open access and the South Australian Red Cross Information Bureau: A case stu...
Open access and the South Australian Red Cross Information Bureau: A case stu...
TRUSTe Privacy Index 2011 Website Edition
TRUSTe Privacy Index 2011 Website Edition
Unit 6 Topic 4 - The End Of The Great War 4
Unit 6 Topic 4 - The End Of The Great War 4
Communicative Competence Patricia
Communicative Competence Patricia
Hanging On
Hanging On
Energy Conservation And Going Green Class 3
Energy Conservation And Going Green Class 3
Grad survey
Grad survey
Similaire à 現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Azure でサーバーレス、 Infrastructure as Code どうしてますか?
Azure でサーバーレス、 Infrastructure as Code どうしてますか?
Kazumi IWANAGA
【de:code 2020】 PostgreSQL もスケールさせよう! - Hyperscale (Citus) -
【de:code 2020】 PostgreSQL もスケールさせよう! - Hyperscale (Citus) -
日本マイクロソフト株式会社
今更ながらCSS3を試してみた
今更ながらCSS3を試してみた
Takao Sumitomo
Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会
Masakazu Muraoka
2017: A CSS Design Odyssey
2017: A CSS Design Odyssey
Kenjiro Kubota
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
Ruby StyleStatsの紹介
Ruby StyleStatsの紹介
Toshihiro Gotou
CSS Design and Programming
CSS Design and Programming
Taku AMANO
ARMテンプレートでサーバーレスに挑む!
ARMテンプレートでサーバーレスに挑む!
Kazumi IWANAGA
Jubatusでマルウェア分類
Jubatusでマルウェア分類
Shuzo Kashihara
AKSを活用した社内向けイベント支援プラットフォームをリリースした話
AKSを活用した社内向けイベント支援プラットフォームをリリースした話
Shingo Kawahara
DynamoDBの初心者に伝えたい初めて触るときの勘所
DynamoDBの初心者に伝えたい初めて触るときの勘所
Ryo Sasaki
【ウェブ セミナー】AI / アナリティクスを支えるビッグデータ基盤 Azure Data Lake [概要編]
【ウェブ セミナー】AI / アナリティクスを支えるビッグデータ基盤 Azure Data Lake [概要編]
Hideo Takagi
Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)
ssuserd60633
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
CSS3の最新事情
CSS3の最新事情
Makoto Kato
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
Kenji Shirane
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
貴寛 益子
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
アプリのロギングからデータ収集・分析・活用
アプリのロギングからデータ収集・分析・活用
Atsushi Yokohama (BEACHSIDE)
Similaire à 現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
(20)
Azure でサーバーレス、 Infrastructure as Code どうしてますか?
Azure でサーバーレス、 Infrastructure as Code どうしてますか?
【de:code 2020】 PostgreSQL もスケールさせよう! - Hyperscale (Citus) -
【de:code 2020】 PostgreSQL もスケールさせよう! - Hyperscale (Citus) -
今更ながらCSS3を試してみた
今更ながらCSS3を試してみた
Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会
2017: A CSS Design Odyssey
2017: A CSS Design Odyssey
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Ruby StyleStatsの紹介
Ruby StyleStatsの紹介
CSS Design and Programming
CSS Design and Programming
ARMテンプレートでサーバーレスに挑む!
ARMテンプレートでサーバーレスに挑む!
Jubatusでマルウェア分類
Jubatusでマルウェア分類
AKSを活用した社内向けイベント支援プラットフォームをリリースした話
AKSを活用した社内向けイベント支援プラットフォームをリリースした話
DynamoDBの初心者に伝えたい初めて触るときの勘所
DynamoDBの初心者に伝えたい初めて触るときの勘所
【ウェブ セミナー】AI / アナリティクスを支えるビッグデータ基盤 Azure Data Lake [概要編]
【ウェブ セミナー】AI / アナリティクスを支えるビッグデータ基盤 Azure Data Lake [概要編]
Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
CSS3の最新事情
CSS3の最新事情
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
アプリのロギングからデータ収集・分析・活用
アプリのロギングからデータ収集・分析・活用
Plus de Shin Takeuchi
Startup Tech Night #2 ビズリーチの開発環境などなど
Startup Tech Night #2 ビズリーチの開発環境などなど
Shin Takeuchi
情報革命時代における多様性の共存とエンジニアのキャリア、評価について
情報革命時代における多様性の共存とエンジニアのキャリア、評価について
Shin Takeuchi
ビズリーチにおけるEMR(AWS)活用事例
ビズリーチにおけるEMR(AWS)活用事例
Shin Takeuchi
ITベンチャースタートアップ「夢と現実」
ITベンチャースタートアップ「夢と現実」
Shin Takeuchi
さよならmobylet~携帯デバイスはスマートフォンの時代へ~
さよならmobylet~携帯デバイスはスマートフォンの時代へ~
Shin Takeuchi
Mobylet20100613
Mobylet20100613
Shin Takeuchi
携帯Webアプリケーション開発の基本とフレームワーク「mobylet」の紹介
携帯Webアプリケーション開発の基本とフレームワーク「mobylet」の紹介
Shin Takeuchi
mobylet ケータイサイト30分クッキング
mobylet ケータイサイト30分クッキング
Shin Takeuchi
Plus de Shin Takeuchi
(8)
Startup Tech Night #2 ビズリーチの開発環境などなど
Startup Tech Night #2 ビズリーチの開発環境などなど
情報革命時代における多様性の共存とエンジニアのキャリア、評価について
情報革命時代における多様性の共存とエンジニアのキャリア、評価について
ビズリーチにおけるEMR(AWS)活用事例
ビズリーチにおけるEMR(AWS)活用事例
ITベンチャースタートアップ「夢と現実」
ITベンチャースタートアップ「夢と現実」
さよならmobylet~携帯デバイスはスマートフォンの時代へ~
さよならmobylet~携帯デバイスはスマートフォンの時代へ~
Mobylet20100613
Mobylet20100613
携帯Webアプリケーション開発の基本とフレームワーク「mobylet」の紹介
携帯Webアプリケーション開発の基本とフレームワーク「mobylet」の紹介
mobylet ケータイサイト30分クッキング
mobylet ケータイサイト30分クッキング
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
1.
Effective HTML&CSS 〜現場で使える効果的なHTML/CSSの構造設計〜 #singtacks SHIN Takeuchi BIZREACH
Inc. - Co-Founder/CTO LUXA Inc. – Co-Founder/CTO Lei Hau’oli Co., Ltd. – Founder/CEO
2.
プロフィール • 竹内 真
/ TAKEUCHI SHIN #singtacks – 創業企業&所属 • 株式会社レイハウオリ 代表取締役社長(W3Cメンバー) • 株式会社ビズリーチ 取締役CTO • 株式会社ルクサ CTO – 主な運営サービス • • • • • 2 ビズリーチ http://www.bizreach.jp/ ルクサ http://luxa.jp/ RegionUp http://www.regionup.com/ codebreak; http://www.codebreak.com/ CareerTrek http://www.careertrek.com/ #singtacks supported by
3.
アジェンダ • • • • • 3 #1 #2 #3 #4 #5 9 Box &
Semantic HTML Browser Share Coding Rule CSS4 Review & Discussion #singtacks supported by
4.
#1 9 Box
& Semantic HTML 4 #singtacks supported by
5.
9 Box • 次の絵をHTMLコーディングしてみてください –
頭の中でどんなタグを使おうかなーと想像してみてください 1 3 4 5 6 7 5 2 8 9 #singtacks supported by
6.
9 Box • 構造には意味がある –
= セマンティクスHTMLコーディング • 意味を知る方法として – 要素をひとつ抜いてみた時、構造がどう変化するか? – ➡ 構造の意味 6 #singtacks supported by
7.
9 Box &
Semantics HTML • もう一度考えてみましょう 1 3 4 5 6 7 7 2 8 9 #singtacks supported by
8.
9 Box &
Semantics HTML • パターン1 – そのまま抜けた状態 1 2 4 7 8 3 6 8 9 <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td></td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> #singtacks supported by
9.
9 Box &
Semantics HTML • パターン2 – 全ての番号が前につまる 1 3 4 6 7 8 9 2 9 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> #singtacks supported by
10.
9 Box &
Semantics HTML • パターン3 – 横列のみ関係する(6番だけつまる) 1 4 6 7 10 2 8 3 9 <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> <li>4</li> <li>6</li> </ul> <ul> <li>7</li> <li>8</li> <li>9</li> </ul> #singtacks supported by
11.
9 Box &
Semantics HTML • どんなコードでも正解になる – ただし、正しい意味に応じた「表現」であることが重要 – 上のパターンにも他の解が存在する • まず必要なこと – 基本的な「構造」を表現可能なタグの「意味」をしっかりと理 解して、使いこなすこと 11 #singtacks supported by
12.
Semantics HTML(5) • 構造を表現する代表的なタグ 構造の意味、他要素との関 係性が明確 構造の意味が明確、自要素 内の関係性のみ明確 自由度が高く、他要素、自 要素内の関係性は希薄 header table div footer ul section nav ol aside dl article figure (p) 左側がより意味が強い(構造認知性が高い) 構造にフィットするタグがあれば、より左側から選択すると良い。 12 #singtacks
supported by
13.
Semantics HTML(5) • なぜそこまで考えるべきなのか? –
HTMLはWebにおける全てのインターフェース Web Designer Users / Customers Front End Engineer Server Side Engineer Producer Director 13 #singtacks supported by
14.
Semantics HTML(5) • 意味のあるHTMLを書くこととは –
サーバサイドプログラミングの容易性を高める(生産性向上) • エンジニアにとって、例えばfor文で要素を繰り返し表示する部分が、全て 同じタグ/クラスのセットであること(ul > liなど)であることが望ましいと 考える – 改変容易性を高める(可読性、認知性、生産性向上) • 他のエンジニアでも修正しやすく、また意味のあるタグで記述しているこ とにより、プロダクトが複雑化しても資産の無駄を省ける可能性が高い – GUIのパーツ化による共通化を図れる(ex. Bootstrap化) • 共通化によって生産性が飛躍的に高まる。また新しいUIを考える際にも StyleGuide化しているものがあれば、エンジニア一人でも画面を構築出来る など、開発スピードを向上させられる 14 #singtacks supported by
15.
#2 Browser Share 15 #singtacks
supported by
16.
Browser Share • ブラウザシェアを知ることで選べるもの –
下位互換方式コーディング • HTML5 / CSS3を用いて先進的なコーディングをして、下位ブラウザ(主にIE8以前) にJavaScriptを利用して対応させる方法 – IE7.js / IE8.js / html5shiv(printshiv).jsなどを利用する » これにより下位ブラウザでの動作はかなり重くなる – 角丸などをCSS3で表現し、下位ブラウザは角有り表示とする • 竹内個人の主観ではIE6 / IE7のシェアが2%以下であればHTML5 / CSS3を選択します – IE8でのJS利用の下位互換は若干目をつぶっています(1年後を見据えて…) – 上位互換方式コーディング • 基本的にIE6若しくはIE7のルールで表現できるコーディングをして、上位でも同じよ うに表現される形を取る – 特にIE6に対応するのは心が病めますよね。。。 16 #singtacks supported by
17.
Browser Share • ビズリーチ –
Target • 日本のハイクラス転職(主に30代〜50代) Android Browser 7.69% IE 9 4.28% その他 6.20% Internet Explorer 33.47% Firefox 8.46% IE 7 1.40% IE 6 0.62% IE 8 7.80% IE 10 14.60% Safari 21.12% IE以外 71.30% Chrome 23.05% 17 #singtacks supported by
18.
Browser Share • ルクサ –
Target • お得に贅沢体験したい、素敵な大人の方達 Android Browser 3.53% その他 1.57% Firefox 5.07% IE 9 6.66% 18 IE 6 0.34% IE 8 7.98% Safari 13.89% Chrome 14.41% IE 7 1.52% Internet Explorer 61.53% #singtacks supported by IE 10 24.87% IE以外 58.62%
19.
Browser Share • codebreak; –
Target • 全世界のエンジニア向け(になったりばっかり。。。基本は日本) Android Browser 3.18% その他 2.93% IE 9 1.42% IE 7 0.28% IE 8 1.63% Internet Explorer 6.33% IE 10 3.16% Safari 12.59% Firefox 15.21% IE 6 0.23% Chrome 59.77% IE以外 93.27% 19 #singtacks supported by
20.
Browser Share • RegionUp –
Target • アジア(シンガポール、香港)中心とした全世界向け Android その他 Browser 3.42% 5.31% IE 7 1.11% IE 9 5.08% Firefox 12.34% Chrome 35.40% IE 6 0.09% IE 8 7.78% IE 10 9.59% Safari 19.07% IE以外 76.34% Internet Explorer 24.47% 20 #singtacks supported by
21.
Browser Share • 現状のブラウザシェア –
全体的にIE6 / IE7のシェアは小さい(約2%前後、若しくはそれ以下) • 子セレクタなど、一部のIE7までの問題は解決済み – 新規サービスなどはIE6 / IE7を切り捨てて開発することをオススメします。 » 既に巨大なサービスはこの限りではありませんが。。。 • IE8の処遇次第でHTML5 / CSS3への完全移行も可能 – IE8.js / html5shiv.jsを利用した上での動作が納得出来るものであれば、IE8を下位 互換方式で対応することも可能 – IE8も完全対応する場合は、泣く泣く(HTML5はともかく)CSS3は諦めるしか ないですね。。。 • 株式会社ビズリーチでは – ビズリーチ、codebreak;が最近のリニューアルでHTML5 / CSS3 対応しました。 21 #singtacks supported by
22.
#3 Coding Rule 22 #singtacks
supported by
23.
Coding Rule • singtacks
/ coding rule – タグブロックレベルで流用可能にする • 基本的な位置関係が相対指定され、出来る限り領域に対しても柔軟に変化させる – Style定義に「id」を利用しない • 「id」はJavaScriptのために空けておく(Web高速化) – ul / ol / dl / table / figure などは下位のタグにclass定義をしない • 上位タグから子供セレクタを使用してStyle定義する(状態定義はこの限りでない) – 階層、及びタグの種類によりタグ間の基本スペースを定義する • 隣接セレクタを利用してデフォルトスペーシングを定義する(オーバーライド可) – CSS定義は名前空間方式を採用する • 「sg-git-branch-new」など – 基礎構造と画面単位構造とでCSSを分ける • tableのボーダー、色などは基礎構造、画面毎の表のサイズは画面単位構造、など 23 #singtacks supported by
24.
Coding Rule • タグブロックレベルで流用可能にする 1 4 7 2 5 8 3 6 9 <ul
class=“sg-item-box”> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> 24 ➡例:横幅が広ければ➡ 1 5 9 2 6 ul.sg-item-box { width: 100%; } ul.sg-item-box > li { display: inline-block; width: 100px; } #singtacks supported by 3 7 4 8
25.
Coding Rule • Style定義に「id」を利用しない <ul
class=“sg-item-box”> <li>1</li> <li>2</li> <li>3</li> <li>4</li> クラス指定 <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> ul.sg-item-box { width: 100%; } ul.sg-item-box > li { display: inline-block; width: 100px; } 「id」はタグに「ひとつ」しか定義出来ない ※classは複数定義可能 JavaScriptはエンジンの構造上、id指定は高速だがclass指定は性能劣化する そのため、CSSはJavaScriptを思いやってclassを利用するべきである ※CSSはレンダリング処理上、id / classどちらで指定しても処理速度に関係しない 25 #singtacks supported by
26.
Coding Rule • 下位のタグにクラス定義をしない <ul
class=“sg-item-box”> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> とっても <li>7</li> キレイ <li>8</li> <li>9</li> </ul> ul.sg-item-box { width: 100%; } ul.sg-item-box > li { display: inline-block; width: 100px; } こう書くと 子孫セレクタの多用はレンダリング速度に多少なりとも影響するが ul > li, ol > li, table th, table tdなどのタグレベルの関係性が必須の箇所は 積極的に子セレクタ、子孫セレクタを利用する方が、HTMLが簡潔になる ※このレベルの速度劣化は0に等しい 特に「li」に複雑なクラスが指定されていないのは、サーバサイドプログラミング上 とっても美しくて嬉しい。 26 #singtacks supported by
27.
Coding Rule • デフォルトスペーシング設定をする <body> <section> <h1>singtacks</h1> <p>これは竹内です</p> </section> <section> <img
src=“…” /> </section> </body> section + section { margin-top: 40px; } h1 + p, h2 + p, h3 + p { margin-top: 1em; } 構造間のスペーシングを定義しておくことで 構造定義のみで美しいスペーシングが可能となる。 ややデザイナー目線のコーディングになるが、 このスペーシング処理は下位のCSSで上書きも出来るため、便利なことが多い。 シンプルな新規事業立ち上げ時は 最初にスペーシング構造定義をオススメする 27 #singtacks supported by
28.
Coding Rule • CSS定義は名前空間方式を採用する sg-item.css ---------------------- pg-item.css ---------------------- .sg-item
{ ... } .pg-item-column { ... } .sg-item-box { ... } .pg-item-footer-column { ... } .sg-item-footer { ... } ビズリーチでは大きく「bs」「sg」「pg」のルート名前空間が用意されている。 bs : ベースを規定する、いわゆるnormalize処理 sg : Style Guideの略、Bootstrap構造を定義するもの、デザインアーキテクチャ pg : ページの略、各個別ページ依存のスタイルを定義する。ページ数分存在する CSSファイル名と名前空間方式のclass名が一致することで、そのスタイルの重要度(関係性) が即座に理解できる、また探索性能にも優れる 28 #singtacks supported by
29.
Coding Rule • 基礎構造と画面単位構造を分ける <table
class=“sg-table pg-item-table”> <tr> <td>商品A</td> <td>商品B</td> <td>商品C</td> </tr> </table> .sg-table { border: 1px solid #CCC; } .sg-table td { color: #FFF; background-color: #CCC; } .pg-item-table td:nth-child(1) { width: 100px; } .pg-item-table td:nth-child(2) { width: 150px; } .pg-item-table td:nth-child(3) { width: 120px; } 構造定義と画面単位構造を分けることによって、基礎構造の共通パーツ化が促される (Bootstrap化) 29 #singtacks supported by
30.
Coding Rule • コーディングルールについて –
このルールを踏襲して作るには、サーバサイドプログラミングでも「アーキテ クト」と呼ばれる人しか定義することが難しく、非常に高度な技術が不可欠 • 難しいのは当たり前という認識を持ちつつも、フロントエンジニアがより高みに登る ためには高度なCSS設計が出来る技術が必要 • 美しい構造設計、CSS設計はその後の開発、運用全てに恩恵がある他、近いサービス を構築する場合には、そのままBootstrap化し、流用可能になります – 実際株式会社ビズリーチでは、多くの管理画面が1年以上前に作られたスタイル シートを流用して作られているものもあります • この他にも沢山ルールはありますが。。。 – 今日は時間が無いのでここまでにしておきます。。。 30 #singtacks supported by
31.
#4 CSS4 31 #singtacks supported
by
32.
CSS4 • 閑話休題、ちょっと未来の話でもしましょう – Chrome
/ Safari などは既にCSS4の実装がはじまっています • つまり、モバイルの世界では近い将来にCSS4がやってくる可能性があります。 – 実際のデバイスではまだまだ使えませんよー。 – というわけで 今のうちに便利そうなCSS4の技術を予習しておきましょう! 32 #singtacks supported by
33.
CSS4 • 「!」セレクタ !ul >
li.sg-selected-item { ... } 「!」を指定することで、擬似的に「親」を指定することが出来るようになりそうです。 ※これは凄いです。。。 基本的には連続的に指定している中間に「!」を利用することが出来るので 親、にフォーカスしているというよりも、セレクタ連鎖の中でスタイルを適用する セレクタを指定することが出来るというものです。 例: ul > !li > a > span なんて言う名前になるんでしょうかね、これ・・・ (ちなみに、結構前は「$」、ちょっと前は「?」、今は「!」ですが、まだもめてるのでセレクタが変わりそうです) 33 #singtacks supported by
34.
CSS4 • 疑似クラス「:matches」 :matches(h1, h2,
h3, h4) + * { margin-top: 1em; } これとこれとこれとこれと。。。が書き易くなります。 正直、単純な関係性だと、そこまで何かが劇的に変わる感じはしませんが ちょっとだけ便利です。 特に、デフォルトスペーシングを設定する場合は 様々なタグ同士の関係性を記述することが多いので、便利になりそうです。 要素付きの:matchesの場合は複数クラスをand / or条件で指定することが出来そうな 記述も見受けられますが、実装されれば相当便利な予感です。 例: div:matches(.current, .active) 34 #singtacks supported by
35.
CSS4 • 疑似クラス「:local-link」 nav >
ul > li > a:local-link { background-color: #FFF; } グローバルナビゲーションの現在位置だけ背景を変える。良くあることです。。。 僕個人的には「current」という別クラスを切って、currentが付いてたら背景を変える というCSSを良く書いています。 :local-linkを利用するとこれが不要になる(勝手に自分の位置を認識してくれる)ので ある意味画期的なセレクタとも言えます。 ※JavaScriptゴリゴリのサイトだと使えないですね。。。 35 #singtacks supported by
36.
#5 Review &
Discussion 36 #singtacks supported by
37.
Review & Discussion •
今更ですが – 課題の回答を見ながら、一緒に考えてみましょう。 • 気になることがあったら、どしどし手を挙げて聞いて下さい! • codebreak;ソースコードリーディング – 基礎部分は僕自身がかなり組んだので、ポイントをかいつまん で話したいと思います • これも気になるところで、どんどん聞いて下さい! – http://codebreak.com/ 37 #singtacks supported by
38.
ご清聴ありがとうございました 38 #singtacks supported by
39.
質疑応答 この本の特集で もっと詳しく書いてるよ。 http://gihyo.jp/magazine/wdpress/archive/2010/vol59 39 #singtacks supported by
40.
了。ありがとうございました。 40 #singtacks supported by
Télécharger maintenant