DAY36.デザインカンプからコーディング編 ボタン・見出し作成

01.ボタン、見出しを自在に作れるようになる

Webサイトを制作する時は、見出しやボタンのパーツの利用頻度が一番多い

見出しやボタンはHTML/CSSで自在に作れる状態になっておくのがベスト

02.ボタン・見出しコーディングのメリット

擬似要素・position・transformなど、CSS活用のコツが詰まっている

一度作った見出しやボタンのパターンは、
メモ帳に保存していつでも引き出せるようにしておく

CSSの装飾でよく使われる「背景画像」「疑似要素」の使い方・位置関係を覚えるのに最適

アローアイコンの位置を自在に調整できるスキルが身につけば、
今後のあらゆるコーディングが楽になる

03.見出しとボタンのコーディング

マーカー → background-image: linear-gradient();
グラデーション → background-image: linear-gradient();
色の互い違い → background: repeating-linear-gradient();

z-indexで要素を上にする

transform: translate();で中央揃えや回転ができる

transparentで要素を透明にする