9月22日 フィヨルドブートキャンプ学習記録

学習内容

理解した点

  • CSSで三角形ができる原理について borderで線を引いた時、線同士の接地面が斜線になっている点がポイント。 top,bottom,left,rightのうちいずれか1つの色を設定し、その他をtransparentで透明化させることで 三角形ができる。

  • 吹き出しの作成について 吹き出しは、複数の図形を組み合わせることで実現できる。 図形に図形をくっつける為には、「before」、「after」といった「擬似要素」というものを使用する。

  • 擬似要素について 簡単に言うと、「HTMLに記述されていない要素もどきをCSSで作る」事ができるもの。 「:before」 と「:after」がある。 セレクタ: before(or after){content : '内容' ;}のように記述する。 beforeの場合は要素の直前に、afterの場合は要素の直後に要素もどきが挿入される。

参考

https://codepen.io/ryotori1024/pen/BaKvNYd

分からなかった点、疑問に思った点

  • 「transparent」は要素を透明にするとの事だが、「opacity」で透明度を設定するのとはどう違う?

所感

CSSで三角形や吹き出しなどの図形を作成できるとは知らなかった為、本日の学習内容はとても興味深かった。 擬似要素も初めて学習した項目で、サイトを作成する際に非常に役立つものらしいので、しっかりマスターしていきたい。

明日の予定

CSSだけで三角形を作ろう！その2の残りの部分を読む。 flex boxについて学習する。