たとえば画像の下ではなく、横にタイトルと説明文を入れたい…という場合、画像と説明文を横並びにする必要が出てきます。
インラインレベルのタグなら何もしなくても横並びにすることができるので、インラインレベルのタグであるimgタグとspanタグだけを使うようにすると、

と、このように横並びにすることは一応可能ではあるのですが、インラインレベルには効かないCSSも多いです。それに、インラインレベルのタグしか使えないとなると、横並びにできるものがかなり限定されてしまいます。
そこで今回紹介するのが、ブロックレベルでも横並びにすることができ、しかもその並び方や順番なども指定できる dsiplay: flex; と、それに関連する各種CSSプロパティです。
display: flex; を指定することで、ブロックレベルであるtableタグ(表)なども横並びに表示させることができます。
test | test2 |
test3 | test4 |
test | test2 |
test3 | test4 |
レスポンシブを考慮するのであれば、縦並びにしておいた方が表示領域からはみ出てしまうリスクはなくすことができますが、PCなど比較的画面が大きなデバイスでは横並びにした方が見やすく、縦スクロールさせる量を減らすことができるという大きなメリットがあります。
皆さんの中にも、画面の縦方向へのスクロールがあまりに長くて、最後までWebページを見る気をなくしてしまった…という経験をお持ちの方もたくさんいらっしゃると思います。それだけ縦スクロール量は、ページ閲覧の途中離脱に大きく関わります。
…このブログ記事も縦スクロールが長くなり過ぎないように、さっさと解説に入りましょうかね!笑。
◆ display: flex とは ◆
flex(フレックス)とは、display(ディスプレイ)プロパティの値の1つで、合わせて要素の横並びを指定するCSSです。
※実際は横並びにする時だけでなく縦並びにする時でも使うのですが、今回は横並びに的を絞って解説します
何よりも重要なポイントは、
横並びにしたい要素そのものではなく、親要素に設定するという点です。
実際にサンプルコードを見て頂くのが一番分かりやすいと思うので、こちらをご覧ください。
<div>
<p>このpタグを使った文章と</p>
<p>このpタグを使った文章を横並びにする</p>
</div>
div {
display: flex;
}
p {
background-color:lightblue;
width: fit-content;
}
p:last-child {
background-color: lightyellow;
}
このpタグを使った文章と
このpタグを使った文章を横並びにする
display: flex; を横並びにしたいpタグではなく、親要素のdivタグに設定しています。また、pタグはブロックレベルのタグなので、普通の手段では横並びにならないはずですが、しっかり横並びになっていますね。
このように、単に要素を横並びにするだけであれば、これだけでOKです。
しかし、実際は横並びにするだけでなく、横並びにした上でレイアウトを調整したいという場合がとても多いです。上の例でもpタグ同士がくっついてしまっていて、一見すると横並びというより繋がっているように見えてしまっていますよね。
そこで次の章では、横並びにした後の基本的な調整方法を説明していきます。
- POINT!
- ・display: flex; はブロックレベルでも要素を横並びにできるCSS設定!
- ・横並びにしたい要素そのものではなく、親要素に設定する!
◆ justify-content とは ◆
justify-contentとは、display: flex; などでレイアウトを調整した要素に対して、さらに要素の配置位置を指定することができるプロパティです。
値はキーワード値を取り、center、flex-start、flex-end…といったものがあります。
*justify-contentの構文*
■ セレクタ { justify-content: center ; }
通常、独立してこのCSSを設定するというよりは、display: flex; と合わせて設定することが多いです。なのでセットで覚えておくと良いと思います。
また、キーワード値は以下のようなものがあります。
*justify-contentのキーワード値と効果*
キーワード値 | 効果 |
center | 中央に配置する |
flex-start | 先頭に寄せる |
flex-end | 末尾に寄せる |
space-between | 等間隔に配置。先頭は先端に、末尾は末端に寄せる |
space-around | 等間隔に配置。先頭の前と末尾の後の余白は、アイテム間の余白の半分 |
space-evenly | 等間隔に配置。先頭の前と末尾の後の余白も同じ |
言葉ではイメージしづらいものもあるので、実際にどのように配置されるか試して確認するのが一番良いと思います。
下に、display: flex; だけを設定して横並びにしたボックスと、それぞれの効果が適用されるボタンを用意しました。
配置がどう変わるか、対応するボタンを押して実験してみてください!
実際に動かしてみると、どこでどう使ったら良いかがイメージできますね。たとえばヘッダーに設置したメニューを右端に寄せたい時は「flex-end」が良いでしょうし、画像を等間隔でフォトギャラリーみたいに並べたい場合は、「space-between」か「space-around」、「space-evenly」が良さそうです。
このように、単に横並びにするだけでなく「どのように横並びにするか」までできるようになると、より様々なデザインに対応することが可能となります。
- POINT!
- ・justify-contentは、flexなどで横並びにした要素をどのように配置するか指定できるプロパティ!
- ・justify-contentは、centerやflex-startなどのキーワード値で指定する!
◆ 横並びにした要素の並び替え ◆
display: flex; で横並びにした要素は、orderプロパティを使って並び替えることができます。
HTMLファイルを書き換えることなく要素の並び替えができるのはとても便利なので、ぜひ基本テクニックとして覚えてくださいね!
通常、display: flex; で要素を横並びにすると、HTMLに上から記述した順に左から右へと横並びになります。
<div id="samplebigflexorderbox">
<div class="sampleflexorder1">box1</div>
<div class="sampleflexorder2">box2</div>
<div class="sampleflexorder3">box3</div>
<div class="sampleflexorder4">box4</div>
</div>
div {
display: flex;
}
#samplebigflexorderbox div {
width:10vw;
height: 80px;
}
.sampleflexorder1 {
background-color:skyblue;
}
.sampleflexorder2{
background-color:lightgreen;
}
.sampleflexorder3{
background-color:lightyellow;
}
.sampleflexorder4{
background-color:yellowgreen;
}
ですが、HTMLの並びは変えずに横並びにした要素の並び順だけ変えたい…ということもあります。HTMLの方を変更してしまうと、他の部分にまで影響が出てしまうリスクが高いですからね。
そんな時に役立つのが、
orderプロパティです。
display: flex; や、justify-contentプロパティは親要素をセレクタにしてCSSを設定しますが、orderプロパティは子要素(横並びになっているコンテンツ=flex-item)に設定します。
値は単位をつけない数値で指定し、数値が若い方から並べられます。
* orderの構文 *
■ セレクタ(flex-item) { order: 1; }
orderプロパティを設定したフレックスアイテムよりも、設定していないフレックスアイテムの方が先に並べられます。なので、order: 1; と設定したアイテムが必ずしも先頭に来るとは限りません。
それを踏まえた上で、サンプルコードを見ていきましょう!
<div id="samplebigflexorderbox" style="display:flex;">
<div class="sampleflexorder1">box1<br>order指定なし</div>
<div class="sampleflexorder2">box2<br>order3</div>
<div class="sampleflexorder3">box3<br>order1</div>
<div class="sampleflexorder4">box4<br>order2</div>
</div>
div {
display: flex;
}
#samplebigflexorderbox div {
width:10vw;
height: 80px;
}
.sampleflexorder1 {
background-color:skyblue;/*orderを設定していないので先頭にくる*/
}
.sampleflexorder2 {
background-color:lightgreen;
order: 3;
}
.sampleflexorder3 {
background-color:lightyellow;
order: 1;
}
.sampleflexorder4 {
background-color:yellowgreen;
order: 2;
}
order指定なし
order3
order1
order2
orderプロパティを設定していないbox1は問答無用で先頭に来ます。他のboxはorderプロパティを設定しているので、orderの数値順に並んでいますね。
正直、Webサイトの作成途中などHTMLを編集しても問題がない状況であれば、HTMLの並び順を変えた方が手っ取り早いのは間違いありません。ですが、既に出来上がっているWebサイトの修正を行う場合はCSSで調整した方が無難です。(HTMLの並び順を変えると、それまで有効だったCSSが無効になることもあり、デザインが大きく崩れてしまう原因となるため)
また、PCページとスマホページで並び順を変えたい時なども役に立ちます。
- POINT!
- ・orderプロパティで、横並びにした要素の並び順を変更できる!
- ・orderプロパティは、親要素ではなく子要素(フレックスアイテム)に設定する!
- ・orderプロパティの値は数値で指定し、数値が小さいモノから順に並べられる!
- ・orderプロパティを設定していないものがあれば、それが先頭に来る!