CSS Flexboxなど
※こちらは学習中のメモ書きです。プログラミング勉強中の者が書いています。
Flexboxの練習
Flexbox学習をしたまとめはこちら
chiroru-memo.hatenablog.com
追加
justify-content: space-evenly; これも均等配置。アイテム周りの間隔量が等しい。
※「space-btween」は最初と最後の子要素を両端に。残りの要素を均等間隔で配置。
※「space-around」は両端の子要素も含んだ均等間隔の配置。(アイテム両側には半分サイズの間隔入る)
参考：justify-content - CSS: カスケーディングスタイルシート | MDN
また昨日勉強したjustify-content align-items align-content の3種、プロパティの値が同じようなjustify-content(水平方向) align-content (垂直方向)を対のものと勘違いしていたが、align-contentは複数行の際の垂直方向であってjustify-content align-items が水平・垂直の対であることに気づいたので訂正した。
flex方向が「列」のとき
justify-contentが垂直方向、align-itemsが水平方向と逆になるので注意する。
リセットCSSとノーマライズCSSの使い分け
まずリセットCSSは、デフォルトの設定を初期化する。一方、ノーマライズCSSはブラウザのデフォルト設定を0にしない。
そのため、細かい見た目の設定(特に余白など)をしたいサイトなどつくる場合はリセットCSSを、 情報発信が主であるサイトならノーマライズCSSで良さそう。そのサイトの目的に合わせて使い分けると良い。
CSS課題
今日からCSS上級課題に突入した。
擬似クラス :nth-child()
:nth-child()は兄弟要素のグループの中での位置に基づいて選択します。
例えば、
/ 兄弟要素の中で3つおきに 要素を選択 /
:nth-child(4n) {
color: lime;
}
とのこと(参考： :nth-child() - CSS: カスケーディングスタイルシート | MDN)
- 奇数番の要素をあらわす
odd - 偶数番の要素をあらわす
even
擬似要素 before・after
擬似要素を利用してアイコンを作った。
before after content: ""; position: relative; position: absolute; などを使用する。
