flexbox, responsive, css variablesについて勉強した

ふと思い立ってCSSを真面目に勉強しようと思い(N回目), 今更ながら flexbox メインに勉強しました

Flexbox

ここ がとてもわかりやすくて基本こっちみてくださいという感じです :raising_hand:

「floatなんて使っていいのは小学生までだよねー」と巷でもよく聞きますが、僕もようやく手を出せました。

結論「もうfloatとかイラネ」です。

とりあえず親要素に display: flex, 子要素には flex: n を重み付け的なノリで付けます(optional)

flexboxAの親要素 -> flexboxAの子要素 兼 flexboxBの親要素 -> flexboxBの子要素 のように入れ子にもし放題なので、比較的直感的に書けるかなーという印象。

以下簡単なサンプルをば。

Horizontal

よくある Header + nav list みたいなのです。実際書いてみるとわかると思いますmm

gist

Vertical

Header + Main Section + Footer みたいなの

gist

Responsive

これはいっつも忘れますが <head> に以下をちゃんと書こうねってだけの話。(毎回忘れる)

<meta name="viewport" content="width=device-width,initial-scale=1.0"/>

CSS Variables

以下のように -- で始まる変数を定義してあげて, var(--var-name) で呼び出す。

まだ experimental なせいか、Chromeでもうまく動いたり動かなかったりする??

:root {
    --main-color: #60B99A;
    --sub-color: #F9FFFF;
}

.main-box {
    background: var(--sub-color);
}

disられてる記事とかどっかで読んだことありますが、まだSass使うかなーという感じ。

Contents