CSS Tips x 3 (2019/12/10)

デザインの「引き出し」を増やすため、毎日Webサイトのデザインをチェックして、どういう意図でデザインされているのか、あるいはどこを改善すればよりよいデザインになるのかを考えていくということをします。
デザインレビューとでも言えばいいのでしょうか。

そういうことをしているうちに「よく見かけるデザインの傾向」というのが分かってきます。
今回は、部分的に見かけるデザインの要素をコーディングの勉強も兼ねて「CodePen」で再現するという試みをしました。

主にborder / position (relative & absoluteと位置調整用のtop他) / transform (translate) プロパティと::before / ::after疑似要素を使います。

１．カーソルを乗せると下線が左から右に伸びるアニメーション

グローバルナビゲーションメニューで時々見かけます。

borderでもbackground-colorでも実装可能。
background-colorの場合、線の幅と位置によっては文字を覆い隠してしまうので注意。

２．実はCSSだけで作れるアイコンパーツ

動画再生ボタン：

丸いのはborder-radius、三角はborderプロパティ。
borderの色を透明（transparent）にした部分から斜めになっていく感じ。

一番下の歪な三角形だけは、作った本人にも使い所が全然思い浮かびませんでした。

ハンバーガーメニュー（のボタン）：

ボタンそのものはCSSだけで作れてしまいます。

３列の横線（いわゆるハンバーガーボタン）はborderプロパティではなく、background(-color) / width /  height / marginプロパティとbefore / after疑似要素を併用します。

✕ボタンは、transformプロパティのtranslate / rotate / scale関数を使います。
真ん中の線（divタグ）を消すのにscale関数で大きさを0にしています。

transitionプロパティでアニメーションする際に意味が出てきます。多分。

３．右のアイテムが下にずれている一覧のレイアウト

リスト上の項目が並んでいるところで、右側のアイテムが左側より下がっているのを見るようになりました。

見出しや文章をずらして表示するのは、transformプロパティのtranslate関数を使います。

写真の「ツチノコ」みたいなのを気にしてはいけない。

結論

＊::before / ::after疑似要素は使いこなせると超便利
＊borderプロパティで三角形作れるとやっぱり便利
＊transformプロパティの特にtranslate関数はよく使う

寝ぼけた頭なので、結論の語彙が乏しくなってきております😴