一旦、CSSについてまとめてみる
目次
基本
- ボックスモデルを意識
- display系は覚えろ
- marginとpaddingの使い分け
コーディング
class
vsid
- ボックスモデル内の繋がり(親子関係)
効率
- すぐ試せるサイト
- ダミーテキスト、ダミー画像
ボックスモデルを意識
引用元画像: 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/
ダミー画像。背景色、文字、画像サイズ変更などもできる。