エンジニアステップ

初心者・未経験エンジニア向けの技術ブログ

【DAY4】ボタン、見出しを自在に作れるようになる【#30DAYSトライアル2nd】

こんにちは、アルパカです

#30DAYSトライアル2ndの復習&解説記事です。

個人的につまずいた箇所、調べた箇所を中心に書いています。

» 参考:Webコーダーとして仕事できるようになる30日まとめ

 

【DAY4課題】ボタン、見出しを自在に作れるようになる

DAY4の課題は「ボタン、見出しを自在に作れるようになる」です。

 

ボタン、見出しを作るのに役立つCSS

ボタンと見出しを自分で大量に作ってみよう!というのが今回の課題です。

基本的には記事内で紹介されているリンク先(サルワカさん)を真似すれば大体できます。

しかし一部、応用が必要なところもあります。

※私は「見出しの17番」はbackgroundでは無理そうだったので、擬似クラスbeforeを設定して実現しました

 

以下、今回学んだ新しいCSSについて調べた内容を共有します。

グラデーションを作る関数「linear-gradient」

グラデーションを作る「linear-gradient」は関数です。

※()がついているやつは関数です。前々回使ったcalcも関数でした

 

linear-gradientの使い方は下記の記事を読むと良いですが、長いし分かりづらいかも。

「構文」だけ読んでもなんとなく理解できると思います。

/* 45度に傾いたグラデーションで、
青から始まり赤で終わる */
linear-gradient(45deg, blue, red);

 

/* 右下から左上に向かうグラデーションで、
青から始まり赤で終わる */
linear-gradient(to left top, blue, red);

 

/* 色経由点: 下から上に向かうグラデーションで、
青から始まり、長さの40%ののところで緑になり、
赤で終わる */
linear-gradient(0deg, blue, green 40%, red);

linear-gradient() - CSS: カスケーディングスタイルシート | MDN

developer.mozilla.org

 

とにかくグラデーション作り覚えておくべきは、

  • 複数の色を使うことが出来る
  • グラデーションの向きを指定できる
  • 色を変化する箇所を細かく指定できる

という3点です。

後は使う時に、記事を見ながら書けばOKだと思います。

 

グラデーションをパーツとして扱える「repeating-linear-gradient」関数

グラデーションを作る関数「linear-gradient」と似ているのが「repeating-linear-gradient」関数です。

グラデーションを作る関数「linear-gradient」との違いですが、「グラデーションで設定したパーツを繰り返し使えるという点が違います。

詳しくは下記記事の一番上「CSS DEMO」を見てみると雰囲気つかめると思います。

developer.mozilla.org

 

疑似クラスのみで使える「contentプロパティ」

「contentプロパティ」が便利です。

  • 擬似クラス(:before擬似要素や、after擬似要素)でしか使えない
  • 文字や画像を入れることができる

というプロパティです。

今回頻出でした

 

画像や図形の角度を変えたい時は「rotate関数」

画像や図形の角度を変えたい時は「rotate関数」が便利です。

「x、y、z」軸の好きな方向に角度をずらせます。

 

ちなみに角度指定につかう「deg」は「degree」の略ですね。

※角度/度という意味

 

親要素の背景として「疑似要素」を設定する(表示の優先順位)

親要素の背景として「疑似要素」を設定する(表示の優先順位)という方法をやってみました。

※見出しの17番目の課題ですね。

 

やり方は簡単で、疑似要素側のCSSに「z-index:-1」と書くことで他の要素(親要素)よりも後ろ側に回ります。

 

以上「ボタン、見出しを自在に作れるようになる」というお話でした。

全部やってみましたが、共通点がだんだんと見えてきました。 

※個人的にはpositionとdisplayのところでいつも迷いますのでもう少し整理して考えようと思います

www.engineer-step.com