みなさんこんにちは。
サイバーエージェントでスマートフォン向けのデザイナーをしております、新卒の阿部です。
今回は9月下旬に行われた、「HTML5,CSS3を舐めまわす会」についてのレポートを
お届けします！
「HTML5,CSS3を舐めまわす会」は、以前このブログにも記事を書いた弊社原 (@herablog)を中心としてはじまった自主勉強会で、社内でHTML5を使って開発をしているデベロッパー・デザイナーの情報共有や交流を目的としています。
場所はお台場にある弊社のミーティングルーム。業務から離れ、渋谷からも離れた場所で合宿を行うことでまとまった時間がとれ集中して勉強できます。
第1回目の今回は「vol1 -マークアップ編-」と題して、HTML5とCSS3にどっぷりと浸かった濃密な１日になりました！
HTML5では新しく「コンテンツモデル」と「アウトライン」という考え方が導入されました。
「コンテンツモデル」とは、「ある要素のなかにどの要素が入れられるのか」の定義
(x)HTMLには
・「ブロックレベル要素」(<h1>などの見出し要素や<div>などの段落要素など)
・「インライン要素」(<span>や<img>など)
の２タイプがありましたが、
HTML5ではそれらが拡張され、「コンテンツモデル」として定義されています。
また、要素の内部に記述できる要素についてもしっかりと定義されました。
定義されているコンテンツモデルのカテゴリはおおまかに言うと以下のとおりです。
・「メタデータ・コンテンツ」(<link>、<meta>などのメタデータ関連)
・「フロー・コンテンツ」(<div>、<img>など本文にくるもの全般)
・「セクショニング・コンテンツ」(<section>、<nav>など区切りを示すもの)
・「ヘッディング・コンテンツ」(<h1>、<hgroup>など見出しを示すもの)
・「フレージング・コンテンツ」(<b>、<span>などテキスト関連)
・「エンベディッド・コンテンツ」(<embed>、<video>など画像やビデオを
コントロールするもの)
・「インタラクティブ・コンテンツ」(<button>、<section>などユーザーが
操作できるもの)
例えば<p>は「ブロックレベル要素」でしたが、
HTML5からは「フロー・コンテンツ」というカテゴリに属し、
「フレージング・コンテンツ」のみ、タグ内に記述できるようになりました。
具体的には・・・
<img>タグはフレージング・コンテンツなので
<p><img・・・ ></p>と記述できますが、
<h2>タグはヘッディング・コンテンツなので<p><h2>テキスト・・・</h2><p>
とは記述できません。
また、HTML5から新設された<hgroup>タグは内部に<h1>～<h6>のみ記述できるので
<hgroup><p>テキスト・・・</p></hgroup>とは記述できません。
<a>タグは以前は「インライン要素」でしたが、
HTML5では「フロー・コンテンツ」というカテゴリに属し、
「トランスペアレント」という特殊なコンテンツモデルを持つようになりました。
「トランスペアレント」とは簡単にいうと
「親のコンテンツ・モデルと同じモデルをその場に応じて持てる」ということです。
そのため、例えば
<section>
<a href="◯◯">
<p>テキスト<img・・・ ></p>
</a>
</section>
のように、以前ブロックレベル要素と言われていたタグを<a>でマークアップすることも
できるようになりました。
(この場合、<a>タグは<section>タグのモデルを引き継ぐため
<section>タグ内部に記述できるタグが<a>タグでも使えます)
すべてのタグはどれかのコンテンツモデルに属し、
内部に記述できるコンテンツモデルのカテゴリが決まっているのですが
<br>タグのように複数のコンテンツモデルに属するものもあります。
(<br>タグは「フロー・コンテンツ」、「フレージング・コンテンツ」に属します)
また、上の例に上げた<hgroup>タグのように内部にカテゴリではなく特定の要素
(hgroupであれば<h1>～<h6>)のみ記述できるタイプのタグもあります。
細かく見るともっと奥が深くてややこしいのですが、この考え方がHTML5の中心と
なっているのでここは是非理解しておきたいところだと思いました。
「アウトライン」を利用してより構造的なマークアップを！
HTML5からは新しい要素「セクショニング・コンテンツ」を使って
マークアップできるようになりました。
今までは<div>を使ってセクションを区切っていましたが、これは単に
コンテンツを区切るだけで、文章の構造上は何の意味もありませんでした。
HTML5からは
<header> <footer> <nav> <section> <article>
などのセクショニング・コンテンツを利用し、より情報のしっかりした、
構造的なページ構造が作れるようになります。
検索エンジンに対しても効果的になるのでは・・と言われています。
みなさん真剣です
HTML5を理解する上でとても重要なセッションだったため、質疑応答では
アウトラインやセクショニング・コンテンツについて、多数の質問が出ました。
とくに
HTML5の新要素、セクショニング・コンテンツ（<section>や<article>など）の
使い分けをどうするか？についての議論が盛り上がりました。
・<section>は見出しやまとめなど、構造の区切りとして使う
・<nav>は文字通りナビゲーションだが、あまり使いすぎないほうがいい。
メインのナビゲーションに使用すべき。記事一覧やコンテンツ一覧は
<article>を使う方がよい
・<article>もその名の示す通りブログの記事など、タグ内で１コンテンツ
として成り立つものをマークアップするのに使う
・IE8以下では無視されるので、javascriptを利用しながらマークアップする必要あり
セクショニング・コンテンツについてはまだまだ使い方に個人差があるので、
最新情報をきちんとキャッチしたり社内でガイドラインを作ったりして、
ベストなマークアップを探していかなくてはいけないなと感じました。
細かく見ていくとほんとうにたくさんの変更点があり
ここにはとても書き切れないので重要だと思った部分だけ箇条書きで書いてみます。
・<html>タグにmanifest属性ができた。
application-cache(オフライン用にキャッシュを保存できる機能)用のファイルを
別に指定できるようになったが、うまく動かずコントロールが難しいようです。
・<meta>タグにviewport属性ができた。
(スマートフォン用)画面サイズの調整やページの拡大・縮小の設定を行える
ようになりました。
・セクショニング・コンテンツの新要素
・<nav><section><article>をどう使い分けるのが一番ベストなのか。
前のセッションでも大きな話題になりましたが、使い方に関してはまだまだ
個人差があるようです。
・<section>ごとに見出し要素をリセットして設定できるようになったことが
個人的には大発見でした。
・<input>のtype属性が一気に増えた
・searchやurl、email、rangeなど。
しかし、ブラウザの実装がまだまだ進んでいないようです。
スマートフォンのほうがサポートは速く、type="search"はずいぶん普及しています。
・テキスト入力フォームに「名前を入力してください・・・」といった初期値を入れて
おく機能が「placeholder属性」として実装され、javascriptを使わなくても実装
できるようになりました。
・実装されてない属性を指定するとtype="text"になるようです。
・<address>要素を正しく使おう
・<address>は
「ドキュメントやドキュメントに対する情報をいれる」ところ。
・サイトの運営者を書く場合
・記事の作者を書く場合。
に使われる。
・まちがった使い方
・住所を示すタグではない
任意の住所を示すために<address>タグを使ってはならない。
・<em>と<strong>と<i>と<mark>と<b>の細かい使い方の違い
文字を強める要素には<em>と<strong>と<i>と<mark>と<b>
があり、以前から使い分けに関してはいろいろと議論がありましたが、
この会でもつっこんだ議論が行われました。
・<i>は「代替の声」(外国の単語や技術用語が想定されます)を表す要素ですが、
では顔文字は<i>でマークアップ可能か？という議論に
→顔文字に嬉しい意味があればよい (<i>＼(^o^)／<i> ならば良い)
という意見が出ました。
・<b>は「意味的に区別したい」テキストを表す要素になりました。
「重要性はないが意味的に区別したいとはどういうことか？」について
→文節がわかりにくくなって「」で区切る場合に<b>が使えるかもしれない
・<em>と<strong>の違いについて
<em>は強調・強勢、<strong>は強い重要性を表す要素です。
→重要性を訴えるには<strong>をつかい、強調を含めずにイタリックにしたいなら
<i>をつかい、エラーや警告メッセージなどは<em>を使うと良い
ネストして重要度の度合いを調整する。
<strong>に関しては使いすぎるとSEO的に弾かれる危険性あり
・中でも心に残ったのが「<i>と<b>をきちんと使い分けているサイトを
見かけるとオシャレだなあと思ってしまう」というマークアップエンジニアの
何気ない言葉。
HTMLやCSSを使っているデザイナーとして、こういう美意識を持って
ものづくりをしていきたいなあと思いました。
１日まるまる勉強会に時間を使えたおかげで、実りの多い時間を過ごすことが出来ました！
ーー後編につづくーー
サイバーエージェントでスマートフォン向けのデザイナーをしております、新卒の阿部です。
今回は9月下旬に行われた、「HTML5,CSS3を舐めまわす会」についてのレポートを
お届けします！
「HTML5,CSS3を舐めまわす会」は、以前このブログにも記事を書いた弊社原 (@herablog)を中心としてはじまった自主勉強会で、社内でHTML5を使って開発をしているデベロッパー・デザイナーの情報共有や交流を目的としています。
場所はお台場にある弊社のミーティングルーム。業務から離れ、渋谷からも離れた場所で合宿を行うことでまとまった時間がとれ集中して勉強できます。
第1回目の今回は「vol1 -マークアップ編-」と題して、HTML5とCSS3にどっぷりと浸かった濃密な１日になりました！
１ まずはじめにHTML5のコンテンツモデルとアウトラインについて
HTML5では新しく「コンテンツモデル」と「アウトライン」という考え方が導入されました。
「コンテンツモデル」とは、「ある要素のなかにどの要素が入れられるのか」の定義(x)HTMLには
・「ブロックレベル要素」(<h1>などの見出し要素や<div>などの段落要素など)
・「インライン要素」(<span>や<img>など)
の２タイプがありましたが、
HTML5ではそれらが拡張され、「コンテンツモデル」として定義されています。
また、要素の内部に記述できる要素についてもしっかりと定義されました。
定義されているコンテンツモデルのカテゴリはおおまかに言うと以下のとおりです。
・「メタデータ・コンテンツ」(<link>、<meta>などのメタデータ関連)
・「フロー・コンテンツ」(<div>、<img>など本文にくるもの全般)
・「セクショニング・コンテンツ」(<section>、<nav>など区切りを示すもの)
・「ヘッディング・コンテンツ」(<h1>、<hgroup>など見出しを示すもの)
・「フレージング・コンテンツ」(<b>、<span>などテキスト関連)
・「エンベディッド・コンテンツ」(<embed>、<video>など画像やビデオを
コントロールするもの)
・「インタラクティブ・コンテンツ」(<button>、<section>などユーザーが
操作できるもの)
例えば<p>は「ブロックレベル要素」でしたが、
HTML5からは「フロー・コンテンツ」というカテゴリに属し、
「フレージング・コンテンツ」のみ、タグ内に記述できるようになりました。
具体的には・・・
<img>タグはフレージング・コンテンツなので
<p><img・・・ ></p>と記述できますが、
<h2>タグはヘッディング・コンテンツなので<p><h2>テキスト・・・</h2><p>
とは記述できません。
また、HTML5から新設された<hgroup>タグは内部に<h1>～<h6>のみ記述できるので
<hgroup><p>テキスト・・・</p></hgroup>とは記述できません。
<a>タグは以前は「インライン要素」でしたが、
HTML5では「フロー・コンテンツ」というカテゴリに属し、
「トランスペアレント」という特殊なコンテンツモデルを持つようになりました。
「トランスペアレント」とは簡単にいうと
「親のコンテンツ・モデルと同じモデルをその場に応じて持てる」ということです。
そのため、例えば
<section>
<a href="◯◯">
<p>テキスト<img・・・ ></p>
</a>
</section>
のように、以前ブロックレベル要素と言われていたタグを<a>でマークアップすることも
できるようになりました。
(この場合、<a>タグは<section>タグのモデルを引き継ぐため
<section>タグ内部に記述できるタグが<a>タグでも使えます)
すべてのタグはどれかのコンテンツモデルに属し、
内部に記述できるコンテンツモデルのカテゴリが決まっているのですが
<br>タグのように複数のコンテンツモデルに属するものもあります。
(<br>タグは「フロー・コンテンツ」、「フレージング・コンテンツ」に属します)
また、上の例に上げた<hgroup>タグのように内部にカテゴリではなく特定の要素
(hgroupであれば<h1>～<h6>)のみ記述できるタイプのタグもあります。
細かく見るともっと奥が深くてややこしいのですが、この考え方がHTML5の中心と
なっているのでここは是非理解しておきたいところだと思いました。
「アウトライン」を利用してより構造的なマークアップを！HTML5からは新しい要素「セクショニング・コンテンツ」を使って
マークアップできるようになりました。
今までは<div>を使ってセクションを区切っていましたが、これは単に
コンテンツを区切るだけで、文章の構造上は何の意味もありませんでした。
HTML5からは
<header> <footer> <nav> <section> <article>
などのセクショニング・コンテンツを利用し、より情報のしっかりした、
構造的なページ構造が作れるようになります。
検索エンジンに対しても効果的になるのでは・・と言われています。
みなさん真剣です
HTML5を理解する上でとても重要なセッションだったため、質疑応答では
アウトラインやセクショニング・コンテンツについて、多数の質問が出ました。
とくに
HTML5の新要素、セクショニング・コンテンツ（<section>や<article>など）の
使い分けをどうするか？についての議論が盛り上がりました。
・<section>は見出しやまとめなど、構造の区切りとして使う
・<nav>は文字通りナビゲーションだが、あまり使いすぎないほうがいい。
メインのナビゲーションに使用すべき。記事一覧やコンテンツ一覧は
<article>を使う方がよい
・<article>もその名の示す通りブログの記事など、タグ内で１コンテンツ
として成り立つものをマークアップするのに使う
・IE8以下では無視されるので、javascriptを利用しながらマークアップする必要あり
セクショニング・コンテンツについてはまだまだ使い方に個人差があるので、
最新情報をきちんとキャッチしたり社内でガイドラインを作ったりして、
ベストなマークアップを探していかなくてはいけないなと感じました。
２ つづいて原を中心に、HTML5の新機能についてみんなで舐めまわしました
細かく見ていくとほんとうにたくさんの変更点がありここにはとても書き切れないので重要だと思った部分だけ箇条書きで書いてみます。
・<html>タグにmanifest属性ができた。
application-cache(オフライン用にキャッシュを保存できる機能)用のファイルを
別に指定できるようになったが、うまく動かずコントロールが難しいようです。
・<meta>タグにviewport属性ができた。
(スマートフォン用)画面サイズの調整やページの拡大・縮小の設定を行える
ようになりました。
・セクショニング・コンテンツの新要素
・<nav><section><article>をどう使い分けるのが一番ベストなのか。
前のセッションでも大きな話題になりましたが、使い方に関してはまだまだ
個人差があるようです。
・<section>ごとに見出し要素をリセットして設定できるようになったことが
個人的には大発見でした。
・<input>のtype属性が一気に増えた
・searchやurl、email、rangeなど。
しかし、ブラウザの実装がまだまだ進んでいないようです。
スマートフォンのほうがサポートは速く、type="search"はずいぶん普及しています。
・テキスト入力フォームに「名前を入力してください・・・」といった初期値を入れて
おく機能が「placeholder属性」として実装され、javascriptを使わなくても実装
できるようになりました。
・実装されてない属性を指定するとtype="text"になるようです。
・<address>要素を正しく使おう
・<address>は
「ドキュメントやドキュメントに対する情報をいれる」ところ。
・サイトの運営者を書く場合
・記事の作者を書く場合。
に使われる。
・まちがった使い方
・住所を示すタグではない
任意の住所を示すために<address>タグを使ってはならない。
・<em>と<strong>と<i>と<mark>と<b>の細かい使い方の違い
文字を強める要素には<em>と<strong>と<i>と<mark>と<b>
があり、以前から使い分けに関してはいろいろと議論がありましたが、
この会でもつっこんだ議論が行われました。
・<i>は「代替の声」(外国の単語や技術用語が想定されます)を表す要素ですが、
では顔文字は<i>でマークアップ可能か？という議論に
→顔文字に嬉しい意味があればよい (<i>＼(^o^)／<i> ならば良い)
という意見が出ました。
・<b>は「意味的に区別したい」テキストを表す要素になりました。
「重要性はないが意味的に区別したいとはどういうことか？」について
→文節がわかりにくくなって「」で区切る場合に<b>が使えるかもしれない
・<em>と<strong>の違いについて
<em>は強調・強勢、<strong>は強い重要性を表す要素です。
→重要性を訴えるには<strong>をつかい、強調を含めずにイタリックにしたいなら
<i>をつかい、エラーや警告メッセージなどは<em>を使うと良い
ネストして重要度の度合いを調整する。
<strong>に関しては使いすぎるとSEO的に弾かれる危険性あり
・中でも心に残ったのが「<i>と<b>をきちんと使い分けているサイトを
見かけるとオシャレだなあと思ってしまう」というマークアップエンジニアの
何気ない言葉。
HTMLやCSSを使っているデザイナーとして、こういう美意識を持って
ものづくりをしていきたいなあと思いました。
１日まるまる勉強会に時間を使えたおかげで、実りの多い時間を過ごすことが出来ました！
ーー後編につづくーー