Semantic markup with icon font

893 views

Published on

Semantic markup with icon font

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
893
On SlideShare
0
From Embeds
0
Number of Embeds
284
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Semantic markup with icon font

  1. 1. SemanticなIcon fontコーディング ERIKA KITADA Icon font * Mark up
  2. 2.  Erika Kitada  Lei Hau’oli co.ltd., ↓弊社のエヴァンジェリストが執筆 markupにこだわっている会社です。
  3. 3. About icon font アイコンのベクターデータをフォントにしたもの  メリット  高解像度ディスプレイ対応。  画像が劣化しないためメンテナンスしやすい。  デメリット  モダンブラウザにしか対応していない (IE7, リガチャはAndroid2.xでできない)  アイコンとフォントの情報がマッチしない
  4. 4. モバイル時代でさらに強まったアイコンの役割  Icon on the PC テキストを修飾するデザイン的な要素が強かった
  5. 5.  Icon on the smart device 狭い画面で直観的な操作を促すUIの役目を果たしている モバイル時代でさらに強まったアイコンの役割
  6. 6. How to mark up?  とある技術のマークアップ例その1  フォントの直書き  デザイン上はHTML5でも、ブラウザやクローラーは 「う」 と認識 <a href=“html5.html”>う</a> a { font-family: 'jsdoitSymbols'; }
  7. 7. How to mark up?  とある技術のマークアップ例その2  文章を書いたうえで、修飾としてアイコンを配置  ユーザー、ブラウザー、クローラーにやさしい HTML5 Elements <a href=“” class=“icon_html5”>HTML5 Elements</a> . icon_html5:before { content: “ う"; }
  8. 8. How to mark up?  とある技術のマークアップ例その3  Spanの空タグ  セマンティック上、意味のない空タグは使いたくない Desktop <p><span class="icon-desktop"></span>Desktop</p> .icon-desktop:before { content: " ¥f108 "; }
  9. 9. 空タグ(- -;)  Semantic - 不要なタグ  Accessibility - 音声読み上げツールが読めない - テキストブラウザーも読めない  Browserbility - 無駄なDOM構築 > レンダリングコスト増  SEO - クローラーも読めない
  10. 10. How to mark up?  とある技術のマークアップ例その4  iタグに入れるって。。。? Desktop <p><i class="icon-desktop"></i>Desktop</p> .icon-desktop:before { content: " ¥f108 "; }
  11. 11. Why <i>element (- -;) ? HTML5では声や心の中で思ったことなど、他と区別したいテキストを表す と変更された http://www.w3.org/wiki/HTML/Elements/i どうせなら、<i>は、こんなふうに使いたいところ <i>I love HTML5.</i>
  12. 12. How to mark up?  <i>や<span>などの空タグを書く意味はない  空タグ使わないで親タグのbeforeでいいと思うよ。 Desktop <p class="icon-desktop">Desktop</p> .icon-desktop:before { content: " ¥f108 "; }
  13. 13. How is Accessibility ? iphoneの音声読み上げツールで読んでみた。 http://fontawesome.io/
  14. 14. How is Accessibility ? http://fontawesome.io/ 音声読み上げツールで “toggle navigation” Font Awesome ほんとAwesomeだよ !!
  15. 15. How to mark up?  UIとしてのアイコンのマークアップ  アクセシビリティにも対応させるため、テキストを書き、それを囲む要 素でテキストを非表示にする。 <a class="icon-menu"><span>Toggle Navigation</span></a> .icon-menu:before { content:"¥f0c9 "; } span { position:absolute; clip:rect(0, 0, 0, 0); }
  16. 16. Ligature Symbols  複数文字を一つの文字(合字)として、アイコンを作る。  セマンティック的な問題が解決される。 Cf. http://www.slideshare.net/kudakurage/ligature-symbols <a href="">mail</a>
  17. 17. まとめ  修飾としてのIcon (Icon + テキスト)マークアップ テキストがあるから読めるでしょとはいえ デザインのための無駄な空タグはいらない  UIとしてのIcon(テキストなし ユーザー操作用) ソースにテキストを書いてアクセシビリティに考慮しよう

×