陽介CSSで要素を横並びにする方法(floatとdisplayの使い方を解説)ツイート19シェアはてブ14Pocket56「要素を横並びに配置したいんだけど、レイアウトが崩れてしまう。「floatだけだと、使い勝手が悪い。他に横並びの方法はないのだろうか。」Webデザインを学んでいると、要素を横並びにする場面が出てきます。spanタグやaタグなどのインライン要素は、自動的に横並びになるのですが、ブロック要素は、自動的に改行が入り、上から下へブロックが連なります。この場合は、CSSでプロパティを指定して、横並びを支持しなければなりませんが、そのやり方は情報が整理されていないと、理解しづらいものです。そこで、ここでは『これを読めば「横並び」は大丈夫』という情報を提供します。初学者向けの記事ですので、経験者には物足りないかもしれません。「横並び」はよく使うといいますが、具体的にはどのような場面を考えますか?例えば、以下のような場面を想定してください。navbarナビゲーションバー(navbar)は要素が横並びになっていますね。画像の横並びもよく見ることでしょう。画像の中や下に説明があったりするケースがほとんどです。サイドバーも横並びの一つですね。このように、いくつもの場面で要素を横並びにすることが行われています。そこでフロントエンドのエンジニアにとってこのスキルを身につけることは必須と言っても過言ではありません。ブロック要素とインライン要素まず、「横並び」そのものを学習する前に、「ブロック要素」と「インライン要素」というものに簡単に触れましょう。「hタグ」、「pタグ」、「divタグ」は、幾つかの要素を内に含むブロックを作る特徴があり、このブロックは上から下へと表示されます。これは、その特徴として自動的に改行が入るためです。それに対して、「spanタグ」、「iputタグ」、「imgタグ」、「aタグ」は「インライン要素」と呼ばれます。これは、内に他の要素を含むケースは少なく、ほとんどのケースでブロック要素の中で使われます。幅と高さをCSSで指定することもできません。左右のpaddingとmarginは指定できますが、縦方向のそれは指定できないという特徴も同時に覚えておいてください。実は、このインライン要素は、上から下へと表示されず、「br」で改行を指定しない限り、自動的に横へ表示される特徴があります。従って、「imgタグ」をそのまま書けば、自動的に「横並び」にはなるのです。インライン要素だけで使うケースは稀でしょう。インライン要素はほとんどの場合、ブロック要素の中で表示されます。文字や画像を一つのブロックとして括り、高さや幅をしてできる方が便利だからです。そこで、以下ではブロック要素を横並びにする方法でよく使うものを2つ説明します。横並びにできるCSSプロパティのまとめ要素の横並びの方法を一つ一つ説明する前に、まず以下の表をみてください。これだけ知っておけばまずは良いでしょう。要素を左に寄せ、後続のボックスを右に横に回りこませる効果を出すことができます。both;」などで規制をかけないと、デザインが崩れます。要素を右に寄せ、後続のボックスを左に回りこませる効果を出すことができます。both;」などで規制をかけないと、デザインが崩れます。要素がインライン要素化され、横に並びます。インライン要素になることが特徴です。そのため、高さや幅の指定ができません。左右のmargin/paddingの指定はできますが、上下のmargin指定はできません。横並びの際には、インライン要素とブロック要素の両方の要素を兼ね備えた働きをします。インライン要素のようにブロック要素を横並びにし、かつ、ブロック要素と同じように高さや上下マージンの指定ができる便利な値です。内側の要素が他と均一ではなく、大きかったりする場合は横並びにならない場合もあり、不都合が生じます。要素を「table」の「td」として扱ってる結果、横並びになります。指定した要素を横に均等に配置できるメリットがあり、また、table機能のため要素の縦中央配置の「vertivcal-align」の設定が可能になります。flex」を設定するだけで、子要素が横並びになります。この「flex」には一緒に使って非常に便利な機能が備わっており、要素の縦横逆配置や折り返し、一定のスペースを付与したりする効果、など様々な機能が充実しています。それほど難しい機能ではないため、初学者であっても、一度、練習で挙動を確認しておくことをお勧めします。主な特徴を頭に入れたことで、早速、その挙動をそれぞれ見ていきましょう。floatの使い方まず、以下のようなHTMLを設定してしてみましょう。「liタグ」はブロック要素です。従って、上から下へ配置されるのが本来の姿です。<li>要素_4</li></ul>以下のように表示されます。このブロック要素を横並びにするために、CSSの「floatプロパティ」を利用します。CSSを以下のように設定します。left;}すると、「liタグ」は横並びになります。横並びになっただけで、デザインはその後整えることになります。これはブロック要素なので、幅や高さの設定ができます。以下のように追加のプロパティを設置します。30px;}すると、「liタグ」特有の点が消えました。none;」の効果です。margin設定により、幅も広がっています。今回は、「left」を設定してましたが、floatプロパティの値には「right」もありますが、同様の結果となります。floatの影響の解除floatはブロック要素の横並びには非常に便利なのですが、横並びにしたくない要素まで影響を受けてしまいます。以下のような場合です。floatの影響を受けたくない。</div>以下のように、「liタグ」だけ横並びにしたいのですが、「pタグ」が一緒に横並びになっています。これは望んでいません。both;」を「影響を受けたくないブロック要素」に設定します。both;}すると、以下のように表示されます。追加で調整の必要はありますが、回り込みは防ぐことができました。「displayプロパティ」は、いろいろな使い方があります。今回は4つの使い方を簡単に説明しますが、4つも理解するのが面倒という方は、まず、使いやすく、便利な「inline-block」と「table-cell」の使い方だけは理解するようにしてください。inline;」はブロック要素であっても、インライン要素化する効果があります。その結果、横並びが実現するわけですが、代わりにブロック要素の特徴である、幅や高さの指定ができなくなります。inline;」を設定します。inline;}結果は、以下の通りです。横並び自体は問題なく実現しています。これに幅や高さを指定しましょう。50px;}全く結果は変わらないことに気づきます。ブロック要素がインライン要素化されているため、幅や高さが効かなくなりました。従って、この値をとる場面はイラストの配置など、限られるでしょう。inline-block;」は、ブロック要素の特徴を残しつつ、インライン要素の特徴も取り込んだ非常に便利な値で、使用頻度も高いでしょう。inline-block;」を設定します。inline-block;}結果は、以下のように表示されます。inline;」の場合と変わりません。これに高さと幅を指定してみましょう。50px;}以下のように表示されます。検証ツールを使って、高さと幅の設定の前後を確認してみましょう。inline-block;」は、sidebarなど柔軟に高さと幅を指定したい時などに非常に便利です。table-cellの使い方これは、ブロック要素(ここでは「liタグ」)をテーブルの「td」として扱うため、tableの「行」と同じように横並びになります。「displayプロパティ」を設定せず、以下を表示させましょう。挙動を理解しやすくするため、これまでのHTMLコードから変えています。box_3</div>上記HTMLコードに以下のようにCSSを設定します。green;}以下のように表示されます。inline-block」を設定してみます。middle;」も設定しましょう。green;}その結果、以下のように表示されます。要素間にわずかな隙間が生まれているのがわかるでしょうか。実は、「inline-block」では、要素間を自動的に調整し、隙間をとった配置を行っているのです。middle;」は効いていません。次に、「table-cell」を設定します。「inline-block」とは違う特徴が見て取れます。middle;」が効いており、文字が縦方向中央にきたことです。次に、CSSに「margin」と「padding」を設定してみましょう。20px;}以下のように表示されます。すると、「padding」が効いているため、ボックスのサイズが大きくなりましたが、ボックスの隙間には変化がありません。「margin」は効いていないのです。「table-cell」は、「padding」は効きますが、「margin」は効きません。この特徴を利用して、navbarなどの作成には非常に便利です。最後に「flex」ですが、非常に使い方が多様ですので、幾つかの値のみ説明します。学習したい方は調べてみてください。以下のようなHTMLを書いてみます。便宜上要素を増やしています。#aa4c8f;}表示は以下のようになります。要素が縦に並んでいることがわかります。flex;」を設定します。これを使うメリットは、親要素への設定だけでいろいろな効果が出せるという点です。flex;}すると、以下のように要素が横並びになりました。次に、同じ親要素に「flex-directionプロパティ」というものを設定します。「flex」とセットで使ってください。flex;flex-direction:row-reverse;}すると、以下のように要素が右に寄り、かつ、要素が逆に配置されていることがわかります。wrap;」というものを設定してみます。表示されたら画面を縮小させてみてください。wrap;}すると、画面の縮小に応じて、ボックスが下に回り込んできたことがわかります。nowrap;」という値も用意されています。center;」を設定してください。center;}すると、要素が両端均等の幅をもって中心に配置されました。flex-end;」を設定します。flex;」には、一緒に使用すると便利なプロパティと値が用意されており、組み合わせて使えば、非常に効果的なサイトになります。試してみたい方は、「flex-direction」、「justify-content」、「align-items」というプロパティが用意されていますので、それぞれの値を変えつつ、挙動を確認してください。felxについては「【CSS】Flexboxの使い方を徹底解説!基本から実践まで(サンプルあり)」でも詳しく説明しています。まとめ「横並び」と聞くと、真っ先に思い浮かぶのが「float」です。これは必ず使い方をマスターする必要がありますが、ここで見てきたとおり、「float」以外にも様々なプロパティがあることがわかりました。「display」プロパティには、様々な値がとれ、それぞれに特徴をつかんでおけば、非常に効果的なサイトの作成ができます。flex;」は比較的新しい機能で、使い方も幅広いので、面倒と思う方は、まずこれ以外を使いこなせるようにしてください。おすすめ記事【無料あり】本気でオススメしたいプログラミングスクール3つ【実際に受講した】おすすめ記事IT業界に強い転職サイト・転職エージェントのオススメはココ!【比較ランキング】この記事が気に入ったらいいねしよう!最新記事をお届けします。陽介ベトナムで起業し、HR関連のコンサルティング業務をやっています。日本を離れて8年が経ちますが、日本ではあり得ないハプニングを楽しんでいます。RailsでWebサービスを作っています。