【簡単】CSSで要素を横並びに配置する方法を詳しく解説【初心者向け】

横並び アイキャッチ プログラミング

どうも、なおやんです。

Web制作を始めた頃にハマりやすい罠の一つに、要素の縦並び横並び問題があります。

横並びに配置したいのに意図せず縦並びになってしまったり、その原因が分からなかったりとストレスを感じた経験をしたこともあるのではないでしょうか?

今日はそんな配置の煩わしさを一瞬で解決する方法をお話していきます!

とくにWeb制作初心者は必須ポイントなので、ぜひ最後まで読んでマスターしていってください。

本記事の内容

SCCで要素を横並びにする簡単な方法を解説しています

【まずはじめに】floatを使って配置するのはやめよう

まず大前提ですが、要素を移動させたい場合にCSSで「float」を使う人は多いと思います。初心者用の教材であるProgate(プロゲート)にも前半で「float」の紹介をしているので、これを使うものだと思い込んでしまうんですね。

ですが、floatを使うと他の要素との配置がうまくいかなくなり、デザインが総崩れしてしまう原因になります。

例えば、以下のような要素の配置を横並びにしたいとします。

CSS要素

ここで「float」を用いて横並びにしてみます。

すると、こうなります。

CSS要素

一見するとこれで良いと思われがちですが、よく見ると緑色の要素の親要素であるグレーの部分が消えてしまっていることに気づきます。

これがデザイン崩れの要因です。

なぜこうなるのかと言うと「float」はその名の通り「浮く」という動作となり、親要素(グレーの部分)から浮いてしまっているので子要素(緑色の部分)が存在しないとみなされてしまっているからです。

そのためグレー部分の高さがゼロになり見えなくなってしまったということ。

これを解決させるにはclearという別の処理をしなくてはならなくなり手間がかかるため、floatを使った配置調整はあまりおすすめできません。

【これでOK】Flexboxで簡単に配置問題を解決しよう

上記の問題を解決してくれるのがFlexboxです。

ProgateにもFlexbox編はあるのですが結構後半のため触れていない人も多いのではないでしょうか。Flexboxの基本的な使い方はとても簡単。

親要素に「display: flex;」を加えるだけで横並びに配置可能

見出しの通り、親の要素のスタイルに「display: flex;」を加えるだけでblock要素であっても横並びの配置が可能です。

CSS要素

非常に簡単ですね。

しっかりと親要素であるグレーの部分も残っているのが分かります。あとは位置の微調整をしていくだけ。

さらに「justify-content」で位置を調整しよう

要素を横並びに配置したあとは「justify-content」を設定して位置を調整します。例えば、

justify-content: center;

とすれば全体が中央に移動します。

CSS要素

左に揃えたいのであれば、

justify-content: flex-start;

CSS要素

 

右に揃えたいのであれば、

justify-content: flex-end;

CSS要素

このように、Flexboxを使うことでfloatよりも非常に簡単に要素の位置を設定することが可能です。

基本はこれでOKですが、次からもう少し細かい位置調整の方法を見ていきましょう。

要素の間に間隔をもたせて横並びに配置する方法

これまでは要素1と要素2がくっついた状態での配置でしたが、Flexboxでは間隔をおいた配置も可能です。

こんな感じですね。

CSS要素

やり方を解説します。

記述するCSSは簡単で「justify-content」の設定を変えるだけ。

justify-content: space-between;

これで余ったスペースが真ん中に移動し、子要素を両端に配置することができます。

3つ以上の要素にも対応可能

これまで2つの子要素で解説をしてきましたが、3つ以上の子要素を用意しても自在に横並び配置が可能です。

CSS要素

※要素間に間隔を持たせる場合は、各子要素の横幅の合計を100%以下としてください

【レベルアップ】複数の子要素を折り返して等間隔に配置する方法

ここからは少しだけレベルアップをして、複数の要素を折り返して表示させる方法を考えていきましょう。

こんな感じを目指します。

CSS要素

 

これまで通り「display: flex;」を設定するだけでは折り返されず、全てが横一列に表示されてしまうはずです。

そこで折り返すためのCSSを書き加えましょう。

flex-wrap: wrap;

これを親要素のCSSに加えることで、子要素の横幅が親要素の100%を超える場合に折り返して表示されるようになります。

目標通りの配置になりました。

CSS要素

子要素それぞれの横幅を親要素の48%に設定していますので、両端に2%ずつの余白を残し折り返し、3つ目と4つ目の子要素は下に表示されます。

もし3つの要素で折り返したければ、各子要素の横幅を33%以下で設定すればOK。

CSS要素

そのほか細かい部分は実際にCSSをいじってみて、Flexboxの扱い方になれていきましょう!

【まとめ】要素の配置は「Flexbox」を利用すべし!

今回は複数の要素をCSSで自由に横並べにする方法を解説してきました。

Flexboxを使うことで、floatのような面倒臭さやデザイン崩れがなくなりストレスなくカスタマイズできるようになりますのでぜひ覚えておくことをおすすめします!

Flexboxのポイント

  • 親要素に「display: flex;」で横並びが可能
  • justify-contentで位置調整ができる

floatでの要素配置に苦戦していた方は、今日からFlexboxをマスターしてストレスなく作業をすすめていきましょう!