そんな疑問にお答えします。
ヘッダーナビゲーションの要素間には余白があります。
その部分をどう記述するか？というのが今回のテーマです。
横並び要素間の余白をとる３つの書き方
今回行うことは次のとおりです。
ヘッダーのナビゲーション部分の
要素間にそれぞれ40pxの余白をとります。
こうするためのコードを書いていきます。
※解説のコードは
【HTML/CSS】基本的なヘッダーの作り方【初心者でもわかるように徹底解説】
にて作ったものをそのまま使用します。
ナビゲーション部分のHTMLは以下のとおりです。
<nav class="header-nav">
<ul class="header-nav-list">
<li class="header-nav-item"><a class="header-nav-item-link" href="#">About</a></li>
<li class="header-nav-item"><a class="header-nav-item-link" href="#">Service</a></li>
<li class="header-nav-item"><a class="header-nav-item-link" href="#">News</a></li>
<li class="header-nav-item"><a class="header-nav-item-link" href="#">Blog</a></li>
<li class="header-nav-item"><a class="header-nav-item-link" href="#">Contact</a></li>
</ul>
</nav>
従来の方法
.header-nav-item {
margin-left: 40px;
}
.header-nav-item:first-child {
margin-left: 0;
}<li>要素である「.header-nav-item」に対して「margin-left」を指定。
ひとつ目の要素に「margin-left」がつかないようにするために「:first-child」を用いてゼロ指定。
これが一番わかりやすいと思います。
ただコードは2つ用意する必要があります。
1つ目の方法＜隣接セレクタ＞
.header-nav-item + .header-nav-item {
margin-left: 40px;
}「.header-nav-item」と「.header-nav-item」を「+」でつなぎ「margin-left」を指定。
上記は「.header-nav-item」の次に来る「.header-nav-item」に対して「margin-left: 40px;」を指定している状態です。
こうすることで先頭の要素には「margin-left」がつきません。
2つ目の方法＜:not(:first-child)＞
.header-nav-item:not(:first-child){
margin-left: 40px;
}「:not(:first-child)」で指定。
3つ目の方法＜column-gap＞
.header-nav-list {
display: flex;
column-gap: 40px;
}<ul>要素である「.header-nav-list」に対して「column-gap」を指定。
FlexboxおよびCSS Gridではgapプロパティが使えます。
「display: flex;」「column-gap: 40px;」と指定することで要素間のみに余白ができます。
※gapはIE11非対応です。
以上３つの書き方の紹介でした。
横並び要素間の余白をとる手段は1つ持っていれば実装はできます。
ですが手駒はあるに越したことはありません。
いろいろ試してみましょう。
投稿者 トシ
コメントを残す