1. ホーム
  2. ホームページの作り方
  3. CSS
  4. CSSで要素を横並びにする方法！floatプロパティとdisplayプロパティで実装
  • 最終更新日
  • CSS

CSSで要素を横並びにする方法！floatプロパティとdisplayプロパティで実装

ホームページを作っていると頻繁に要素を横並びにする事があります。チェピレアでしたら上部のロゴとメニューも横並びですね。

横並びにする方法はいくつかあるのでご自身が使いやすいものを選んでください。僕がWebを勉強しだした頃は「float」プロパティばっかり使ってました。

が、今では「display:inline-block」で横並びにする方法に落ち着きました。それぞれ使いやすい点・使いにくい点があるのでCSSの記述と併せて見ていきましょう。

目次 [閉じる]

基本となるHTMLの確認

まずは共通となるHTMLを確認していきましょう。

index.html

            
    
                
  1. <!DOCTYPE html>
    2. 
                
  2. <html>
    3. 
                
  3. <head>
    4. 
                
  4. <meta charset="UTF-8">
    5. 
                
  5. <title>要素を横並びにする方法</title>
    6. 
                
  6. <style>
    7. 
                
  7. * {
    8. 
                
  8.   margin: 0;
    9. 
                
  9.   padding: 0;
    10. 
                
  10.   box-sizing: border-box
    11. 
                
  11. }
    12. 
                
  12.  
    13. 
                
  13. html {
    14. 
                
  14.   font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
    15. 
                
  15.   font-size: 62.5%;
    16. 
                
  16.   letter-spacing: 0.09em;
    17. 
                
  17.   font-feature-settings: "palt"
    18. 
                
  18. }
    19. 
                
  19.  
    20. 
                
  20. li {
    21. 
                
  21.   width: 80px;
    22. 
                
  22.   color: #fff;
    23. 
                
  23.   line-height: 80px;
    24. 
                
  24.   text-align: center
    25. 
                
  25. }
    26. 
                
  26.  
    27. 
                
  27. li:nth-child(1) {
    28. 
                
  28.   background: #c72222
    29. 
                
  29. }
    30. 
                
  30.  
    31. 
                
  31. li:nth-child(2) {
    32. 
                
  32.   background: #22c722
    33. 
                
  33. }
    34. 
                
  34.  
    35. 
                
  35. li:nth-child(3) {
    36. 
                
  36.   background: #2222c7
    37. 
                
  37. }
    38. 
                
  38. </style>
    39. 
                
  39. </head>
    40. 
                
  40. <body>
    41. 
                
  41.   <ul>
    42. 
                
  42.     <li>要素A</li>
    43. 
                
  43.     <li>要素B</li>
    44. 
                
  44.     <li>要素C</li>
    45. 
                
  45.   </ul>
    46. 
                
  46. </body>
    47. 
                
  47. </html>
    48.

何も設定していないデフォルトの状態ですと横並びではなく、要素は下へ縦並びになります。

HTMLで記述されたすべての要素はCSSでデザインを調節していないと左上から下に並ぶように表示されるんです。これは文章でも画像でも同じように表示されます。

  • 要素A
  • 要素B
  • 要素C

はい、こんなカンジですね。わかりやすいように要素に別々の背景色を付けてみました。それでは次の項からはこのHTMLにCSSを追加して横並びの形にしていきます。

floatプロパティで横並び

ひとつ目は「float」プロパティを使って横並びにしていきます。

今回、横並びにしたい要素は「li」なので、liタグにfloatの設定をおこないます。floatの設定をおこなうと要素に「回り込み」という効果を与えます。

            
    
                
  1. ul::after {
    2. 
                
  2.   content: '';
    3. 
                
  3.   display: block;
    4. 
                
  4.   clear: both
    5. 
                
  5. }
    6. 
                
  6.  
    7. 
                
  7. li {
    8. 
                
  8.   float: left
    9. 
                
  9. }
    10.

