CSSでボックスレイアウト無料ホームページ作成 CSS（スタイルシート）入門

3-8）CSSでボックスレイアウト CSS（スタイルシート）入門

無料ホームページ作成情報トップ > CSS（スタイルシート）入門 > 3-8）CSS（スタイルシート）でボックスレイアウト

ご自分でホームページを作成・修正される方のために、ホームページ作成のためのコンテンツをご用意しました。すべて無料のコンテンツですのでお役立てください。なお、こちらのコンテンツに関してはサポートを行っていません。ご質問のメールなどはご遠慮いただければと思います。

CSS（スタイルシート）でボックスレイアウトについて

ボックスにスクロールバーを表示「overflow」プロパティ
ボックスの回り込みを設定「float」プロパティ
「float」プロパティを使用したページ全体のレイアウト

ボックスの設定を使用すると様々なレイアウトを行うことができます。

このページで最終的に作成するページの見本は、ボックスの設定とボックスのレイアウトです。

ボックスにスクロールバーを表示「overflow」プロパティ

「overflow」プロパティを使用すると、ボックス内に収まらない部分をどのように表示するか設定できます。

visible：ボックスをはみ出して表示
hidden：表示しない
scroll：スクロールバーを使用して表示する
auto：自動

限られた範囲に多くを表示できるので、トップページの更新履歴などに便利です。

但し、「visible」の設定の場合、表示されなかったり、ボックスが自動的に拡大されたり、はみ出して表示されたり、とブラウザとそのバージョンによって見え方が違ってきます。

ブラウザ別対応表（overflow）
Windows									Mac
Internet Explorer				Fire Fox	Netscape		Opera		Safari	IE
6	5.5	5	4	1	8	4	8	6	1	5
△	△	△	×	○	○	×	○	△	○	△

例）visibleの例
.box {
background-color: #FFFF99;
height: 100px;
width: 200px;
overflow: visible;
}

「overflow」プロパティを使用すると、ボックス内に収まらない部分をどのように表示するか設定できます。 visible：ボックスをはみ出して表示、hidden：表示しない、scroll：スクロールバーを使用して表示する、auto：自動。限られた範囲に多くを表示できるので、トップページの更新履歴などに便利です。

例）hiddenの例
.box {
background-color: #FFFF99;
height: 100px;
width: 200px;
overflow: hidden;
}

例）scrollの例
.box {
background-color: #FFFF99;
height: 100px;
width: 200px;
overflow: scroll;
}

例）autoの例
.box {
background-color: #FFFF99;
height: 100px;
width: 200px;
overflow: auto;
}

ボックスの回り込みを設定「float」プロパティ

「float」プロパティを使用すると、ボックスの外の文字の回り込みを設定できます。

left：ボックスを左に配置して、文字などを右に回り込ませる
right：ボックスを右に配置して、文字などを左に回りこませる
none：自動（標準）

ブラウザ別対応表（float）
Windows									Mac
Internet Explorer				Fire Fox	Netscape		Opera		Safari	IE
6	5.5	5	4	1	8	4	8	6	1	5
○	○	○	△	○	○	△	○	○	○	○

例）
.box {
background-color: #FFFF99;
height: 150px;
width: 200px;
overflow: auto;
float: left;
margin: 5px;
padding: 5px;
}

下の例では「東京都」のみに「<div class="box">・・・</div>」を設定した例です。

これを「東京都」「大阪府」「神奈川県」に設定すると以下のようになります。

ボックスの回り込みを解除「clear」プロパティ

「clear」プロパティは、回り込みを解除します。上の例で言うと「日本の人口は徐々に・・・」の段落が回り込んでいることを解除します。

left：「float」プロパティの「left」のみ解除
right：「float」プロパティの「rifht」のみ解除
both：「float」プロパティを両方解除
none：回り込みを解除しません

ブラウザ別対応表（clear）
Windows									Mac
Internet Explorer				Fire Fox	Netscape		Opera		Safari	IE
6	5.5	5	4	1	8	4	8	6	1	5
○	○	○	○	○	○	○	○	○	○	○

例）
.float-clear {
clear: both;
}

「float」プロパティを使用したページ全体のレイアウト

「float」プロパティを使用すると、ページ全体のレイアウトにも使用できます。

一般的なホームページは、下記のように「ヘッダー」「ナビゲーション」「メイン」「フッター」のような構造になっています。

これを「float」プロパティを使用すると以下のようにレイアウト可能です。

同じ設定を、HTMLの<table>タグや<frame>タグを使用すると実現できますが、「SEO対策」を考えるとスタイルシートを使用してレイアウトしたほうがよいでしょう。

但し、古いバージョンのブラウザでは正しく表示されないこともあるので、その点も注意が必要です。

例）
.box-header {
font-size: 18px;
color: #FFFFFF;
background-color: #003366;
margin: 5px;
padding: 10px;
height: 50px;
width: 100%;
}
.box-navi {
font-size: 14px;
background-color: #FFFFCC;
margin: 5px;
padding: 10px;
width: 20%;
float: left;
height: 70%;
}
.box-main {
background-color: #CCFFFF;
margin: 5px;
padding: 10px;
width: 75%;
height: 70%;
float: right;
overflow: auto;
}
.box-footer {
font-size: 18px;
color: #FFFFFF;
background-color: #336600;
margin: 5px;
padding: 10px;
height: 50px;
width: 100%;
clear: both;
}

また、「ナビゲーション」部分が複雑になればなるほど、検索エンジンの対象にしたい「メイン」部分が、HTMLでどんどん下に表示されるようになります。

例）「ヘッダー」→「ナビゲーション」→「メイン」→「フッター」

「SEO対策」を考えると、以下のような順序にしたいと思います。

例）「ヘッダー」→「メイン」→「ナビゲーション」→「フッター」

スタイルシートを使用していれば、HTMLの順序を変えても同じように表示されます。

CSS（スタイルシート）入門メニュー

格安です！ホームページ制作をご依頼ください！！

ホームページ制作は専門用語も多く、わかりにくいことも多いかと思います。ホームページの制作方法や制作費用、アクセス数アップ（SEO対策）などわかりにくいことがあればお気軽にお問い合わせください。

格安ホームページ制作依頼

メールでご相談

メールでのお問い合わせは365日24時間受付中です。

お電話でのご相談

090-3401-6229（直通）

【対応時間】

平日のみ（土日祝日はお休み）
午前11時～午後7時頃

※留守番電話にメッセージを残して頂ければ、対応時間内にこちらより折り返します。

無料ホームページ作成 CSS（スタイルシート）入門 y-labo - CSSでボックスレイアウト