Your SlideShare is downloading. ×
0
Semantic markup with icon font
Semantic markup with icon font
Semantic markup with icon font
Semantic markup with icon font
Semantic markup with icon font
Semantic markup with icon font
Semantic markup with icon font
Semantic markup with icon font
Semantic markup with icon font
Semantic markup with icon font
Semantic markup with icon font
Semantic markup with icon font
Semantic markup with icon font
Semantic markup with icon font
Semantic markup with icon font
Semantic markup with icon font
Semantic markup with icon font
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Semantic markup with icon font

363

Published on

Semantic markup with icon font

Semantic markup with icon font

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

No Downloads
Views
Total Views
363
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×