ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
- 4. ⽻羽⼭山 祥樹 HAYAMA Yoshiki
v インフォメーションアーキテクト
• 使いやすいWebサイトをつくる専⾨門家
• HCD-‐‑‒Net認定 ⼈人間中⼼心設計専⾨門家
v Web業界に20年年くらい
v 担当したWebサイトが、雑誌のWebユーザビリティランキン
グで国内トップクラスの評価を受ける ほか実積多数
v 主な専⾨門分野
• ユーザーエクスペリエンス、情報アーキテクチャ、
⼈人間中⼼心設計、アクセシビリティ、⼤大規模CMS、ライター
Twi$er:@storywriter
WebSite:
storywriter.jp
4
ユーザー⼼心理理を
つかむプロです
- 6. 6
CSS は、⼤大規模な環境ほど、保守が難しい
• 数千ページ、数万ページの規模。
• 1つの CSS ファイルが、数千ページから参照される。
• CSS ファイルが散乱している。
• 何⼗十⼈人もが、つねに HTML をさわっている。
• スキルレベルや状況はさまざま。
• 初学者、コードに美学のない制作者、納期優先の実装。
• 制作会社が複数いることが常時。
• 何年年間のうちに、⼈人が⼊入れ替わっていく。
• それでも安定して運⽤用できる CSS の記法とは?
- 8. 8
それでも CSS はこんがらがる
<p class=”header-‐‑‒link">
<a class=”header-‐‑‒link_̲_̲icon" href="#">
リンクテキスト</a>
</p> このコードひとまとまりで
標準のコンポーネント。
絶対に変えるな!
と、あれほど⾔言ったのに
- 9. <p class=”header-‐‑‒link">
<a class=”header-‐‑‒link_̲_̲icon" href="#">
リンクテキスト</a>
</p>
9
それでも CSS はこんがらがる
それをするのは、あなたの隣隣⼈人かもしれないが、
4ヶ⽉月後のあなた⾃自⾝身かもしれない。
<a class=”header-‐‑‒link_̲_̲icon" href="#”>
<p class=”new-‐‑‒link">
セレクタ
新設しちゃえ
抜き出して
使っちゃえ
- 17. <p class=”header-‐‑‒link ( -‐‑‒ブロック )">
<a class=”header-‐‑‒link_̲_̲icon ( -‐‑‒テキスト編集の
み可 )" href="#">
リンクテキスト</a>
</p>
17
こう書いたらどうか?
区切切りはいろいろ試したが「( )」の視認性がよかった。
しかも、既存の CSS と共存できる。
- 18. <p class=”header-‐‑‒link ( -‐‑‒block )">
<a class=”header-‐‑‒link_̲_̲icon ( -‐‑‒editable ��)"
href="#">
リンクテキスト</a>
</p>
18
もう少し、受け⼊入れやすくした(海外にも)
くりかえすが(驚くべきことに!)
これは HTML5 の仕様に準拠している。
- 19. <p class=”header-‐‑‒link ( -‐‑‒block )">
<a class=”header-‐‑‒link_̲_̲icon ( -‐‑‒editable )"
href="#">
リンクテキスト</a>
</p>
19
なんと、この書式は jQuery でもあつかえる
$( ʻ‘.-‐‑‒editableʼ’ ) で参照できる。
なんと jQuery であつかえる。
もう驚きしかない。
- 20. <p class=”header-‐‑‒link ( -‐‑‒block )">
<a class=”header-‐‑‒link_̲_̲icon ( -‐‑‒editable )"
href="#">
リンクテキスト</a>
</p>
20
補⾜足:data 属性を使わず、CSS のみで書く
data 属性を使わない。class 属性(CSS の世界)だけ
に閉じることで、初⼼心者にも馴染みやすい。
- 23. 23
WYSIWYG HTML Editor の提供
HRCSS に対応した WYSIWYG HTML Editor を、
HRCSS の⽂文法とともに、オープンソースで提供。
https://github.com/storywriter/hrcss で公開。
- 25. 25
WYSIWYG HTML Editor の提供
スタイルガイドやコーディング規約だけでは、
解釈が、どうしても制作者により跛⾏行行する。
スタイルガイドとともに、
それをラクに、確実に実装できる「しくみ」
(WYSIWYG HTML Editor)も提供して、
品質を担保する。
- 27. 27
⼤大規模でも保守しやすい CSS のために
1. セレクタ名は⼈人間への指⽰示のために書く。
2. セレクタのなかに、必要な情報を含める。
3. セレクタは読みやすく、そして理理解しやすく書く。
4. しくみ(WYSIWYG HTML Editor)も提供する。
- 29. ⽻羽⼭山のプレゼンのアレ が、
スタンプになりました!
スタンプ名:ハーミィ(CSS編) 作者名:⽻羽⼭山 祥樹
https://store.line.me/stickershop/product/1228201/ja
Web・CSSネタ
全40種類