今回は2カラムのレイアウトの作り方をご紹介します。
今はCSSのフレームワークなどがたくさんあり、2カラムを作る方法が数多くあります。ただ、今回はCSSのみを使用した非常に基本的な方法をご紹介します。
フレームワークなどを使う場合も基本的には考え方は同じですので、基本的な考え方はしっかりと押さえておいてほしいです。
コンテンツ
準備:まずは1カラムレイアウトから
2カラムのレイアウトを作成する前に、まずは1カラムのレイアウトでWEBページを作成してみましょう。全然違うじゃないかと思うかもしれませんが、実は1カラムも2カラムをほぼ同じなのです。
また、PCのディスプレイだと2カラム、3カラムであっても、スマホ等では1カラムで表示しなければならない事もあります。事前準備の意味でも、まずは1カラムで表示します。
まず、1カラムでヘッダー、メイン(内容部分)、フッターを画面表示してみましょう。
■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カラムレイアウトのサイト作成!
さて、本題の2カラムレイアウトの画面を作成しましょう。
とはいえ、先ほどお伝えした通り1カラムのソースをちょちょっといじればすぐに2カラムに変更ができます。
HTMLを準備
2カラムのレイアウトを作成する前に基本となるHTMLファイルとCSSを作成しておきましょう。1カラムの時に使用した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">カラム1</div> <div id="column2">カラム2</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; } |
■結果
このままだとまだ1カラムですね。でもCSSの記述を変えるだけで簡単に2カラムに変更する事ができます。
2カラムにする!
今回は「float: left;」を使って2カラムを作りましょう。
floatはleft、rightなどを指定する事で回り込みを行うスタイリングになります。両者に対して回り込みを指定すると2カラムの形になります。
id=colomun1、id=column2の2つのdiv要素がHTMLに存在していますが、この両方に対して、「float: left;」を指定してあげます。
※「float: left;」を指定する場合はwidthも一緒に指定する必要があります。一旦は適当な大きさにしておきましょう。
実際にCSSの内容を以下の様に変更すると、2カラムになります。
■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; } |
■画面
おや、フッターがカラム1、カラム2と並んでしまっています。これだけだとフッターがmainと同じ列に表示されてしまうのです。
「clear: both;」で回り込み解除
「float: left;」の指定によりフッターも回り込みをしてしまいました。
こんな時は「clear: both;」というスタイリングをフッターに追加します。
※「clear: both;」は左右両方(both)の回り込みを解除するという意味です。
フッターに以下を追加します。
■CSS
1 2 3 4 |
footer { clear: both; background: #EE0000; } |
■画面
センタリングをして形を整える
フッターがカラム1、カラム2の下にレイアウトされました。簡単に言えば、これで2カラムレイアウトのサイトは完成しました。
ただ、カラム1、カラム2がいずれも左詰めになって少しかっこ悪いですね。この場合はmain部分に、「margin: 0 auto;」を指定して、さらに「width」を設定(カラム1と2を足した分)してあげると、カラム1、カラム2がセンタリングされます。
※厳密にはmainがセンタリングされます。
最近はmainの中にさらにdivタグで「container」という名称でclassを作り、スタイリングをする事が多いです。
■CSS (main部分)
1 2 3 4 5 |
main { background: #00EE00; margin: 0 auto; width: 600px; } |
■画面
これで2カラムのサイトぽくなりました。
※もちろんレイアウトの仕方によっては、センタリングをしない場合もあると思います。
このカラム1、カラム2に、さらに文字を詰めていくと以下の様になります。
■画面
どうですか、段々、2カラムのイメージに近付いているのではないでしょうか。
まとめ
今回は2カラムのレイアウトの作成方法についてご紹介しました。
今回ご紹介した内容は2カラムレイアウトの基本中の基本とも言える内容ですので、しっかりと押さえておく様にしましょう。
レイアウトを変える場合も、基本は同じ様な考え方でカラムを増やしたりできます^^