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.
第14回 HTML5ビギナーズ
#html5jbg
@320kawashima
河島 美津雄
HTML5ビギナーズ 部長
html5j スタッフ
ビギナー部ってどんなことやってるの?
HTML5ビギナーズというこれからHTML5を始める・始めたばかりの方々のための勉強会をやっ
てます。基本的に入門者向けの内容になりますが、HTML5を中心としたWeb技術全般について
幅広く取り上げていき...
活動理念
日本のWebのベースづくりに貢献する
河島の個人的な
フロントエンドエンジニア・Webデザイナ
マーケティングオートメーション始めました。
HTML5道場 書いています
初心者向けjQueryハンズオン講座やってます
• なぜ人を簡単に信じてはいけないのか
• 信じれる人をみつける
アジェンダ
なぜ人を簡単に信じてはいけないのか
第1部
HTML
JavaScriptCSS
文書構造
視覚表現 振る舞い
ブラウザ側のよくある技術関係
HTML
JavaScript
CSS
Webサイトを作る
?
最初に教わった間違ったブラウザ側のよくある技術関係
人に聞いてその情報を鵜呑みにした自分が悪い!
知りたいキーワード
よくある情報収集例
日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語で解説し
た内容、日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語
で解説した内容
...
W3Cのサイトキャ
プチャ
技術には仕様書があります
こうらしいよー
と
仕様書にこう書いている
大事なことは1次情報をみること
信じれる人をみつける
第2部
@hilokiさんのFLOCSSのおかげで
CSSの書き方が劇的に良くなったお話
CSSを書いていて困る事
• このスタイルはどこで使われているの?
• このスタイルの影響範囲はどこまで?
• 似たようなスタイルが修正で全部対応しなちゃいけない…
• HTMLの要素の変更があったから、CSSも修正しなきゃ…めんどくさい…
•...
このスタイルはどこで使われているの?
クラス名に場所の情報を含める。
逆に場所の情報が含まれていないクラス名は、場所に依存していないところで
使用されているということ。
このスタイルの影響範囲はどこまで?①
クラス名にプレフィックス(接頭辞)をつけて、再利用するための機能性もしくは単
純な凡用性があるのか、限定的なのかを明確にする。
FLOCSSのプレフィックスは小文字ですが、河島は大文字で頭字語として活用して...
このスタイルの影響範囲はどこまで?②
命名ルールにMindBEMdingを取り入れる。
MindBEMdingとはBEMというCSS設計に基づく命名ルールです。BEMはBlock・Element
・Modifierという3つの役割をクラス名に使...
似たようなスタイルが修正で全部対応しなちゃいけない…
スタイルの構造と見た目を切り離す。
先ほどのBEMでいうElementとModifierの関係で、Elementが構造にあたりModifierが見た目
(バージョン違い)になります。このよう...
HTMLの要素の変更があったから、CSSも修正しなきゃ
クラス名に要素セレクタを使用しない
例えば、h1.header__siteTitleというセレクタを書いていて、h1要素がp要素に変更になっ
たら、セレクタをp.header__siteT...
すでに効いている他のスタイルの詳細度が強すぎて上書きの修正が必要…
セレクタの詳細度は最小限に。
例えば、html body header h1.header__siteTitle aというセレクタを書くのではなくて、
.header__sit...
関連するスタイルがCSSファイルに散らばっていて修正しづらい…
次の3つのレイヤーと、Objectレイヤーの子レイヤーで役割によってファイルを細か
く分け、最終的にCSSプリプロセッサでコンパイル。
Foundation
Layout
Obje...
すでにあるスタイルでどういうものがあるの?既存のスタイルを使いたい
スタイルガイドを活用する。例えばStyledoccoとか。
何を信じるかの目を養おう
人の言うことを簡単に信じるな!
Upcoming SlideShare
Loading in …5
×

人の言うことを簡単に信じるな!

1,138 views

Published on

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

