ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

カラム(段組)とは?

カラムについての基礎知識

カラム(段組)とは、そのまま読んで字の如く、段を組むことを指します。
例えばWordで文書を書いたり、ポスターやチラシのデザインなどする際に、見やすいように2段組や3段組にレイアウトを整えたりしませんか?

[Wordの2カラムレイアウトの例]
ワードでのカラムレイアウト例

ホームページを作る場合も同じで、最初に段組みを行い、おおまかなデザインやコンテンツの配置などを決めます。
それから、コンテンツや画像、文書などを盛り込み、肉付けを行います。

カラム作成はページの大まかなデザインや基礎・骨格を決める、非常に重要な部分です。

レイアウトの実例

私が運営しているホームページのカラムレイアウト例です。
ちなみに、この「さきちんWEB」は2カラムレイアウトで構築しています。

さきちんWEB

さきちんWEBのカラムレイアウト例

メインのコンテンツを左に、サイドナビを右に配置した2カラムレイアウト。さらにメインのコンテンツ内で2カラムレイアウトになっている、やや変則的な構成。

さきちん絵葉書

さきちん絵葉書のカラムレイアウト例

左右にサイドナビを配置し、中央にメインのコンテンツを配置したスタンダードな3カラムレイアウト構成。

ThinkPadWeb

ThinkPadWebのカラムレイアウト例

メインのコンテンツを左に、サイドナビを右に配置したスタンダードな2カラムレイアウト。なお、サイドナビは画面をスクロールすると付いてくる。

熨斗紙素材館

熨斗紙素材館のカラムレイアウト例

左にサイドナビ、右にメインのコンテンツを配置したスタンダードな2カラムレイアウト。

覚えておきたいポイント

好きなカラムレイアウトでOK

一般的には2カラムレイアウト(2段組)や3カラムレイアウト(3段組)などが多く見受けられますが、特に「このレイアウトで作らなければいけない」といった決まりはありません。
中には4カラム、5カラム、変則的なカラムレイアウトなどのページも存在します。

divを使ってカラムをレイアウトをする

カラムレイアウトする際に大活躍するのが、div要素です。
※divを忘れてしまった方は「divでまとめて指定」を開き復習しましょう。

カラムレイアウトする場合、divにCSSでスタイルを設定し、それらを複数配置してページ全体をレイアウトします。

カラムレイアウトにdivは欠かせない存在

なお、複数のdivを使うので、classとidを上手く使い分けながらレイアウトしていきます。
基本的にカラムレイアウト関連のスタイルは1度しか使用しないので、idを割り当てていきます。

【例】#wrap、#sidenavi、#maincontents、#header、#footerなど。

覚えておきたいポイント

カラムレイアウトにdivは必須の存在

基本的にはdivを使って段組します。カラムに限らず、他のコンテンツを作成する際にもdivを使ってレイアウトを整えたりします。

レイアウトの呼び名と基本形

ホームページはどのようなカラムレイアウトにしてもOKなのですが、基本的なデザインと、その呼び名を覚えておくと大変便利です。

各部の名称について

※一般的な名称であり、他の名称で表記されていることもあります。

各部の名称図

① header(ヘッダー)

ページのタイトルなどが表示されるエリアです。

② sidenavi(サイドナビ)

ホームページのサイドへ配置されているエリアです。レフトナビ(左側)やライトナビ(右側)と呼ばれる場合もあります。

③ contents(コンテンツ)

ホームページのメインとなるコンテンツが表示されるエリアです。

④ footer(フッター)

ホームページ最下部に配置されるエリアです。一般的にはホームページに関する補足情報やコピーライト、著者情報などが表示されます。

よく利用されているレイアウト

色んなカラムレイアウトのホームページがありますが、1番多く見かけるのは、1カラム、2カラム、3カラムレイアウトです。

[1カラムレイアウト]
1カラムレイアウト
[2カラムレイアウト]
2カラムレイアウト
[3カラムレイアウト]
3カラムレイアウト

なお、どんなカラムレイアウトでもヘッダーとフッター(もしくはそれに似たもの)を付けるのが望ましいです。
「必ず絶対必要なもの!」ではありませんが、ヘッダーとフッターがあるほうが見やすく、デザイン的に美しく使い勝手も良いです。

覚えておきたいポイント

各部の名称について

各部の名称は人によって異なりますので、一般的な名称で説明しています。

floatとclearの応用
« 前のページへ 【STEP.5】カラム(段組)の概要

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。