横並びにしたリストはデフォルトでは左寄せで、リスト内のそれぞれの要素には余白もなく、詰まった印象を与えます。
これを中央寄せにしたり、間隔を均等にしたり、デザインに合わせてそのリストの位置をそれぞれ変えたいと思ったことはありませんか。
この記事ではそれらを可能にするCSSのプロパティである『justify-content』の使い方について解説していきたいと思います。
Contents
準備：横並びのリストを作る
まずは横並びのリストを作るところから始めます。
今回はこの部分が大切ではないので、簡単に説明すると、リストを構成している親要素に『display: flex;』を指定することで、リストは横並びにすることができます。
横並びのリストの詳しい作り方はリストを『display: flex;』で横並びにする方法で詳しく解説していますので、参考にしてみてください。
下記のコードを見てください。
<ul class="menu">
<li>TOP</li>
<li>SERVICE</li>
<li>NEWS</li>
<li>CONTACT</li>
</ul>.menu {
display: flex;
list-style: none;
}
.menu li {
padding: 8px 25px;
border-bottom: 1px solid #000000;
}
リストは横並びにはなっていますが、デフォルトの左寄せのままで、余白がないという状態です。今回はメニューバーを意識したリストを使いながら解説していきたいと思います。
・justify-content: center;
『justify-content: center;』はその値の名の通り、リストの中のアイテムを中央寄せする方法です。 『justify-content: center;』はリストの親要素に対して指定します。
.menu {
display: flex;
list-style: none;
justify-content: center;
}
.menu li {
padding: 8px 25px;
border-bottom: 1px solid #000000;
}
このように指定することにより、リストは中央寄せされますが、余白を指定していない限りデフォルトの場合と同様に要素同士は余白なく隣り合っている状態になります。
余白を必要としない場合には『justify-content: center;』は非常に有効な手段ではありますが、余白を必要とする場合は『padding』や『margin』で別に余白を指定するよりもこれから紹介する方法で余白のあるメニューバーを作成する方が得策といえます。それではこれから余白のある横並びのリストの作り方を紹介していきます。
・justify-content: space-between;
『justify-content: space-between;』は使用できる横幅いっぱいにリストのアイテムを等間隔で配置する方法です。『justify-content: space-between;』は『justify-content: center;』と同様にリストの親要素に対して指定します。
.menu {
display: flex;
list-style: none;
justify-content: space-between;
}
.menu li {
padding: 8px 25px;
border-bottom: 1px solid #000000;
}
リストは横幅いっぱいに配置されています。そして、リストのアイテムはそれぞれ等間隔に配置されています。もし、一部のアイテムにのみ余白の指定をした場合、余白を指定した部分にだけその余白が生まれます。
そのような指定をした場合、等間隔な余白を作るデザインが崩れてしまいます。そのため、『justify-content: space-between;』を指定した場合、一部を除いて余白の指定は必要ないでしょう。
・justify-content: space-around;
『justify-content: space-around;』は『justify-content: space-between;』と同じようにそれぞれのアイテム間に同じだけの間隔を空けて配置しますが、『justify-content: space-between;』と違い、両端のアイテムの左右にそれぞれアイテム間の間隔の半分の幅の間隔を空けて配置されます。そして、これも先の２つ同様にリストの親要素に対して指定します。
.menu {
display: flex;
list-style: none;
justify-content: space-around;
}
.menu li {
padding: 8px 25px;
border-bottom: 1px solid #000000;
}
それぞれのアイテムは等間隔に並べられています。そして、両端にはそれぞれのアイテム間の間隔の半分の幅が余白として存在しています。
『justify-content: space-around;』も『justify-content: space-between;』と同様に基本的には別で余白を作らずに『justify-content: space-around;』を指定することで出来る余白のみを使って配置する方が得策です。
・justify-content: space-evenly;
『justify-content: space-evenly;』は『justify-content: space-around;』と同様にアイテム間には均等な余白が存在し、両端にも余白があります。しかし、『justify-content: space-around;』と違い、両端の余白はアイテム間の間隔の半分の幅ではなく、アイテム間の間隔のと同じ幅の間隔が存在しています。そして、これも先の３つ同様にリストの親要素に対して指定します。
.menu {
display: flex;
list-style: none;
justify-content: space-evenly;
}
.menu li {
padding: 8px 25px;
border-bottom: 1px solid #000000;
}
それぞれのアイテムは等間隔に並べられています。そして、両端にはそれぞれのアイテム間の間隔と同じだけの幅が余白として存在しています。
『justify-content: space-evenly;』も『justify-content: space-around;』や『justify-content: space-between;』と同様に基本的には別で余白を作らずに『justify-content: space-evenly;』を指定することで出来る余白のみを使って配置する方が得策です。
今回はメニューバーを例に説明をしていきましたが、メニューバーの場合は『justify-content』で余白を取るのではなく、『padding』で余白を取ることでhover時に『background-color』の変化を付けることができます。
hover時の変化の指定方法は疑似クラス『hover』の使い方を完全解説で詳しく解説していますので、参考にしてみてください。
これとは違い、ショッピングサイトのようにいくつものアイテムを均等に並べる時は『justify-content: space-between;』などで均等な間隔にアイテムを並べる方が無難かもしれません。
このように『justify-content』はアイテムを綺麗にデザインすることができるプロパティです。活用していくことで、アイテムを思い通りに配置していくことが可能になるでしょう。
