デイトラweb制作中級編 DAY15
nakano
ボタンと見出しのコーディング
①下線の引き方
border ・・・ 色々な種類、太さの線が引ける
擬似要素（before、afterなど） ・・・ 線が対象要素に依存しないため、長さや配置が自由
②マーカーの引き方
background: linear-gradient(transparent 50%, 色);
「transparent」は上から透明にする
transparent 10%の場合 ↓
③吹き出し
・疑似要素（after）
・「relative」「absolute」
を使って作成 CSS三角形作成ツール を使うと楽にできる
④線の角度を変える
transform: rotate( 値 deg);
※rotate ・・・ 回転する deg ・・・ 度
⑤重なり順を指定
z-index: 数字;
最初に線を一本引いて、その上に文字を置くイメージ ↓
⑥色の互い違い
background: repeating-linear-gradient()
例：見出しパターン16の場合
background: repeating-linear-gradient(-45deg, #7385E9 0 15px, #A7BAFF 15px 30px);⑦色を重ねる
background: linear-gradient(to bottom, 色1, 色2,色3...);
※上から順番に色が付けられる
まとめ
今回はボタンと見出しを大量に作りました。
ボタンや見出しのコーディングにはCSS活用のコツが詰まっていたり、Webサイトを制作する時には、ボタンと見出しの利用頻度が一番多かったりと、
とにかく良いこと尽くしみたいなのでコーディング練習にはもってこいだと思いました！