横並びの表示をするだけならfloatだけで良いんですが、このままだと表示が崩れてしまいます。floatは日本語で「浮く」という意味なんですが、floatを使う事によって高さが「0」になってしまうんです。

高さが「0」になるとその下の要素がfloatした要素に重なったりしますので、この状態を回避するために「clear: both」の設定も同時におこないます。サンプルでは表示崩れをお見せできないのでご自身で設置する時に「clear: both」無しの状態もご確認ください。

  • 要素A
  • 要素B
  • 要素C

「float:left」の指定をすると左詰めに並びます。要素を横並びにする時は基本的に左詰めにするかと思いますが、場合によっては右詰めにする事もありますのでそちらも確認しておきます。

  • 要素A
  • 要素B
  • 要素C

こちらが右詰めの状態です。「float:right」の指定をすると右詰めに並べる事ができます。まぁ、単体で右詰めにはあまりしないです。左部分に変な余白が空くと気持ち悪いですしね。

ということで「float」で横並びにする時は「clear: both」の設定も忘れないでください。

inline-blockで横並び

ふたつ目はdisplayプロパティの「inline-block」を使って横並びにする方法です。

こちらはfloatのようなデザイン崩れは起きないですが、「inline-block」以外に「font-size」の設定も必要となってきます。

            
    
                
  1. ul {
    2. 
                
  2.   font-size: 0
    3. 
                
  3. }
    4. 
                
  4.  
    5. 
                
  5. li {
    6. 
                
  6.   font-size: 1.7rem;
    7. 
                
  7.   display: inline-block
    8. 
                
  8. }
    9.

なぜ「font-size」の設定をしなければいけないの？という点なんですが、まずは「inline-block」の設定をするliの親要素である「ul」に何も設定しない状態を見て頂きます。

「font-size:0」を設定しない場合

  • 要素A
  • 要素B
  • 要素C

するとこのように要素と要素の間に隙間ができてしまいます。この状態を避けるために「font-size」の設定が必要になってきます。

「font-size:0」を設定した場合

  • 要素A
  • 要素B
  • 要素C

はい、今度は「font-size」の設定をしましたので要素と要素の間に隙間がなくなりましたね。

これはHTMLで記述した際に「inline-block」を設定しているliタグを改行しているために起こります。それならば改行しなければ隙間はできないのか？その通り！改行しなければ隙間が空く事はありません。

            
    
                
  1. <ul>
    2. 
                
  2.   <li>要素A</li><li>要素B</li><li>要素C</li>
    3. 
                
  3. </ul>
    4.

上記のようにliタグを改行しないで記述してやればulタグに「font-size」の設定をする事もなく横並びにする事ができます。

ただこの形で記述すると2つや3つの横並びなら良いですが、数が多くなった時にヒジョ～に見にくい！HTMLがごちゃごちゃしてしまうんで僕は「font-size」を設定する方法をおこなっています。

これも好みやご自身の操作しやすい方法を選んで頂ければと思います。コレにしなければいけない、というルールなんて無いので設定しやすい方法でOKです。

「inline-block」を使う場合は、指定する要素を改行しないで記述するか、指定する要素の親要素に「font-size;0」の設定を追加する。

table-cellで横並び

みっつ目も同じくdisplayプロパティを使います。「table-cell」の値を使って横並びにする方法です。

この方法で横並びにするのはめちゃめちゃ簡単です。「table-cell」の設定をするだけなので「float」や「inline-block」などのように他の設定を付け加える必要がありません。

            
    
                
  1. li {
    2. 
                
  2.   display: table-cell
    3. 
                
  3. }
    4.

コレだけでOKです。簡単なら「table-cell」を使ったら良いやん！って思われるでしょうが、コレはコレでなかなか厄介な性質を持っています。

  • 要素A
  • 要素B
  • 要素C

横並びになりましたね。今は要素が3つのサンプルなので特に問題はありませんが、要素の数が多かったりレスポンシブ対応する時には設定が面倒になってきます。

