1.menu-otherクラスに menu-other__title クラスを作成し、「Other Menu」の文字の下に下線を追加
line-height: 2 で文字の下の行間を調節。
border-bottom: で下線を追加。doubleは二重線のことを指す。
#1c305c で文字の色と下線の色を合わせる。
#menu .menu-other__title {
font-size: 1.6rem;
line-height: 2;
border-bottom: 1px double #1c305c;
margin-bottom: 0;
}
2.menu-otherクラスに"contents" "name" "detail"のクラスを作成
"contents"クラスのCSSに display: flex を書き、要素を並列させる。
要素の上部に線を追加するためのcssを追加。
一番上の要素のみ上部の線をなくすために、:not(:first-of-type)を記入
HTML
<div class="menu-other__contents">
<div class="menu-other__name">
<h4>Mocha</h4>
<p>Hot / Iced</p>
</div>
<div class="menu-other__detail">
<dl>
<dt>Regular</dt>
<dd>¥570</dd>
</dl>
<dl>
<dt>Large</dt>
<dd>¥650</dd>
</dl>
<dl>
<dt>Iced</dt>
<dd>¥570</dd>
</dl>
</div>
</div>
CSS
#menu .menu-other__contents {
width: 100%;
min-height: 15.6vh;
padding: 0.5vw 0;
display: flex;
}
#menu .menu-other__contents:not(:first-of-type){
border-top: 1px solid #D9D9D9;
}
3."menu-other__note"クラスを作成し、注意書きを書く
文字のカラーはメニューの邪魔にならないように薄めの色を指定。
font-sizeの単位remはHTMLタグの文字サイズを基準として相対的に文字サイズを指定するもの。
HTML
<p class="menu-other__note">掲載のほか、様々なメニューをご用意しております。</p>
CSS
#menu .menu-other__note {
color: #9B9A91;
font-size: 0.7rem;
}
→制作HP