HTMLとCSSで横並びレイアウトの表示方法を現役エンジニアが解説【初心者向け】

今回はHTMLとCSSを使用して横並びレイアウトの表示をする方法を、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

 

活用場面

Webサイトのカラムやグローバルナビゲーションなどのメニューには、横並びのレイアウトが活用されています。Webの黎明期には、テーブルコーディングと呼ばれる手法で、おもにtableタグだけで横並びのレイアウトが実現されていました。

しかし、ブラウザの技術がCSS2.1規格に対応してからは、displayとfloatを用いた横並びのレイアウトが確立しました。一般的によく見かけるWebサイトのレイアウトは、CSSのプロパティであるdisplayとfloatを用いた手法で構築できます。

 

displayの使い方

HTMLのタグは、おもに要素のモデル(型)として「ブロックレベル要素」と「インライン要素」に分かれています。

HTML

<div>
  <p>テキスト0番</p>
  <p>テキスト1番</p>
  <p>テキスト2番</p>
  <p>テキスト3番</p>
  <p>テキスト4番</p>
</div>

プレビュー

divタグの内部に、pタグが0番から4番までの合計5個あります。これらのタグは、「ブロックレベル要素」です。CSSで装飾を行う場合、ブラウザで縦並びとして表示され、幅と高さや余白などを柔軟に設定できます。

一方の「インライン要素」は横並びに表示されるもので、幅と高さや余白などの適応に制限があります。この「ブロックレベル要素」を以下のようにCSSの記述にすると、「インライン要素」として横並びにし、幅と高さや余白などの設定を「ブロックレベル要素」と同様に操作することが可能です。

CSS

div p {

  display: inline-block;

}

プレビュー

また、先ほどの「ブロックレベル要素」のタグを「インライン要素」に変更することもできます。

CSS

div p {

  display: inline;
 }

プレビュー

上記の「ブロックレベル要素」のタグを「インライン要素」に変更する、単純に「インライン要素」のタグを記述した場合の表示は同じです。

HTML

<div>
  <span>テキスト0番</span>
  <span>テキスト1番</span>
  <span>テキスト2番</span>
  <span>テキスト3番</span>
  <span>テキスト4番</span>
</div>

プレビュー

 

[PR] Webデザインで副業する学習方法を動画で公開中

floatの使い方

前述のdisplay: inline-blockの手法は、各種の古いブラウザでは表示の結果が異なってしまうため、古いブラウザの表示の結果では、floatで横並びが実現されています。このfloatには、値としてleftもしくはrightを指定することで、「ブロックレベル要素」を指定方向に寄せてから後述の要素を回り込ませることが可能です。

HTML

<main>
  <div class="left-column">左カラム</div>
  <div class="right-column">右カラム</div>
</main>

CSS

main div {
  margin: 0; /* 要素の外側の余白を0に定義 */
  padding: 0; /* 要素の内側の余白を0に定義 */
}


.left-column {

  float: left;

  width: 50%; /* 要素の幅を50%に定義 */
  background-color: #aaa; /* 視覚化のための背景色 */

}

.right-column {

  float: right;

  width: 50%; /* 要素の幅を50%に定義 */

  background-color: #ddd; /* 視覚化のための背景色 */

}

プレビュー

floatを使用すると、「後述の要素を回り込ませる」結果になるため、後述に回り込ませたくない要素がある場合は、表示の結果は不具合や表示崩れが発生します。そのため、意図していない回り込みを解除するために、後述の要素に回り込みを解除させる制御を加えましょう。

表示崩れ例

HTML

<main>
  <div class="left-column">左カラム</div>

  <div class="right-column">右カラム</div>

  <p class="clear">後述にタグの定義があっても、意図しない回り込みは解除しました。</p>
</main>

CSS

.clear {

  clear: both;
  background-color: #fefe; /* 視覚化のための背景色 */

}

.left-column {

  float: left;

  width: 45%; /* 要素の幅を50%に定義 */
  background-color: #aaa; /* 視覚化のための背景色 */

}

.right-column {

  float: right;

  width: 45%; /* 要素の幅を50%に定義 */

  background-color: #ddd; /* 視覚化のための背景色 */

}

プレビュー

上記の解決策は、floatを使用した場合の基本です。しかし、ソースコードの判読に苦しむため、以下の通りの簡素な解決策(clearfix)が開発されて主流となっています。

clearfixを使った解決の方法を以下のコードを見ながら理解していきましょう。

HTML

<main class="clearfix">
  <div class="left-column">左カラム</div>

  <div class="right-column">右カラム</div>

</main>

CSS

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}