「table-cell」という名称でピンと来るかと思いますが、この設定をすると「table」タグと同じような要素になってしまうんです。

なので「table-cell」を使うと、「float」や「inline-block」では可能な「margin」の指定と要素の折り返しができません。

なかなか上手くいきませんね（笑）。記述するプロパティは「table-cell」の設定だけですごくシンプルなんですが、他の調整もろもろにやたらと手間取ってしまいます。

「table-cell」は用途によって使う程度でも良いかと思います。中にはこの方法が合ってるという方もおられるでしょうし、ご自身で一度試してもらえたらと思います。

flexで横並び

最後のよっつ目もdisplayプロパティで今度は「flex」を使って横並びにする方法です。

この方法は「table-cell」と同じで設定が簡単です。今後は「flex」を使って横並びにするのが主流になってくるんじゃないでしょうか。

            
    
                
  1. ul {
    2. 
                
  2.   display: flex
    3. 
                
  3. }
    4.

記述も簡単です。ひとつ注意する点としては今までは横並びにする要素自体に設定をしていましたが、その親要素に設定をしてやるという事です。

  • 要素A
  • 要素B
  • 要素C

「flex」の場合は「margin」の指定も可能です。このままでは折り返しはできないですが「flexの追加設定（おまけ）」で紹介するプロパティを追加してやれば折り返しが可能になります。

それならなぜ僕は「flex」を使っていないかというと、「flex」がすべてのブラウザに対応していないからです。

便利なプロパティが出てくるのは嬉しいんですけど、それが浸透するには時間がかかるもんです。この記事を書いている時点でもうほぼほぼどのブラウザでも対応してきていますので今後はノンストレスで「flex」が使えます。

flexの追加設定（おまけ）

「display:flex」を使う際にはそれに付随するプロパティを追加してやると表現できるコトが広がります。追加できるプロパティ一覧と値の効果をご紹介しますので試してみてください。

flex-direction
要素の並び順を指定します。

row
左から右へ並び順を指定します。

row-reverse
右から左へ並び順を指定します。

column
上から下へ並び順を指定します。

column-reverse
下から上へ並び順を指定します。

flex-wrap
要素の折り返しを指定します。

nowrap
折り返し無しを指定します。

wrap
上から下への折り返しを指定します。

wrap-reverse
下から上への折り返しを指定します。

flex-flow
要素の並び順と折り返しを指定します。
justify-content
要素の水平方向の位置を指定します。

flex-start
左揃えを指定します。

flex-end
右揃えを指定します。

center
中央揃えを指定します。

space-between
両端の要素は余白を入れずにその他の要素は均等間隔で配置します。

space-around
すべての要素を均等間隔で配置します。

align-items
要素の垂直方向の位置を指定します。

stretch
flexboxの高さに合わせて要素の高さも拡張します。

flex-start
上揃えを指定します。

flex-end
下揃えを指定します。

center
中央揃えを指定します。

baseline
ベースライン揃えを指定します。

align-content
要素のクロス軸方向の位置を指定します。

stretch
flexboxの高さに合わせて要素の高さも拡張します。

flex-start
上揃えを指定します。

flex-end
下揃えを指定します。

center
中央揃えを指定します。

space-between
上端・下端の要素は余白を入れずにその他の要素は均等間隔で配置します。

space-around
すべての要素を均等間隔で配置します。

「flex」を使うのであればこの辺の設定もおこなう必要が出てきますので、少しずつ覚えてみてください。まぁ、今はまだ対応していないブラウザもあるので完全に対応してからでも遅くはないですかね。

記述方法やサンプルなども紹介していますので「CSSのflexを使ったサンプルをご紹介！Flexboxで実現できるレイアウトを確認」も見てみてください。

こちらも見てください

ブラウザ上でデザインを調整する方法と気になるサイトのソースコードの見方 CSSのflexを使ったサンプルをご紹介！Flexboxで実現できるレイアウトを確認

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記