CSSでリストマークを消して、余白を調整する【CSSの書き方入門】

ここまでで、index.htmlの大まかなレイアウトは出来ました。
サイトが訪れた人が見やすいように、表示を綺麗にしていけば完成です！

• ヘッダーを整える
• リストマークを非表示にする
• ul,li要素の余白を調整する
• mainとasideの間隔調整

ヘッダーを整える

黒丸「・」が重なってしまっている、ヘッダーのli項目を綺麗に並べます。

リストマークを非表示にする

リストの項目前に表示されているマークをリストマークと呼びます。

デフォルトでのリストマークは、ulは黒丸（・）、olなら数字。
ですが、CSSの「list-style」プロパティを使えばを変更することも、表示を無くすことも出来ます。今回は無くしたいのでnoneと指定してみましょう。

style.cssを書き足していくときには、要素（セレクタ）の親子関係を意識しながら書くようにすると分かりやすいです。

list-style: none;を指定すると、黒丸「・」が消えました。

ul,li要素の余白を調整する

せっかくですから、ul部分をもう少し見やすくしましょう。
調整したいのは、下図の２箇所です。

①はulのpaddingをゼロに
②はliに対してmargin-rightを追加
すると実現できます。

ul {
  display: flex;
  padding: 0;
}

li {
  list-style: none;
  margin-right: 1rem;
}

mainとasideの間隔調整

FlexBoxを使って横並びにしたmainとaside。
２つの間に少し間隔があったほうが、左右が別パートだと分かりやすそうですね。

<main>の右側にmarginを加えましょう。

main {
  flex: 3;
  margin-right: 3rem;
}

赤の点線部分が追加したmarginです。
間が空いたことで、見やすさがアップしたのではないでしょうか？

これでindex.htmlは完成です！