CSSスタイルシートによるホームページレイアウト

CSSレイアウト

ホームページの装飾、レイアウトCSSスタイルシートを使って設定します。

div要素コンテナボックス)をうまく使いCSSでサイズやマージン、ボーダーを決めていきます。


CSSレイアウトといってもHTMLタグでの設定もある程度必要となります。HTMLの各まとまりに分ける必要があります。


ここでは簡単に説明します。

まずサイト全体を取り囲むdiv要素コンテナボックス)。タイトルなどを表示するヘッダー部分・メニユーを表示する部分。本文を表示する部分。フッターを表示する部分。

単純にこのような構成のサイトをレイアウトするとします。

HTML表記でが次のようになります。

(body以下)
<div id="wrap">
 <div id="header"></div>
  <div id="leftmenu"></div>
  <div id="main"></div>
 <div id="footer"></div>
</div>

サイトのレイアウトを行う時はid属性がよく使われます。それぞれのボックスに固有の名前を付けておきます。これでHTMLの設定はOKです。

さてあとはそれぞれのdiv要素CSSレイアウトしていけばいいわけです。

CSSの記述例
@charset "UTF-8";

#wrap{
  margin:10px auto;
  width:800px;
  border:solid 1px;
}

#header{
  background-color:#000;
  height:150px;
}

#leftmenu{
  width:200px;
  float:left;
}

#main{
  float:right;
}

#footer{
  background-color:#000;
  height:150px;
}



こんな感じに設定していくことになります。

CSSファイルの記述はサイトに大きく関わる部分を上部に書くと分かりやすくて良いです。サイトを構成するコンテナボックスについてのスタイルシートはまとめて書いておいたら良いと思います。


サイトのレイアウトを行うときに難しいのがdiv要素floatプロパティの使い方だと思います。

コツとしては、まずはdiv要素でサイトの各ブロックを構成する(名前を付けておく)。次に幅をしっかり確認する(これ重要)幅がうまく設定できていないとコンテナボックスがうまく回り込みしない場合が多いです。例えば大枠の幅が800pxとして左に200pxのメニューを、右に610pxのボックスを並べるとします。この場合800pxの枠の中に810pxのボックスを入れることになりますのでうまくいきません。

またdiv要素floatプロパティを使って並べる場合並べるボックスにそれぞれfloatの指定をする必要があります。なぜ、指定しないといけないかというと、ブロックレベル要素部分が左のボックスの裏に回ってしまうからです。

ボックスを2つ並べる場合は2つのボックスにそれぞれ、leftかrightの値を入れる必要があります。この時left、leftと入れる場合もあるし、left、rightと入れる場合もあります。これはデザインによるところです。




カテゴリ | CSS | このブログの読者になる | 更新情報をチェックする

About Site(サイト案内) 概要

アクセスアップ方法・アクセスアップツールを中心に紹介しています。出来るだけ易しいサイト作りを目指したいと思います。まだまだコンテンツが少ないですが確実なアクセスアップ方法を紹介しますのでどうぞ宜しくお願いします。アクセスアップ記事以外にもWeb製作のことやiPhoneのこと。ニュースなども取り上げていきます。


◆リンク
http://secretaccess.seesaa.net/
タイトルは『Digital Life -デジタルライフ-
(テキストリンクのみです)
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。