本文の開始

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

無料ホームページCSS作成情報。無料でWeb/HP製作。ホームページ入門から、
HTML・CSS・SEO対策・フリーソフトから無料テンプレートまで。

格安ホームページ制作激安HPWeb製作のy-labo.net(わいらぼ、ワイラボ)

  • ホームページ制作費を安く・格安・激安!
  • ホームページ制作を早く!
  • でもかっこいいホームページにカスタマイズ
  • SEO対策でアクセスアップ
  • ホームページ制作後も安心サポート
  • 自分でもホームページを修正したい

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

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

 

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

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

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

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

ボックスにスクロールバーを表示 「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;
}

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


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

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

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

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

見本画像

このページのTOPへ

ボックスの回り込みを設定 「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>

下の例では「東京都」のみに「<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;
}


<p class="float-clear">・・・</p>

見本画像

このページのTOPへ

「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;
}


<div class="box-header">
・・・
</div>
<div class="box-navi">
・・・
</div>
<div class="box-main">
・・・
</div>
<div class="box-footer">
・・・
</div>

見本画像

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

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

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

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

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

例)
.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;
}


<div class="box-header">
・・・
</div>
<div class="box-main">
・・・
</div>
<div class="box-navi">
・・・
</div>
<div class="box-footer">
・・・
</div>

見本画像

このページのTOPへ

このページのTOPへ

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

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

このページのTOPへ

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

メールでご相談

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

お電話でのご相談

090-3401-6229(直通)

【対応時間】

平日のみ(土日祝日はお休み)
午前11時〜午後7時頃

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

ページの終了