.left-column {

  float: left;

  width: 50%; /* 要素の幅を50%に定義 */
  background-color: #aaa; /* 視覚化のための背景色 */

}

.right-column {

  float: right;

  width: 50%; /* 要素の幅を50%に定義 */

  background-color: #ddd; /* 視覚化のための背景色 */
}

プレビュー

このclearfixのクラスをfloatを使用した要素から辿って親要素に設定しましょう。clearfixは、clearのクラスを設定したpタグと同様の役割を実現します。前述の通り、floatの使い方は、おもにカラムのレイアウトの構築に使用されているものの、floatによるデザインの意図は、画像とテキストの横並びの実現にあります。

HTML

<div class="clearfix">

  <img src="https://assets.techacademy.jp/assets/training-ill-htmlcss1-f497bd49d658e037659ca860ef7f525be22522da6e9cf24bb4de19b4cac758bf.png" alt="sample">

  <p>説明文です。説明文です。説明文です。説明文です。説明文です。説明文です。説明文です。説明文です。説明文です。説明文です。説明文です。説明文です。説明文です。</p>

</div>

CSS

.clearfix::after {

  content:"";

  display:block;

  clear:both;

}

div img {
  float: left;
}

div p {

  background-color: #fefe; /* 視覚化のための背景色 */
}

プレビュー

floatを使用した場合の欠点は、横並びの要素の高さを柔軟に揃えられないことです。

 

CSS3で追加されたflexboxを使おう

最新のブラウザの技術がCSS2.1からCSS3に対応してから、従来のfloatを使用する手法よりも、その欠点を補って横並びが実現しやすい手法としてflexboxが登場しました。これは、最新のブラウザでカラムのレイアウトや全体のレイアウトを整えるための手法です。

HTML

<main>
  <div>ボックス0番</div>

  <div>ボックス1番</div>

  <div>ボックス2番</div>

  <div>ボックス3番</div>

  <div>ボックス4番</div>

</main>

CSS

main {
  display: flex;
}

プレビュー

display: flex;を指定した親要素の直下の子要素は、いっせいに横並びになります。上記のサンプルコードでは、「ボックス0番」から「ボックス4番」の合計5個の要素が横並びになります。単純に、display: flex;だけの指定では、子要素の幅は、子要素の内容の長さによって変動してしまいます。

HTML

<main>
  <div>ボックス0番</div>

  <div style="background-color: #fefe;">文章などの内容が増えますと、ボックス1番が最も長くなります。</div>

  <div>ボックス2番</div>

  <div>ボックス3番</div>

  <div>ボックス4番</div>

</main>

CSS

main {
  display: flex;
}

プレビュー

この特性は、Webサイトのレイアウトをデザインする上では扱いづらいといえるでしょう。幅の値を定めるためのオプション(flex-wrap: wrap;)を追加することで幅の固定化が可能です。

HTML

<main>
  <div>ボックス0番</div>

  <div style="background-color: #fefe;">文章などの内容が増えても、ボックス1番の幅も一定になります。</div>

  <div>ボックス2番</div>

  <div>ボックス3番</div>

  <div>ボックス4番</div>

</main>

CSS

main {
  display: flex;
  flex-wrap: wrap;
}

main div {
  width: 20%;
}

プレビュー

上記のオプション(flex-wrap: wrap;)を追加しなければ、厳密な幅の定義が有効にならず、適応されません。しかし、柔軟性のある幅の比率としては定めることが可能です。

HTML

<main>
  <div class="flex1">ボックス0番の幅の比：1</div>

  <div class="flex1">ボックス1番の幅の比：1</div>

<div class="flex6" style="background-color: #fefe;">ボックス2番の幅の比：6</div>

  <div class="flex1">ボックス3番の幅の比：1</div>

  <div class="flex1">ボックス4番の幅の比：1</div>

</main>

CSS

main {
  display: flex;
  width: 1000px; /* 例としての幅の定義 */
}

main .flex1 {
  flex: 1;
}

main .flex6 {
  flex: 6;
}

プレビュー

上記では、mainタグの幅をわかりやすく1000pxに固定しています。mainタグの直下の子要素であるdivタグは、それぞれのクラスのflexの数値が幅の比率として割り当てられます。「ボックス0番」「ボックス1番」「ボックス3番」「ボックス4番」の要素の幅は、それぞれ100pxになります。そして、「ボックス2番」の要素の幅だけは、600pxになります。

この例の他にも、様々なオプションの設定を組み合わせれるのがflexboxです。組み合わせ次第では無数となるため、参考に留めておきましょう。全てを網羅しようとはせずに、目的に見合った使用を試してみてください。

 

監修してくれたメンター

井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

 

HTML・CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTML・CSSを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！