html <ul class="list_nav_header"> <li><a href="#">ABOUT.</a></li> <li><a href="#">FEATURE.</a></li> <li><a href="#">PROFILE.</a></li> <li><a class="btn_ico_mail" href="#">CONTACT.</a></li> </ul> css [class*="btn_ico"] { display: block; height: 36px; display: flex; align-items: center; padding: 0 30p…

方法 ①擬似要素の利用 html <ul class="list_nav_header"> <li><a href="#">ABOUT.</a></li> <li><a href="#">FEATURE.</a></li> <li><a href="#">PROFILE.</a></li> <li><a class="btn_ico_mail" href="#">CONTACT.</a></li> </ul> css [class*="btn_ico"] { display: block; height: 36px; display: flex; align-items: center; pa…

方法 ①擬似要素の利用 html <div class="head_home"> <h2 class="ttl">ABOUT.</h2> </div> css .head_home .ttl { font: 500 56px/1em "Futura PT"; line-height: 1.28; position: relative; } .head_home .ttl:after { content: ""; display: block; position: absolute; width: 100%; height: 5px; background…

方法 ①flexの利用 See the Pen abBLWGm by コウ@リモートエンジニア (@programmerkou) on CodePen.

コンテナ のメリット まず、コンテナのメリットについては以下を参照 note.com 方法 ①全セクションにコンテナを使用 See the Pen gOLGReV by コウ@リモートエンジニア (@programmerkou) on CodePen. ②部分的にコンテナを使用する See the Pen gOLGxaP by コ…