CSSカラムの作り方と種類

Webサイトを製作する際、縦に内容が分かれているサイトがあります。

サイト制作ではカラムと言われていますが今回はそのカラムについて内容と制作方法を教えます。

 

カラムとは

 

カラムとはページ内の段組(レイアウト構成)を表します。

文章を作る時やチラシ、ポスターを作る時に段組を2段や3段にするのと同じようなものです。

Webページは主に、ヘッダー(上部のタイトル部分など)、コンテンツ(ページの内容)、フッター(補足情報やコピーライトなど)で、コンテンツ部分の段組みの数が1つなら「1カラム」、2つなら「2カラム」、3つなら「3カラム」と言われ現在のサイトでは主にこの3つの段組みが多く使われています。

 

1カラム

縦に段組みが分かれていないのを1カラムと言います。

WebサイトではLP(ランディングページ)などサイドに情報が必要無いページで多く使用されます。

 

2カラム

一般的なwebサイトで特に多く使われている段組みではないでしょうか。

サイド部分はサイドナビ(side navi)・サイドコンテンツ(side contents)とも言います。

 

3カラム

ブログやポータルサイトなどの情報量が多いサイトで見られる段組です。

大手のYahoo!サイトもこの段組みになっています。

 

基本的なカラムの作り方

基本的に2カラム、3カラムの段組みでは1つの段組みをひとつの要素とし、フロート(float)をかけるのが一般的です。

CSS3では別の方法もありますがここではfloatの方法を紹介していきます。

 

2カラムの場合

まずはメインコンテンツとサイドナビのボックス2つを作ります。

メインコンテンツが左の場合は先にメインコンテンツのBOXを記述します。

サイドナビが左の場合はサイドナビが先になります。

今回はメインコンテンツが左の場合で制作していきます。

 

<body>
<div class=”maincontents”>
</div>

<div class=”sidenavi”>
</div>

</body>

次にこのボックスを横に並べるためにcssでプロパティのfloatをかけていき、ボックスを横に並べます。

この時点で左がメインコンテンツで右がサイドナビになります。

 

.maincontents {
float:left;
}

.sidenavi {
float:left;
}

ただ、この時点では横幅が固定されていないので、幅固定のために幅も値を記述します。

.maincontents {
width:700px;
float:left;
}

.sidenavi {
width:300px;
float:left;
}

ブラウザにもよりますが、ページ幅は1000px前後が好ましいとされているので、今回はメインコンテンツの固定幅を700px、サイドナビの固定幅を300pxとします。

これにそれぞれの内容を入れ込んでいくのですが、フロートを解除していないのでこのままではフッターも横並びになってしまいます。

そのため、cssにfloat解除の記述を追加し、コンテンツのfloatを解除します。float解除はいくつか方法がありますが今回は割愛します。

HTMLではfloat解除がかかるdiv要素のボックスを記述し、

<body>
<div class=”maincontents”>
</div>

<div class=”sidenavi”>
</div>

<div class=”clear”>
</div>

</body>

cssでもfloat解除の記述を足します。

.maincontents {
width:700px;
float:left;
}

.sidenavi {
width:300px;
float:left;
}

.clear {
clear:both;
}

これでカラム(段組み)の記述は終わりました。

ただし、これではコンテンツが左に寄ってしまいます。

そのためメインコンテンツとサイドナビを囲う要素が必要になります。

<body>
<div id=”contents”>

<div class=”maincontents”>
</div>

<div class=”sidenavi”>
</div>

<div class=”clear”>
</div>

</div>

</body>

これにcssでは2カラムの両方が入る横幅をなどを指定し、マージン(margin)で左右にオート(auto)をかけることでウインドウの中央配置が可能になります。

#contents {
width:1000px;
margin:0 auto;
}

これで2カラムのコンテンツ部分の記述は完了です。

 

まとめ

カラムの基本段組みは以上ですが、ヘッダー・フッターを通して横幅が同じな場合は最初に全体の横幅を指定するのも1つの手です。

ヘッダー・フッターで背景などの横幅が違う場合は分けて言った方が後々の修正変更がしやすい場合もあります。

カラム数が多くなれば記述もその分多くなります。

仕事で制作する場合は自分以外の人も触りますし、変更の度に面倒な修正があると時間がとられてしまいます。

編集のしやすさや、記述がなるべく少なく済むようにするために、デザインに合わせたボックスの組み方をするように心がけましょう。

 

このエントリーをはてなブックマークに追加

筆者

E.Mizuno

2016年12月入社。制作部所属。 主にWebデザインと印刷物、ときおりイラストを担当しています。 印刷業界からWeb業界に転身したばかりなので現在コーディング勉強中。 猫好きで猫を飼ってるけど猫アレルギーなのが日頃の悩みです。 好きなデザイン系統は寒色系シンプル。好きなソフトはAdobe Bridge。好きなショートカットキーはCont+A。愛用文具は製図用シャーペン。 まだまだ未熟者なのでもっと勉強してハイスペック人間になりたいです。

筆者が最近執筆した記事