マークアップをしているときに、 誰がみてもわかるルールで あとから融通のきくように と、誰だって考える。 でもこれは、考えてるだけじゃできない。なんでもそうだけど、しっかり理解していないとできない。 かく言う自分もちゃんと出来ていなくて。あらためて整理してみたい。 特に今回は、cssの命名規則について BEM Block / Element / Modifier もう有名すぎて解説すべきことはなにもない。 block__erement--modifier アンダーバーとハイフン2つずつで区切る。 LPとか、1ページ1ページがユニークなデザインのサイトに向いているんじゃないかと思ってる。 サンプル <section class="intro"> <h1 class="intro__title">イントロダクション</h1> <dl class="intro__description"> <dt class="intro__description--term">BEMが好き</dt> <dd class="intro__description--text"> BEMが好き。<br> だってとってもわかりやすから。 </dd> </dl> </section><!-- /intro --> <section class="about"> <h2 class="about__title">わたしについて</h2> <dl class="about__description"> <dt class="about__description--name">名前は●●です。</dt> <dd class="about__description--favorite"> cssが好き。htmlも好き。<br> javascriptはあまり好きじゃない。 </dd> </dl> </section><!-- /about --> といった感じで、class名見ればだいたい何についてやってるかわかる。 FLOCSS Foundation / Layout / Object(component,project,utility) cssをレイヤとオブジェクトにわけて、パーツ化する。 class名の、命名ルールについても、上で引用した5つの頭文字を取って接頭語とするので、どのレイヤ、パーツに属しているのかすぐわかる。 同じレイアウトや色違いのパーツなどを使い回す大規模なコーポレートサイト等で威力を発揮すると思ってる。 .f-base .f-header .c-button .p-pagename .u-mt etc...... あとからパーツが増えたときも、該当のcssファイルに追加するだけなので管理しやすい。 scssとの親和性 BEMもFLOCSSもscssとの親和性がすごく高い。 ただのcssであれば長ったらしくなって逆に手間だったけれど、scssの登場で変わった。 サンプル /* BEM */ .intro{ &__title{ ... } &__description{ &--term{ ... } &--text{ ... } } } /* FLOCSS */ .f-{ &header{ ... } &footer{ ... } } 名前、なににする？ ちゃんと理解してないとここでハマる。 BEMはそのページ内でちゃんとルール守っていれば、まぁいいかってなるときもあるかもしれない。 でもFLOCSSだと、このパーツはどのレイヤに所属するべきか。他にどんなパタンが想定されるか、エトセトラ。 初期設計しっかりしておかないと、あとからわけのわからないものどんどん追加されて、 「なんかFLOCSSっぽいけど、担当変わって壊れたな」 なんて思われかねない。 そしてどちらにも共通して言えるのが、なんという名前にするか。 「ええと、金融機関の説明？　英語にすると……」 「ここは●●ページのタイトルで、ここはイントロダクションで、これはA要素の見出しと説明文でこっちは……」 自分は英単語の基礎知識少ないし文節をぱっと英語にもできないから結構調べならが決める。 この時間がもったいない（英語を勉強すれば解決するのか？　とたまに思う）。 ユーティリティ名で攻める 最近、なんかこれもありかなぁという気がしてきた。 でもユーティリティの設定だけでどうにかなるとは思えない。 各ページでどうしてもユニークにcssを記述する箇所が出てきそう。 そうなったときは結局なにか名前をつけなくちゃいけない。 BEMかFLOCSSか これらもご多分に漏れず一長一短だと思ってる。 なんでもそうだけど、そのケースにあわせて最適なものを選択したい。

CSSのプロパティーについて プロパティーの種類は様々なものがありあます。 文字の色、背景色、背景画像、フォントの種類、フォントの大きさなどがあります。 ではここで実際に使ってみしょう。 まずはhtml内にPタグを指定し文字の色を変えてみよう。 index.html <p>テスト</p> style.css @charset "utf-8" p { /*処理を書く*/ color:#f0000; } 上の様に文字が赤くなっていれば成功です！ 日本で訳すとすべてのPタグに対して文字の色を赤くしてねという命令になります。 Pタグの{}内の処理はcolorで文字色を変えてほしいということになり、何色に変えるのかという 命令を：の後に書いています。 文字の大きさを変える場合はfont-size:〇〇px; 背景色はbackground-color、背景画像はbackground-imag：url();です。 例題として、html内でPタグを指定しテキスト内容はHallo. cssでpタグに対して文字の大きさを20ピクセル　文字色は白　背景色を青にしてください。 すると以下の結果になります。 コードの回答はこちら index.html <p>Hallow</p> style.css @charset "utf-8" p { color:#ffffff; background-color:#0000ff; font-size:20px; } 次は四角箱を３つほど作ってみましょう まず横幅を４０ピクセル、縦幅を３０ピクセルにします。 そしたら箱の空間を１０ピクセルほどにしていきます。 index.html <div class="box"></div> <div class="box2"></div> <div class="box3"></div> style.css @charset "utf-8" p { /*処理を書く*/ .box { width: 40px; height: 30px; background-color: blue; } .box2 { width: 40px; height: 30px; margin-top: 10px; background-color: blue; } .box3 { width: 40px; height: 30px; margin-top: 10px; background-color: blue; } 処理を見ていきましょう widthは横幅、heightは縦の長さを表しています。 margin-topは上の余白部分を表しています、余白についてはまた後日書いていきます。 background-colorで背景色の指定をしています。これらの結果は以下の様になっていますか？ 縦に並んでいれば正解です。 HTMLの処理を基本的には上から下に流れ左側に反映されていきます。 問題です、青い箱を好きな色に変えてください(青以外の色、３つの箱の色をバラバラで）大きさは横と縦を同じ１００ピクセルに指定。余白はそのままで平気です。 こんな感じになりましたか？なっていれば正解です。答えは次回に載せます。