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

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

カラムを構成する

1カラムレイアウトを組んでみよう

floatとclearの特性も理解いただけたかと思いますので、これから実際にヘッダーとフッターのある1カラムレイアウトを作成してみましょう。

まずはそれぞれ必要となる部品(スタイル)を用意します。

1カラムレイアウトに必要なスタイル

1カラムレイアウトを作るうえで、必要なスタイルは以下の5つです。
※1カラムの場合には、floatは必要ありません。

[必要なスタイル]

#wrap {
width:960px;
margin:0 auto;
}

header {
border:dashed 1px #999;
}

#contents {
width:958px;
height:498px;
border:dashed 1px #999;
margin:10px 0px 10px 0px;
}

footer {
border:dashed 1px #999;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

上から順に、#wrap(ラップ)、header(ヘッダー)、#contents(コンテンツ)、footer(フッター)、未対応ブラウザ用スタイルとなります。

1つ1つ、中身を確認していきましょう。

#wrap(ラップ)の説明

#wrap {
width:960px;
margin:0 auto;
}

まず、#wrapですが、これはページ全体の位置とサイズを指定するためのスタイルです。
スタイルを見ると、width960pxとmargin:0 auto;とあります。

これは横幅が960px、margin(余白)は左右を自動調整しなさい、といった指定になります。

wrapの説明画像

なぜ横幅が960pxかというと、新旧様々なパソコンで見やすいサイズに合わせているからです。
スマートフォンやタブレットなど、様々なデバイスで見られることを想定し自動的にページ幅を調整する方法もありますが、最初は固定幅レイアウトから覚えてみましょう。

margin:0 auto;は、左右の幅を自動的に調整し、コンテンツが画面中央に来るよう整えてくれます。
どんなモニターサイズ、解像度であれ、自動的に画面中央へ揃えてくれます。

headerの説明

header {
border:dashed 1px #999;
}

headerはそのまま、ヘッダーに適用されるスタイルです。視覚的にわかりやすいようにborderで点線を付けています。

なお、.(class)や#(id)などは指定していません。
通常、<header></header>は1ページに1つしか存在しないため、headerタグに直接適用されるようにしています。

#contentsの説明

#contents {
width:958px;
height:498px;
border:dashed 1px #999;
margin:10px 0px 10px 0px;
}

#contentsは、メインとなるコンテンツボックスです。widthとheightで大きさを指定し、大きな箱を作っています。
ここに、写真や文書などページのメインとなるコンテンツを入れ込みます。

視覚的にわかりやすいよう、borderで点線を付け、ヘッダーとフッターの間に10pxの余白を指定しています。(margin)

なお、1カラムレイアウトの場合にはfloatを指定する必要はありません。

footerの説明

footer {
border:dashed 1px #999;
}

footerもそのまま、フッターに適用されるスタイルです。視覚的にわかりやすいようにborderで点線を付けています。

なお、.(class)や#(id)などは指定していません。
通常、<footer></footer>は1ページに1つしか存在しないため、footerタグに直接適用されるようにしています。

未対応ブラウザへの対応

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

古いブラウザへの対応」で学習したスタイルを入力します。

IE9以下や、その他の古いブラウザではHTML5以降に追加されたタグを理解することができません。
なので、これらを適切に理解できるようにスタイルを追加しましょう。

覚えておきたいポイント

floatは必要なし

1カラムレイアウトの場合は回り込ませて配置する必要がないため、floatは必要ありません。

古いブラウザへの対応も忘れずに

過去の古いバージョンのブラウザでも問題なく表示できるように、未対応ブラウザへの対応を忘れないようにしましょう。

横幅のサイズについて

横幅は960pxにこだわる必要はありません。パソコンや周辺機器の進化に合わせて横幅も変化します。
過去には横幅1024px、縦幅768pxサイズのディスプレイが使われていましたが、現在では非常に少なくなっています。
超高精細ディスプレイやパソコンも増えているので、環境に合わせて横幅サイズを考えてみてもいいでしょう。
ちなみにさきちんWEBの横幅サイズは1068pxに指定しています。

HTMLの記述

すべてのスタイルが準備できたら、HTMLファイルにコードを入力してみましょう!

ページを組み立てる

なお、ここで気をつけたいのが「入力する順番」です。

入力する順番が異なると、途中でブラウザ確認したときにレイアウトが大幅にズレてしまいます。
さらに、入力ミスなどの元にもなりますので慣れないうちは手順にそってソースコードを入力しましょう。

step.1

まずはじめに、ページの全体位置を決めるwrapを入力します。

<div id="wrap">
</div>

step.2

次に、headerを入れます。
必ず<div id="wrap>と</div>の間に入力します。

<div id="wrap">
<header>
<h1>ヘッダー</h1>
</header>
</div>

step.3

次に、contentsを入力します。
これも必ず<div id="wrap>と</div>の間に、そして</header>の下に入力します。

<div id="wrap">
<header>
<h1>ヘッダー</h1>
</header>
<div id="contents">
<h2>コンテンツ</h2>
</div>
</div>

step.4

最後にfooterを入力します。

<div id="wrap">
<header>
<h1>ヘッダー</h1>
</header>
<div id="contents">
<h2>コンテンツ</h2>
</div>
<footer>
<h2>フッター</h2>
</footer>
</div>

必ず、すべてのコードが<div id="wrap>と</div>の間に収まるようにしてください。

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>1カラムレイアウト</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<div id="wrap">

<header>
<h1>ヘッダー</h1>
</header>

<div id="contents">
<h2>コンテンツ</h2>
</div>

<footer>
<h2>フッター</h2>
</footer>

</div>

</body>
</html>

ブラウザで確認

ここまで入力できたらブラウザで確認してみましょう。
以下のように表示されていれば成功です。

1カラムレイアウトの完成図

覚えておきたいポイント

入力ミスに気をつけよう

記述する内容が多いので、入力ミスに気をつけましょう。また、必ず全ての要素は<div id="wrap"></div>内に収まっている必要があります。
<div id="wrap"></div>内に記述しなければ、レイアウトが崩れてしまいます。

2カラムレイアウトの構成
« 前のページへ floatとclearの応用

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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