人の言うことを簡単に信じるな!

  1. 1. 第14回 HTML5ビギナーズ #html5jbg
  2. 2. @320kawashima 河島 美津雄 HTML5ビギナーズ 部長 html5j スタッフ
  3. 3. ビギナー部ってどんなことやってるの? HTML5ビギナーズというこれからHTML5を始める・始めたばかりの方々のための勉強会をやっ てます。基本的に入門者向けの内容になりますが、HTML5を中心としたWeb技術全般について 幅広く取り上げていきます。もちろん、ビギナーでない方のご参加もOK!復習や苦手克服に活 用してください!目指せエキスパート!
  4. 4. 活動理念 日本のWebのベースづくりに貢献する 河島の個人的な
  5. 5. フロントエンドエンジニア・Webデザイナ マーケティングオートメーション始めました。
  6. 6. HTML5道場 書いています
  7. 7. 初心者向けjQueryハンズオン講座やってます
  8. 8. • なぜ人を簡単に信じてはいけないのか • 信じれる人をみつける アジェンダ
  9. 9. なぜ人を簡単に信じてはいけないのか 第1部
  10. 10. HTML JavaScriptCSS 文書構造 視覚表現 振る舞い ブラウザ側のよくある技術関係
  11. 11. HTML JavaScript CSS Webサイトを作る ? 最初に教わった間違ったブラウザ側のよくある技術関係
  12. 12. 人に聞いてその情報を鵜呑みにした自分が悪い!
  13. 13. 知りたいキーワード よくある情報収集例
  14. 14. 日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語で解説し た内容、日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語 で解説した内容 仕様書をみて日本語で解説 仕様書をみて日本語で解説 仕様書をみて日本語で解説 仕様書をみて日本語で解説したサイト 情報を得る www.xxx.xx/xxxx/xxxx/ 仕様書をみて日本語で解説した内容、仕様書をみて日本語で解説した内容、仕様書をみて日本語で解説した内容、仕様書をみ て日本語で解説した内容、仕様書をみて日本語で解説した内容、仕様書をみて日本語で解説した内容、仕様書をみて日本語で 解説した内容 日本語の情報をみて日本語で解説したサイト www.xxx.xx/xxxx/xxxx/ 日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語で解説し た内容、日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語で解説した内容、日本語の情報をみて日本語 で解説した内容 日本語の情報をみて日本語で解説したサイト www.xxx.xx/xxxx/xxxx/ その検索結果の内容、信じて大丈夫ですか?
  15. 15. W3Cのサイトキャ プチャ 技術には仕様書があります
  16. 16. こうらしいよー と 仕様書にこう書いている
  17. 17. 大事なことは1次情報をみること
  18. 18. 信じれる人をみつける 第2部
  19. 19. @hilokiさんのFLOCSSのおかげで CSSの書き方が劇的に良くなったお話
  20. 20. CSSを書いていて困る事 • このスタイルはどこで使われているの? • このスタイルの影響範囲はどこまで? • 似たようなスタイルが修正で全部対応しなちゃいけない… • HTMLの要素の変更があったから、CSSも修正しなきゃ…めんどくさい… • すでに効いている他のスタイルの詳細度が強すぎて上書きの修正が必要… • 関連するスタイルがCSSファイルに散らばっていて修正しづらい… • すでにあるスタイルでどういうものがあるの?使えるものがあるんだった ら既存のスタイルを使いたい ・ ・ ・
  21. 21. このスタイルはどこで使われているの? クラス名に場所の情報を含める。 逆に場所の情報が含まれていないクラス名は、場所に依存していないところで 使用されているということ。
  22. 22. このスタイルの影響範囲はどこまで?① クラス名にプレフィックス(接頭辞)をつけて、再利用するための機能性もしくは単 純な凡用性があるのか、限定的なのかを明確にする。 FLOCSSのプレフィックスは小文字ですが、河島は大文字で頭字語として活用してい ます。大文字=プレフィックスという分かりやすさと、スタイル以外の用途で例えば Google Tag ManagerやJavaScriptに関連するクラス名を書くときに、GTM-やJS-とい うように書けるので命名ルールの一貫性が出るからです。
  23. 23. このスタイルの影響範囲はどこまで?② 命名ルールにMindBEMdingを取り入れる。 MindBEMdingとはBEMというCSS設計に基づく命名ルールです。BEMはBlock・Element ・Modifierという3つの役割をクラス名に使用することで影響範囲を明確にしたものです。 例えば.block__element--Modifierというように書くことができます。BlockとElementの間は 「 __ 」、ElementとModifierの間は「 — 」、Modifierも細分化できてKeyとValueの間は「 - 」を使うというルールがあり、役割と記号がユニークなので一目で意味がわかります。 ✳︎「-」はプレフィックスとMindBEMdingのKeyとValueの間で使用しますが、プレフィックスは必ず大文字から始まるの で混同することはありません。
  24. 24. 似たようなスタイルが修正で全部対応しなちゃいけない… スタイルの構造と見た目を切り離す。 先ほどのBEMでいうElementとModifierの関係で、Elementが構造にあたりModifierが見た目 (バージョン違い)になります。このように役割を分けることによって、共通の構造(例 えば形)に変更が生じた場合はElementのスタイルだけを修正すればすべてに反映されま す。
  25. 25. HTMLの要素の変更があったから、CSSも修正しなきゃ クラス名に要素セレクタを使用しない 例えば、h1.header__siteTitleというセレクタを書いていて、h1要素がp要素に変更になっ たら、セレクタをp.header__siteTitleに変更しないといけません。そもそも .header__siteTitleとしておけばセレクタの修正は必要ありません。またpセレクタのスタイ ルにも影響を受けません。 ✳︎ここではあくまでセレクタ名についての話です。reset.cssが適用されていれば、さらにスタイルについても修正 が不要の可能性が高いですが、normalize.cssの場合は必要に応じてスタイルも調整が必要になります。
  26. 26. すでに効いている他のスタイルの詳細度が強すぎて上書きの修正が必要… セレクタの詳細度は最小限に。 例えば、html body header h1.header__siteTitle aというセレクタを書くのではなくて、 .header__siteTitleLinkと書く。詳細度を最小限にすることによって、他のスタイルの影響 を与えないようにする。 ✳︎テキストリンクの色を全て共通にする場合は、baseについてのみ記述するスタイルで調整する。この時は要素セ レクタを使用するのが効率的です。FLOCSSの_base.scss。
  27. 27. 関連するスタイルがCSSファイルに散らばっていて修正しづらい… 次の3つのレイヤーと、Objectレイヤーの子レイヤーで役割によってファイルを細か く分け、最終的にCSSプリプロセッサでコンパイル。 Foundation Layout Object ├──Component ├──Project └──Utility
  28. 28. すでにあるスタイルでどういうものがあるの?既存のスタイルを使いたい スタイルガイドを活用する。例えばStyledoccoとか。
  29. 29. 何を信じるかの目を養おう

×