ウェブデザイナー募集 ホームページ作成HOME

ホームページ作成講座HAC Design

CSSでレイアウト 実践編

CSSでレイアウト　実践編

CSSでレイアウトをするにはまずどんなレイアウトにしたいか大まかなスタイルが決まっていないとCSSやHTMLを書くことはできません。

ここでは基本的な2カラムのレイアウトのCSSを解説しながら作成します。

まずは下記のHTMLをメモ帳などにコピーペーストしてください。

<html>

<head>
<title>ホームページのタイトル</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div id="container">

<div id="banner">
<h1>見出し</h1>
</div>

<div id="content">
<h2>見出し</h2>
<p>文章を入れます。この文章の部分は適当に書き加えてください。</p>

</div>

<div id="menu">
<dl>
<dt>メニュー<dt>
<dd>カテゴリ</dd>
<dd>カテゴリ</dd>
<dd>カテゴリ</dd>
</dl></div>

<div id="foot"><p>©2006 ○○ All Right Reserved.</p></div>

</div>
</body>
</html>

コピーペーストできましたか？そうしたら、index.htmlというファイル名でデスクトップに保存しましょう。保存したら、次はCSSを書いていきます。

同じくメモ帳を開いてください。<link rel="stylesheet" href="style.css" type="text/css">のhref="" で指定されるファイル名と同じ名前で保存してください。CSSファイルの名前を変更する場合はindexの href="" の部分の名前の変更も必要です。

開いたら、HTMLに書いた<div id="container">の部分から装飾していきます。

HTMLで<div id="container">は一番外枠の装飾です。そのため</div>の閉じタグが一番最後に来ているのがわかります。まずは。この一番大きな外枠の設定を決めます。

横幅は780px、配置場所は真ん中にしましょう。そして、全体をグレーの1pxの線で囲います。

それを書いてみると下記のようになります。

#container{
width:780px;
margin-left:auto;
margin-right:auto;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
border-bottom: 1px solid #999;}

全体を真ん中表示にする

全体を真ん中表示にするには width で横幅を指定し、左右のマージンに auto を指定します。そうすると左右のマージンが同じ値になるように自動調節され、結果として全体が真ん中に表示されます。今までは<center></center>というタグをHTMLに書き込んでいたかと思いますが、そういう書き方はしないで、CSSで真ん中に表示させます。

それが

width:780px;
margin-left:auto;
margin-right:auto;

という表記になります。
ここで width:780px とだけ書いた場合は、自動的に全体は右に表示されます。

全体を線で囲う

全体を線で囲うというと、テーブルを使って囲ったりする場合が多かったのですが、テーブルを使うのではなく、全体の枠に線をつけてあげるというのがCSSでの装飾です。これは全体を囲うときだけでなく、文章を見やすくするためなどに使うのにも便利ですし、見出しタグの際の装飾にも使えます。

それが、

border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
border-bottom: 1px solid #999;

という表記になります。これは線を1px、#999というカラーで表示しますという意味です。
#999は好きな色にかえてください。線の太さをかえるなら1pxの数字を変えればいいのです。

solidというのは一本線です。他にもborderスタイルはいくつかあります。

solid（普通の線）

double（二重の線）

groove（谷型の線）

ridge（山型の線）

inset（凹型）

outset（凸型）

dotted（点線）　

dashed（大きい点線）　

none（線なし）デフォルト

solidの部分を他のスタイルに変えてみてもいいでしょう。

トップバナーを表示させる

<div id="banner">で囲った部分を装飾します。今回は<h1>タグで囲われた見出しに対して
banner のCSSによるレイアウトを反映させます。

<div id="banner">
<h1>見出し</h1>
</div>

これはブログなどでもよく使われている方法なので覚えてください。

今までタイトルバナーは<img src="http://○○○.com/☆☆.jpg">などをHTMLに書いて表示していました。しかし、CSSではタイトルなどのイメージは背景画像として表示している場合が多いのです。
ブログは、タイトル部分のイメージは背景画像として表示させています。

そうすることにより、タイトルをユーザーが自由に変えることができ、タイトルや見出しを文字で書くことによって、検索エンジン対策にもなります。

#banner{
background:url(画像.gif);
width:780px;
}

#banner h1{
font-size:10px;
color:#cccccc;
padding-bottom:10px;
padding-left:20px;
}

#banner は背景画像を指定し、横のサイズを指定しています。
#banner h1 は子孫セレクタを用いて、h1に対しフォントサイズの指定、文字色の指定、位置の指定をしています。子孫セレクタを用いることによって、他の場所でh1タグをつかっても、別のスタイルを指定できます。

メインとサイドメニューを分ける

では、次にメインとサイドメニューの部分を作っていきましょう。
まず２つのスペースに分けます。<div id="content">と<div id="menu">です。このふたつのレイアウトを書いていきましょう。まずは幅の指定今は大枠の<div id="container">の横幅が780pxになっているので<div id="content">と<div id="menu">はその中に表示するため、合わせて780pxになっていないといけません。

#content{
float:left;
width:540px;
padding-left:20px;
padding-right:20px;
}

#menu{
float:right;
width:180px;
padding-right:20px;
}

ここで大事なのが、メイン部分とサイドメニューの幅の計算です！

単純に全体の幅が780pxなので、それをふたつに分割するだけの話なのですが、
文字がメイン領域いっぱいいっぱいに表示されるとかっこ悪いので、余白 padding 等を使います。

そのため#contentはwidth:540px; padding-left:20px; padding-right:20px;となっていて
合わせて横幅が580px。

#menuは width:180px; padding-right:20px;で、合計200px。
#contentと#menuを合計すると780pxです。

この幅の計算がCSSで初心者が難しく感じるところです。こうして図で見ると単純なのですが、paddingが他のセレクタでも指定されていたりすると計算が合わなくなってスタイルが崩れたりします。

サイドバーが表示されなかったりしたらこの基本的な幅の計算を見直してみましょう。
これはブログのカスタマイズなどで、サイドバーの落ちてしまうときに修正する際に必要な知識です！
これがわかると、ブログのカスタマイズもそう難しくなくなるでしょう。

フッターの設定で大事な clear:both;

フッターの部分のレイアウトは、コピーライトの部分になります。

この部分も背景画像をつかったりしますがここでは背景色を設定します。

#foot{
clear:both;
text-align:center;
font-size:10px;
background:#fff;
width:780px;
height:20px;}

ここで使われるのが clear:both;　というとても大事なタグです。先ほど、#content と #menu で float というタグを使いました。float タグの説明は別ページで説明しますが、回りこみのタグです。

<div id="foot">も回り込みされては困るので、回り込みの解除が必要となります。
それが clear:both; です。これも、入れ忘れると、レイアウトの崩れる原因となりるので注意しましょう。

さて、ここまでできれば、基本的なレイアウトはOKです。
後は細かい部分の指定をしていきます。

では、CSSのポイントレイアウトで更に装飾していきましょう！

CSSの基礎知識
CSS・スタイルシートとは
ブログのCSS
CSSでレイアウト 書き方編
CSSでレイアウト 実践編
CSSポイントレイアウト
CSS フォント
CSS テーブル
CSS ロールオーバー
CSS 背景
CSS margin
CSS float
あると便利！
CSS エディター
FireFoxとCSS
CSSのお勧め書籍
リファレンスHOME
ウェブサイトHOME