一旦、CSSについてまとめてみる

目次

• 基本

  • ボックスモデルを意識
  • display系は覚えろ
  • marginとpaddingの使い分け

• コーディング

  • class vs id
  • ボックスモデル内の繋がり(親子関係)

• 効率

  • すぐ試せるサイト
  • ダミーテキスト、ダミー画像

ボックスモデルを意識

引用元画像: https://mdn.mozillademos.org/files/13647/box-model-standard-small.png

レイアウトをする場合にボックスを配置していく。 そして、ボックスの中に一回り小さいボックス、そのボックスの中に一回り小さいボックス、…というようになる。 marginとpaddingは見えない領域なのでborder: solid red;とかしてなんとなく確認。

display系は覚えろ

要素は最初からdisplayプロパティの初期値が設定されている。例えば、h1, h2, divなどはdisplay: block;になり、その前後に改行が入る。 a, spanなどはdisplay: inline;となり、文章のなかで、そのまま繋げて書くことが可能。display: inline-block;では、ul>li*3みたいな感じでリスト並べたときに、横並びにしたい時に使われてる。

marginとpaddingの使い分け

良くわからん。が、自分がやっている感じだと ボックスモデルを意識して、デザイン的にcontentの周りの余白を調整するならpadding、隣り合ったボックスモデルの間隔を広げたいなら、margin。

class vs id

htmlのattributeで記述する際、javascriptを使用して要素を特定したい場合はid、cssはclassって元から分けておくと 影響範囲を分離できるので管理がしやすい という情報をHTML5/CSS3モダンコーディング という本で見たので実践。

ボックスモデル内の繋がり(親子関係)

<div class="box">
    <div class="box-title">TITLE</div>
    <div class="box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero felis, finibus eu dignissim sit amet, tristique venenatis turpis. </div>
</div>

.box {
    padding: 5px;
    border: solid orange;
}
.box-title {
    font-size: 1.3rem;
    font-weight: bold;
    padding: 10px;
}
.box-text {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

親の名前の後に、子の名前を付けるとかのルール作っておくと後で見やすい。なんとなくでcssのコードが読める。 大勢でやっている場合は誰かがルールを作っている可能性があるので、それに従うといい。

すぐ試せるサイト

https://jsbin.com
cssの使い方を試したいときなどすぐに書いて、確認できる。

ダミーテキスト、ダミー画像

http://www.lipsum.com/
一般的なダミーテキスト。意味のない文字列の羅列になっている。

https://placehold.jp/
ダミー画像。背景色、文字、画像サイズ変更などもできる。