第14回HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ！

1. 第14回 HTML5ビギナーズ
#html5jbg

3. @320kawashima
河島 美津雄
HTML5ビギナーズ 部長
html5j スタッフ

4. ビギナー部ってどんなことやってるの？
HTML5ビギナーズというこれからHTML5を始める・始めたばかりの方々のための勉強会をやっ
てます。基本的に入門者向けの内容になりますが、HTML5を中心としたWeb技術全般について
幅広く取り上げていきます。もちろん、ビギナーでない方のご参加もOK！復習や苦手克服に活
用してください！目指せエキスパート！

5. 活動理念
日本のWebのベースづくりに貢献する
河島の個人的な

6. フロントエンドエンジニア・Webデザイナ
マーケティングオートメーション始めました。

7. HTML5道場 書いています

8. 初心者向けjQueryハンズオン講座やってます

9. • なぜ人を簡単に信じてはいけないのか
• 信じれる人をみつける
アジェンダ

10. なぜ人を簡単に信じてはいけないのか
第1部

11. HTML
JavaScriptCSS
文書構造
視覚表現 振る舞い
ブラウザ側のよくある技術関係

12. HTML
JavaScript
CSS
Webサイトを作る
?
最初に教わった間違ったブラウザ側のよくある技術関係

13. 人に聞いてその情報を鵜呑みにした自分が悪い!

14. 知りたいキーワード
よくある情報収集例

15. 日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語で解説し
た内容、日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語
で解説した内容
仕様書をみて日本語で解説 仕様書をみて日本語で解説 仕様書をみて日本語で解説
仕様書をみて日本語で解説したサイト
情報を得る
www.xxx.xx/xxxx/xxxx/
仕様書をみて日本語で解説した内容、仕様書をみて日本語で解説した内容、仕様書をみて日本語で解説した内容、仕様書をみ
て日本語で解説した内容、仕様書をみて日本語で解説した内容、仕様書をみて日本語で解説した内容、仕様書をみて日本語で
解説した内容
日本語の情報をみて日本語で解説したサイト
www.xxx.xx/xxxx/xxxx/
日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語で解説し
た内容、日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語
で解説した内容
日本語の情報をみて日本語で解説したサイト
www.xxx.xx/xxxx/xxxx/
その検索結果の内容、信じて大丈夫ですか？

16. W3Cのサイトキャ
プチャ
技術には仕様書があります

17. こうらしいよー
と
仕様書にこう書いている

18. 大事なことは1次情報をみること

19. 信じれる人をみつける
第2部

20. @hilokiさんのFLOCSSのおかげで
CSSの書き方が劇的に良くなったお話

21. CSSを書いていて困る事
• このスタイルはどこで使われているの？
• このスタイルの影響範囲はどこまで？
• 似たようなスタイルが修正で全部対応しなちゃいけない…
• HTMLの要素の変更があったから、CSSも修正しなきゃ…めんどくさい…
• すでに効いている他のスタイルの詳細度が強すぎて上書きの修正が必要…
• 関連するスタイルがCSSファイルに散らばっていて修正しづらい…
• すでにあるスタイルでどういうものがあるの？使えるものがあるんだった
ら既存のスタイルを使いたい
・
・
・

22. このスタイルはどこで使われているの？
クラス名に場所の情報を含める。
逆に場所の情報が含まれていないクラス名は、場所に依存していないところで
使用されているということ。

23. このスタイルの影響範囲はどこまで？①
クラス名にプレフィックス（接頭辞）をつけて、再利用するための機能性もしくは単
純な凡用性があるのか、限定的なのかを明確にする。
FLOCSSのプレフィックスは小文字ですが、河島は大文字で頭字語として活用してい
ます。大文字=プレフィックスという分かりやすさと、スタイル以外の用途で例えば
Google Tag ManagerやJavaScriptに関連するクラス名を書くときに、GTM-やJS-とい
うように書けるので命名ルールの一貫性が出るからです。

24. このスタイルの影響範囲はどこまで？②
命名ルールにMindBEMdingを取り入れる。
MindBEMdingとはBEMというCSS設計に基づく命名ルールです。BEMはBlock・Element
・Modifierという3つの役割をクラス名に使用することで影響範囲を明確にしたものです。
例えば.block__element--Modifierというように書くことができます。BlockとElementの間は
「 __ 」、ElementとModifierの間は「 — 」、Modifierも細分化できてKeyとValueの間は「
- 」を使うというルールがあり、役割と記号がユニークなので一目で意味がわかります。
✳︎「-」はプレフィックスとMindBEMdingのKeyとValueの間で使用しますが、プレフィックスは必ず大文字から始まるの
で混同することはありません。

25. 似たようなスタイルが修正で全部対応しなちゃいけない…
スタイルの構造と見た目を切り離す。
先ほどのBEMでいうElementとModifierの関係で、Elementが構造にあたりModifierが見た目
（バージョン違い）になります。このように役割を分けることによって、共通の構造（例
えば形）に変更が生じた場合はElementのスタイルだけを修正すればすべてに反映されま
す。

26. HTMLの要素の変更があったから、CSSも修正しなきゃ
クラス名に要素セレクタを使用しない
例えば、h1.header__siteTitleというセレクタを書いていて、h1要素がp要素に変更になっ
たら、セレクタをp.header__siteTitleに変更しないといけません。そもそも
.header__siteTitleとしておけばセレクタの修正は必要ありません。またpセレクタのスタイ
ルにも影響を受けません。
✳︎ここではあくまでセレクタ名についての話です。reset.cssが適用されていれば、さらにスタイルについても修正
が不要の可能性が高いですが、normalize.cssの場合は必要に応じてスタイルも調整が必要になります。

27. すでに効いている他のスタイルの詳細度が強すぎて上書きの修正が必要…
セレクタの詳細度は最小限に。
例えば、html body header h1.header__siteTitle aというセレクタを書くのではなくて、
.header__siteTitleLinkと書く。詳細度を最小限にすることによって、他のスタイルの影響
を与えないようにする。
✳︎テキストリンクの色を全て共通にする場合は、baseについてのみ記述するスタイルで調整する。この時は要素セ
レクタを使用するのが効率的です。FLOCSSの_base.scss。

28. 関連するスタイルがCSSファイルに散らばっていて修正しづらい…
次の3つのレイヤーと、Objectレイヤーの子レイヤーで役割によってファイルを細か
く分け、最終的にCSSプリプロセッサでコンパイル。
Foundation
Layout
Object
├──Component
├──Project
└──Utility

29. すでにあるスタイルでどういうものがあるの？既存のスタイルを使いたい
スタイルガイドを活用する。例えばStyledoccoとか。

30. 何を信じるかの目を養おう