Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Semantic html が止まらない

社内5分LTの。
Semantic HTML はデザインのためにもなるよねーっていう話です。

  • Be the first to comment

Semantic html が止まらない

  1. 1. Semantic HTML が止まらない Yumi ishizaki 20120628
  2. 2. W3C LOVEなHtml markupオタクが 気にすること3つ Semantic accessibility responsive• Htmlには • 誰でも使 • デバイス 意味があ える に合った るよ! レイアウ ト
  3. 3. Semantic HTMLって何?• 意味 – Htmlの中身の要素に意味を持たせてあげるこ と – ブラウザや検索エンジンがちゃんと理解して くれるように• 例 – <h1>…見出しなのです – <p>…段落ですよ – <blockquote>…引用文なのですよ
  4. 4. 余談の悪い例:目立たせるために <h1> Cssで頑張り ましょう
  5. 5. 余談の悪い例:<br>2回繰り返して 段落 <p>で囲みま しょう
  6. 6. Semantic HTMLってなぜ必要?• Accessibilityにもつながる – 障害を持つ人々でもwebサイトに何が書いてあるか分かるように。 (semantic htmlのみでは完璧なaccessibilityにはならないけど…)• SEO – いわゆる検索エンジン向け – White hat SEO って言われる正当な方法でのSEO• Htmlが軽くなる• 制作者同士で「仕様」の共有が、コードの中で出来る。• デザインのガイドラインが作りやすい• Cssで模様替え/リニューアルが簡単
  7. 7. html5• 今までdevやspanを使い、idやclass指定で、意味を持たせていたもの があって、、、 よく使われるものがhtml5で出来たので感激ですね! 詳しくはW3Cドキュメント見てね。 – <header> – <footer> – <article> – <nav>• 古いブラウザには対応してなかったりで、色々とまだ問 題はありますが!
  8. 8. Semantic HTMLの本当にいいところ (持論)• デザインのためになること!
  9. 9. Semantic HTMLで組む作業は デザインを考える前の手順!• 要素・情報を意味を持って整理 バラバラな情報 情報をきれいに何が見出しで何が本文だか分からない状態 整理整頓する
  10. 10. デザインの手順• Step1:要素・情報を整理する• Step2:それをレイアウトに落としこむ (ここがsemantic Html!)• Step3:デザインの作業…色…フォント…イ メージ…などなどが続く…
  11. 11. 結論• ガッチガチなSemantic HTMLじゃなくても Semantic HTML 意識すると、 デザインのためにもなって、一石二鳥なのでオススメで す!

×