概要

デフォルトのHTML/CSSでは、リスト内の各要素(li)は縦に並べられ、各要素の先頭にマーカーが付される。

このスタイルを変更し、li要素を横に並べるスタイルを設定する。

HTML/CSS

HTML

以下のリストでulタグにクラスを指定し、スタイルを設定する。

CSS

CSSの例は以下のとおり。

冒頭のブロックは関係する要素のリセットCSS。

ulタグに設定したmenuクラスのスタイル

• list-style-type: noneでリストのマーカー表示を抑止
• display: flexは、この指定1つで子要素のボックス要素が横並びになる

menuクラスの下のli要素のスタイル

• 親のulでflexを指定しているので、個別要素としてのスタイルを設定
• 各liを等幅に設定し、背景色を指定している

Rails/SCSS

HTML

HTMLの内容は同じ。

SCSS

リセットCSSはreset.cssファイルとして切り分けている。

考え方はCSSと変わらず、子要素liをブロック内に入れ子にしている。