今回は２カラムのレイアウトの作り方をご紹介します。
今はCSSのフレームワークなどがたくさんあり、２カラムを作る方法が数多くあります。ただ、今回はCSSのみを使用した非常に基本的な方法をご紹介します。
フレームワークなどを使う場合も基本的には考え方は同じですので、基本的な考え方はしっかりと押さえておいてほしいです。
コンテンツ
準備：まずは１カラムレイアウトから
2カラムのレイアウトを作成する前に、まずは１カラムのレイアウトでWEBページを作成してみましょう。全然違うじゃないかと思うかもしれませんが、実は１カラムも２カラムをほぼ同じなのです。
また、ＰＣのディスプレイだと２カラム、３カラムであっても、スマホ等では１カラムで表示しなければならない事もあります。事前準備の意味でも、まずは１カラムで表示します。
まず、１カラムでヘッダー、メイン（内容部分）、フッターを画面表示してみましょう。
■HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>レイアウト作成</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> ヘッダー部 </header> <main> 内容部分 </main> <footer> フッター部分 </footer> </body> </html> |
※header、main、footerタグを使うのはWEBサイトではよくあるパターンです。他のサイトのHTMLを確認するとよく分かると思います。
■CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body { background: #EEEEEE; } header { background: #0000FF; } main { background: #00EE00; } footer { background: #EE0000; } |
■WEB画面
ヘッダー、内容、フッターと分かれましたね。背景色を付けているので、それぞれのボックスが順番に並んでいる事がよく分かると思います。
2カラムレイアウトのサイト作成！
さて、本題の２カラムレイアウトの画面を作成しましょう。
とはいえ、先ほどお伝えした通り１カラムのソースをちょちょっといじればすぐに２カラムに変更ができます。
HTMLを準備
２カラムのレイアウトを作成する前に基本となるHTMLファイルとCSSを作成しておきましょう。１カラムの時に使用したHTMLの内容を以下の様に書き換えました。
mainの中にさらにdivを2つ追加します。これがカラムになるイメージです。
※ヘッダー部⇒ヘッダー、フッター部分⇒フッターに名称変更しました。。。
■HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>レイアウト作成</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> ヘッダー </header> <main> <div id="column1">カラム１</div> <div id="column2">カラム２</div> </main> <footer> フッター </footer> </body> </html> |
■CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
body { background: #EEEEEE; } header { background: #0000FF; } main { background: #00EE00; } #column1 { background: #00EEEE; } #column2 { background: #EEEE00; } footer { background: #EE0000; } |
■結果
このままだとまだ１カラムですね。でもCSSの記述を変えるだけで簡単に２カラムに変更する事ができます。
２カラムにする！
今回は「float: left;」を使って２カラムを作りましょう。
floatはleft、rightなどを指定する事で回り込みを行うスタイリングになります。両者に対して回り込みを指定すると２カラムの形になります。
id=colomun1、id=column2の２つのdiv要素がHTMLに存在していますが、この両方に対して、「float: left;」を指定してあげます。
※「float: left;」を指定する場合はwidthも一緒に指定する必要があります。一旦は適当な大きさにしておきましょう。
実際にCSSの内容を以下の様に変更すると、２カラムになります。
■CSS（id=colomun1、id=column2）
|
1 2 3 4 5 6 7 8 9 10 11 |
#column1 { background: #00EEEE; float: left; width: 100px; } #column2 { background: #EEEE00; float: left; width: 500px; } |
■画面
おや、フッターがカラム１、カラム２と並んでしまっています。これだけだとフッターがmainと同じ列に表示されてしまうのです。
「clear: both;」で回り込み解除
「float: left;」の指定によりフッターも回り込みをしてしまいました。
こんな時は「clear: both;」というスタイリングをフッターに追加します。
※「clear: both;」は左右両方（both）の回り込みを解除するという意味です。
フッターに以下を追加します。
■CSS
|
1 2 3 4 |
footer { clear: both; background: #EE0000; } |
■画面
センタリングをして形を整える
フッターがカラム１、カラム２の下にレイアウトされました。簡単に言えば、これで２カラムレイアウトのサイトは完成しました。
ただ、カラム１、カラム２がいずれも左詰めになって少しかっこ悪いですね。この場合はmain部分に、「margin: 0 auto;」を指定して、さらに「width」を設定（カラム１と２を足した分）してあげると、カラム１、カラム２がセンタリングされます。
※厳密にはmainがセンタリングされます。
最近はmainの中にさらにdivタグで「container」という名称でclassを作り、スタイリングをする事が多いです。
■CSS （main部分）
|
1 2 3 4 5 |
main { background: #00EE00; margin: 0 auto; width: 600px; } |
■画面
これで２カラムのサイトぽくなりました。
※もちろんレイアウトの仕方によっては、センタリングをしない場合もあると思います。
このカラム１、カラム２に、さらに文字を詰めていくと以下の様になります。
■画面
どうですか、段々、２カラムのイメージに近付いているのではないでしょうか。
まとめ
今回は２カラムのレイアウトの作成方法についてご紹介しました。
今回ご紹介した内容は２カラムレイアウトの基本中の基本とも言える内容ですので、しっかりと押さえておく様にしましょう。
レイアウトを変える場合も、基本は同じ様な考え方でカラムを増やしたりできます^^
