今回の内容はアプリ制作を進めていくうえで使用した擬似要素についてです。
昨日と同様にHTML、CSSのリファクタリングを進めていたところ、矢印の部分を作る際に擬似要素に書き換える必要が出てきました。理由としては、 HTML上に記述する要素はできるだけ少なく、分かりやすいようにするべきであるからとのことでした。
＊昨日制作した左右の両端の部分です。
擬似要素の特徴はHTML上に記述せずとも、CSS上で記述することでブラウザ上に表示させることができる便利な機能のことです。
(例) ::before、::after etc...
＊具体的なCSS上における書き方
.example:before {/
content: 'TITLE HERE';
color: gray;
font-size: 2em;
display: block;
}
ちなみに content:' ' を書き、' 'の中に文字を書くことで、もとの要素とは別にブラウザ上に文字を表示させることもできます。
慣れるとCSSだけでこんなもの↓まで書けるようになるそうです。フロントエンドエンジニアとして活躍していくからには、JS関連のフレームワークだけでなく、身近にあるCSSもより上級なものを扱えるようにしていきたいと思います。
ちなみに今回参考にしたのはこちら↓の記事です。
このシリーズはCSS関連の情報が非常に分かりやすく、かつ豊富に揃っているため、リファレンスとして非常におすすめです。