(HTML,CSS)CSSのfloatとclearで簡単に段組レイアウトを作る方法HTML+CSSで段組レイアウトを作る簡単な方法を解説。各段をdiv要素などのボックスで作るだけのシンプルなHTMLに、CSSのfloatとclearプロパティを適用するだけで段組レイアウトが作れます。HTMLとCSSをどう書けば段組になるのかの基本から、2段組や3段組の作り方、回り込み解除の便利な書き方(clearfix)まで、図とサンプルソースを使って説明しています。文章や画像を含む複数のコンテンツを横方向に並べたい場合や、メインコンテンツの横にサイドバーとしてメニューを掲載したい場合などでは、ウェブページの中に段組レイアウトを作る必要があります。段組レイアウトには、左右の端にサイドバーを配置して残りの空間にメインコンテンツを掲載するようなシンプルな段組もあれば、新聞紙面のように異なるサイズのボックスが多段に入り交じった複雑な段組まで様々です。■CSS普及前まではtable要素を駆使して段組を作るテーブルレイアウトが使われていた昔はHTMLのtable要素を駆使して段組レイアウトを作っていた2000年代初頭あたりまでは、表を作るためのHTMLであるtable要素を駆使して段組を作る「テーブルレイアウト」が一般的でした。CSS(スタイルシート)をうまく表示できるブラウザが少なかったので、他に実用的な方法がなかったからです。この方法は今でも使おうと思えば使えます。table要素は表を作るための要素ですから、段組などのレイアウトを作成する目的で活用するのは好ましくありません。■CSSを活用して段組レイアウトを作る簡単な方法が今ではたくさんある段組レイアウトはCSSで作る今では、段組レイアウトはCSSを活用して作るのが一般的です。その方法は1つではなく、たくさんあります。CSSのfloatプロパティを使ってボックスを横並びにすることで段組に見せるシンプルな方法、CSS版テーブルレイアウトとも言えるtable-cellを使って段組に見せる方法、各段の表示順序までも自在に調整できるflexを使って段組を作る方法、長い文章を自動で段組化できるcolumnsプロパティを使う方法など様々です。本記事では、CSSを使って段組レイアウトを作る際の基本中の基本として、シンプルな段組レイアウトをfloatプロパティで作る方法をご紹介いたします。それ以外の方法についても、本記事の最後にまとめて紹介します。便利技:段組レイアウトを解除するclearfix複雑な段組レイアウトでも楽に作成できる方法4選HTML+CSSで段組レイアウトを作る基本中の基本HTML+CSSで段組レイアウトを作る方法の基本HTMLにCSSを適用して段組レイアウトを作るには、HTMLで用意した複数のボックスの配置をCSSで調節することで、段が組まれているように見せる方法を使います。具体的なソースを解説する前に、大まかなイメージを紹介しておきます。■シンプルなHTMLまずは下記のHTMLソースをご覧下さい。div要素で作成したボックスが2つ並んでいるだけのシンプルなHTMLです。コンテンツB</div>■そのまま表示させると、ボックスが縦方向に並ぶだけ上記のHTMLソースをブラウザに表示させると、下図のような感じに見えます。HTMLソースに記述した順序で「コンテンツA」→「コンテンツB」のように縦方向に並ぶだけです。■ボックスを横並びにすれば段組レイアウトになるこの2つのボックス「コンテンツA」・「コンテンツB」を、下図のように横方向に並べられれば2段組になります。上記がHTML+CSSで作る段組の大まかなイメージです。HTMLソース側には特別な工夫はせず、CSSを使ってボックスを横方向に並べることで段組レイアウトを作ります。段組レイアウトを作るためにも使えるCSSのfloatプロパティについて、仕様を簡単にご紹介しておきます。段組を作るためにあるわけではなく、指定の要素を左右へ配置して後続の要素を回り込ませるためのプロパティです。left;」というスタイルを指定すると、「コンテンツAを左端に配置して、続く内容を右側に回り込ませる」という指定になります。大まかに図示すると、次のようなイメージです。このようにボックスを装飾すれば、2段組のレイアウトが作れます。同様の手順で3段組以上の構造も作れます。この方法で段組レイアウトを作った場合には、段組の解除(=回り込みの解除)が最後に必要です。その方法は、後でご紹介いたします。CSSのfloatプロパティで2段組レイアウトを作る方法それでは、CSSを使って段組レイアウトを作る具体的な記述方法を解説いたします。2つのボックスを段組に見えるよう横並びに配置する書き方を使って、シンプルな2段組を作る方法から説明します。■2段組レイアウトを作成するHTML+CSSソースの記述例ここで使うHTMLソースは先程と同じで、以下の通りです。コンテンツB</div>これに、次のようなCSSソースを適用します。80%;}</style>上記のCSSソースでは、「コンテンツA」のボックス(=blockaクラスのdiv要素)の横幅を80%に制限した上で、floatプロパティを使って左端に寄せています。上記のHTMLソースとCSSソースを合わせると、ブラウザでの表示は下図のようになります。右側のボックス「コンテンツB」が残りの20%を占める(※下記の補足もご参照下さい)という段組レイアウトになりました。これは、例えば、メインコンテンツを左側に配置し、メニューを右側に配置するというようなページデザインに利用できるでしょう。ボックスの横幅を割合で指定しているので、リキッドレイアウト(=描画領域の幅に合わせてサイズが変化するレイアウト)になります。先の図で右側に見えているボックス「コンテンツB」の配置は、正確には右側の20%だけに表示されているわけではありません。ボックス自体はページの横幅全体に広がっているのですが、floatプロパティで左に寄せられたボックス「コンテンツA」の存在に押された結果として、右側の20%の空間だけに見えているのです。段に背景色を付加したり枠線を付加したりしたい場合には、上記の位置関係に気をつける必要があります。補足:段組の幅は、割合ではなくピクセル数でも指定可能floatプロパティを使って作る段組の場合、各段の横幅は「ボックスの横幅」として指定します。したがって、先ほどのCSSソースのようにパーセント記号を使って割合でも指定できますが、下記のように単位「px」を使ってピクセル数で指定することもできます。400px;}</style>この場合は、左側のボックス「コンテンツA」が400ピクセルの幅で表示されます。右側の「コンテンツB」は残りの空間全部に広がって表示されます。この場合、右側に回り込む空間がないほど狭いウインドウで閲覧された場合は、段組レイアウトにはなりません。次に、floatプロパティを使って3段組レイアウトを作る書き方をご紹介しておきます。基本的な考え方は2段組と同じですが、「どの段を可変幅にしたいか」によって書き方が異なります。ここでは3段組を作るサンプルを紹介しますが、レイアウトの考え方さえ分かれば4段組以上の構造でも簡単に作れます。先程ご紹介した「2段組の作り方」の考え方をそのまま使って3段組を作れば、最も右側の3段目が可変幅になります。■3段組を作るHTMLソース:HTMLソースは以下の通りです。2段組を作るHTMLソースの最後にdiv要素を1つ追記して「コンテンツC」を作るボックスを加えただけです。コンテンツC</div>■3段組を作るCSSソース:ここでは、1つ目のボックス「コンテンツA」と2つ目のボックス「コンテンツB」にfloatプロパティを指定して左側へ寄せています。68%;}</style>上記のHTML+CSSソースをブラウザで表示させると、下図のような感じの3段組になります。この場合、横幅をすべて割合(%)で指定していますので、ウインドウサイズに応じて各段の幅は変化します。3段組(b):左右の段はサイズを固定し、中央の段を可変幅にする段組3段組を作る場合は、中央の段にメインコンテンツを掲載するパターンが多いでしょう。段組レイアウトを構成する3段のうち、左端と右端の段は幅を固定しておき、中央の段を可変幅にしたい場合は、下記のように記述します。■中央段が可変幅の3段組を作るHTMLソース:HTMLソースでは、div要素で作るボックスを3つ並べているだけですが、記述順序がA→C→Bになっている点に注意して下さい。コンテンツB</div>■中央段が可変幅の3段組を作るCSSソース:CSSソースでは、1つ目のボックス「コンテンツA」をfloatで左端へ寄せ、2つ目のボックス「コンテンツC」をfloatで右端へ寄せています。150px;}</style>上記のHTML+CSSソースだと、両端の「コンテンツA」と「コンテンツC」の幅がそれぞれ150ピクセルに固定され、残りの空間である中央に「コンテンツB」が配置されます。3段組のうち、両端の段は固定幅で、中央の段だけが可変幅になります。上記では3段組を例にしましたが、この方法でdiv要素を増やせば何段組でも作成できます。clearプロパティを使って段組(回り込み)を解除する方法さて、これまでの解説で何段でも自由に段組レイアウトが作成できるようになりました。終わりではありません。段組レイアウトを使う際には、段組の直後で段組を解除する必要があります。しないと、後続のボックスの配置がずれてしまうためです。下図のような段組レイアウトを作りたい場合は、「ボックスC」の直前で段組を解除する必要があります。しないと、「ボックスBの高さ」が「ボックスAの高さ」よりも低かった場合に、「ボックスC」の内容が「ボックスA」の右側に回り込んでしまいます。段組の解除(正確には「回り込みの解除」)には、clearプロパティを使います。clearプロパティの仕様は、以下の通りです。指定しておけば、すべての回り込みを解除できます。書き方は簡単で、例えば次のように記述します。both;}</style>このスタイルを適用した要素の直前で、すべての回り込みが解除(=段組が解除)されます。先程の図のように、2段組の下に段組を解除したボックスを配置したい場合の記述例をご紹介しておきます。■HTMLソース:HTMLは、div要素を3つ並べているだけのシンプルなソースです。コンテンツC</div>■CSSソース:ここでは「コンテンツC」を作っているボックスの直前で段組を解除したいので、class名が「blockc」のdiv要素に対してclearプロパティを指定しています。both;}</style>上記のHTML+CSSソースを表示すると、次のようなレイアウトになります。便利技:段組レイアウトを解除するclearfix先程は、段組を解除した後の「コンテンツC」を作っているボックスに対してclearプロパティを指定しました。ウェブページの作り方によっては「コンテンツC」の位置にあるボックスに対してはCSSを指定できない場合もあります。そのような場合は、clearfixと呼ばれる種類のテクニックを使って、段組レイアウトを構成しているボックスに対して「自身の直後で段組を解除する」という装飾を加える方法もあります。この「自身の直後で回り込みを解除する」テクニックには多数ありますが、例えば以下のようなCSSソースが使えます。block;}「コンテンツB」を作るボックスに対してこのようにCSSを書いておけば、「コンテンツC」を作るボックスには何も指定しなくても、Bの終わりで段組が解除されます。最後に、段組レイアウトの別の作り方を4つほどご紹介しておきます。それぞれ異なる記事で解説していますので、本記事と併せてご参照下さい。■CSS3で追加された新しい書き方「flex」を使うと、柔軟に段組レイアウトが作れるCSSのflexプロパティで段組レイアウトを作るCSS3で追加されたflex(flexbox/フレキシブルボックス)という仕様を使えば、ボックスの表示順序を数値で自由自在に指定できます。フレキシブルボックスではボックスを横方向に並べることもできるので、段組レイアウトの作成にも応用できます。■CSS版テーブルレイアウトとも呼べる書き方で、表のように段組構造を作る方法もあるCSSでテーブルレイアウトのように配置が作れるCSSのdisplayプロパティには「table」や「table-cell」という値も指定可能です。これらの値を指定すると、特定の要素をテーブル(表組み)のように表示でき、段組レイアウトが簡単に作れます。■長い文章を自動的に段組化する専用のプロパティ「columns」もあるCSS3なら、本文の段組レイアウトが簡単に作れるCSS3には、段組レイアウトを作るための専用プロパティとしてcolumnsプロパティが追加されています。長い文章を自動的に段組化して表示できるため、HTMLの記述時点では「どこで段を区切るか?」を考えずに済みます。シンプルな段組レイアウトならとても簡単に作れるので便利です。■グリッドシステムを使って段組レイアウトが楽に作成できるフレームワーク「Bootstrap」Bootstrapでは12分割されたグリッド構造を元に、簡単に複雑な段組が作れるBootstrapというフレームワークをウェブサイトに組み込んで活用すると、段組レイアウトも簡単に作れます。フレームワークを構成するファイルを別途読み込む必要がありますし、デザインとコンテンツが分離しにくくなるデメリットはありますが、複雑な段組レイアウトでも手軽に作れるのは便利です。今回は、CSSを使って段組レイアウトを作成する基礎として、floatプロパティとclearプロパティの使い方をご紹介いたしました。段組レイアウトをCSSだけで作っておけば、ウェブページから内容とデザインを分離できます。その結果、横幅の狭い画面では段組を解除するなど、レスポンシブWebデザインにも活用しやすくなります。【編集部おすすめの購入サイト】ソフトバンクユーザーならYahoo!ショッピングでお買い物がおすすめ楽天市場でホームページ作成関連の書籍を見るAmazonでホームページ作成の参考書を見る※記事内容は執筆時点のものです。最新の内容をご確認ください。異なる可能性があります。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。