XHTML＆CSS：デザインからページができるまで
「どんな手順でサイト作っているの！？」
なんてのを、WEB勉強中のとある人に聞かれたので、
デザインからページができるまでを書いていこうと思います。
また、ただ出来上がるまでのソースをかくのではなく、
僕が考える記述のポイントなどもふまえつつエントリーします。
今回作成するデザインサンプル
サンプルとして次のようなイメージのページを作ります。
ロゴがあって、新着情報とコンテンツというか文章一つと、
あと右側にナビゲーションがあるデザインを作ります。
一番外側(body)の色と一つ中、さらにその一つ中に枠があるデザインになっています。
今時こんなデザイン！？なんてことは言わないでください。
とりあえず今回はサイトができるまでの流れやポイントを書きますので、ご了承ください。
最初にXHTMLとCSSの設定ポイント
一番心がけている部分ですが、
XHTMLのマークアップもCSSも複雑にならないように、
できるだけ最小限の記述で完成させるようにしています。
ただ、CSSで最小限にしすぎると、FirefoxやSafariでは見れるのに、
IEでは見れないという状況にもなるので、
今回はあくまでクロスブラウザ対応になるように記述していこうと思います。
そして、XHTMLならば、divをつかいまくることなく、
基本となるHTMLタグをきちんと利用してマークアップするようにします。
記述をシンプルにしておくことは、今後のメンテナンスにも便利です。
複雑すぎると、どこをどう直したらいいのかわからなくなるので、
シンプルになるように作るよう心がけます。
トップダウン方式でマークアップ
他の人がどのようにマークアップしているのかわからないのですが、
僕の場合は細部からマークアップするのではなくて、
大枠となる部分からマークアップを決めて行きます。
例えば今回の例で言うなら、divに該当しているところから決めて行きます。
- ・囲い枠（#wrap）
- ・ヘッダー（例：#header）
- ・メインコンテンツ（例：#main）
- ・サイドバー（例：#sidebar）
- ・フッター（例：#footer）
そしてさらに今回のデザインサンプルでは、囲い枠の中でさらに枠線をつけるために、
#wrapの次の#innerwrapを入れています。
また、#mainと#sidebar部分はどちらもfloatさせていますので、
どちらの高さも確保するために、#contentというので#mainと#sidebarを囲っています。
ちなみに大枠と内部のマークアップは、
だいたい下記のイメージのような感じになります。
XHTMLマークアップ その１（head内）
そして、大枠部分がきまったら、その中のマークアップです。
まずはHTMLの書き出し部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>サンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
１行目にDOCTYPEを書きます。今回はXHTML1.0のStrictでマークアップします。
そしてheadの最初にはmetaタグで文字コードの指定を必ずします。
これは必ずタイトルよりも前にくるようにします。
そしてタイトルと、もう一つmeta情報として
http-equiv="Content-Style-Type" content="text/css"を書いておきます。
JavaScriptを使うような場合は、
http-equiv="Content-Script-Type" content="text/javascript"
これも書いておくようにします。
それと今回は省略していますが、keywordsとかdescription、
これらも指定するようにしてください。
XHTMLマークアップ その２（header内）
次にheader内
<!-- ▼wrap --> <div id="wrap"> <!-- ▼innerwrap --> <div id="innerwrap"> <!-- ▼header --> <div id="header"> <h1><a href="http://h2ham.seesaa.net/"> <img src="・・・.png" alt="THE HAM MEDIA" /> </a></h1> </div> <!-- ▲/header -->
今回の例ではheader内にロゴをいれそこにリンクもつけています。
このマークアップが最善かどうかは疑問ですが、
今のところ僕はロゴ部分にh1を指定するようにしています。
それと余談ですが、divの大枠の部分は、
ソースをみてわかりやすいようにコメントで開始位置と終了位置を書いています。
頭に▼▲をつけいるのは、ソースを見たときにすぐにわかるようにするためです。
黒塗りの文字にしておくとわかりやすいために入れています。
XHTMLマークアップ その3（main内）
次はmainの中。
<!-- ▼content --> <div id="content"> <!-- ▼main --> <div id="main"> <h2>新着情報</h2> <ul id="newtopic"> <li>・ダミーテキストダミーテキスト</li> <li>・ダミーテキストダミーテキスト</li> <li>・ダミーテキストダミーテキスト</li> <li>・ダミーテキストダミーテキスト</li> <li>・ダミーテキストダミーテキスト</li> </ul> <h2>コンテンツ</h2> <p> ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト </p> </div> <!-- ▲/main -->
いくつもあるようなインデックスになるような部分はh2でマークアプします。
新着情報のようにリストになる部分はulとliを使ってマークアップします。
テキストが文章段落になっている部分はpタグで囲みます。
XHTMLマークアップ その４（sidebar内）
次はsidebarの中。
<!-- ▼sidebar --> <div id="sidebar"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">コンテンツ</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> <!-- ▲/sidebar --> </div> <!-- ▲/content -->
今回はここにナビゲーションをもってきました。
ここもリストなので、ulとliを使ってマークアップします。
ここでも余談ですが、リストなどでや同じ要素が繰り返されるようなときで、
最初や最後の部分のデザインが変わるような場合は、
クラスにfirst-childやlast-childを書いて、そこだけに適応させるCSSを設定しましょう。
CSS3が対応するブラウザの場合は、
CSSで「:first-child」や「:last-child」が使えるのですが、
IE6などCSS3に未対応の場合はクラスの指定をしていないと使えない。
IEでも対応していたらなーと思うと残念でならなかったりします。
XHTMLマークアップ その５（footer内）
最後にはfoorerの中。
<!-- ▼footer --> <div id="footer"> <p>Copyright © THE HAM MEDIA. all rights reserved.</p> </div> <!-- ▲/footer --> </div> <!-- ▲/innerwrap --> </div> <!-- ▲/wrap --> </body> </html>
今回のはCopyrightが記述されているくらいなので説明省きます。
マークアップだけのをブラウザで表示してみると下の画像のような感じに表示されます。
リスト表示の部分、デフォルト状態で「・」が着くのですが、
今回はそれだと一回り大きいので、小さくするために文字の「・」を利用するようにします。
XHTMLの設定 その１（全体部分への指定）
次にCSSの設定に話をすすめます。
まずはユニバーサルセレクタでの指定、
marginとpaddinを0で指定します。
CSSリセットを使えばいいのかもしれないですが、
個人的にはリセットを使うよりは、こちらを使うようにしています。
*{
margin: 0;
padding: 0;
}
イメージ要素はデフォルトの状態でリンクをつけると、
自動的にボーダーで囲まれるようになってしまうので、
それをしないようにするために、borderの値を0にします。
また、list表示の「・」を消すために、list-style-type: none;を指定します。
img{
border: 0;
}
ul , ul li{
list-style-type: none;
}
今回はロゴ部分にしか使っていないので、borderの指定しかしませんでしたが、
文中等でも使うようなケースの場合、vertical-align: bottom;などの指定もしたほうがいいです。
これはデフォルトの状態だと、vertical-align:baseline状態になっているため、
隙間が生じたりしてしまうので、それをなくすための指定です。
それとbodyには下記のようにbackgroundとcolorの指定をしました。
本来ならfont-familyやfont-sizeの指定もここで行うのですが今回は省略します。
body{
background-color: #c4c4c4;
color: #333333;
}
XHTMLの設定 その２（囲い部分とheaderの指定）
全体の大きさは950pxで作成します。
#wrap部分にpaddingを設定していて、#innerwrapでmarginの指定を0 autoにしています。
全体を中に20px分内側に入れるために指定しています。
この時、#innerwrapのmarginに20pxを指定して、
#wrapのpaddingを0にするのも考えられるのですが、
そっちにしてしまうと、背景部分がずれてしまうので、注意しましょう。
背景部分を確保したい場合は、外側から一つ内側のタグにmarginを指定しないように。
#wrap{
width: 950px;
margin:0 auto;
padding:20px 0;
background-color: #ffffff;
}
#innerwrap{
width: 910px;
margin:0 auto;
padding: 20px 0 0;
background-color: #ffffff;
border: 1px solid #c4c4c4;
}
#header{
border-bottom:1px solid #c4c4c4;
padding: 0 0 0 20px;
}
XHTMLの設定 その３（#mainと#sidebarの指定）
#mainと#sidebarはfloatの指定をするため、
clearを指定するまで高さが確保できないようになっています。
そのため、高さを確保できるようにするために、二つの外側に#contentという枠をつけ、
#content:afterでclearfixの指定をしておきます。
#content{
padding:20px 60px 0 20px;
}
#content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#mainと#sidebarの横幅ですが、これは必ず合計値が外枠の大きさ以内にします。
widthとpadding、それにmarginの合計になるので、この計算は要注意。
あまりきっちりにしておくと、少しでもずれが生じたときにずれてしまうので、
少し余りを多めに設定するように気をつけてください。
#main{
width: 600px;
float: left;
}
#main ul{
display:block;
width:580px;
padding: 5px 10px;
margin: 0 0 20px 0;
overflow: auto;
border: 1px solid #c4c4c4;
}
#main p{
width: 580px;
padding: 5px 10px;
margin: 0 0 20px 0;
text-indent:1em;
border: 1px solid #c4c4c4;
}
#main h2{
font-size: 120%;
margin: 0 0 5px 0;
}
#mainのfloatがleftだったのに対して、
今回#sidebarはrightを指定しました。
もちろんこの指定はleftでもいいのですが、わかりやすいようにrightにしてあります。
また、ここではロールオーバーの時に背景色が変化するように、
:hoverの指定もしてあります。
#sidebar{
width: 180px;
float: right;
}
#sidebar ul{
margin-top: 25px;
text-align: left;
}
#sidebar ul li{
width: 180px;
display:block;
margin: 0;
background-color: #dcdcdc;
border-bottom:1px solid #fff;
}
#sidebar ul li a{
display:block;
width: 180px;
padding: 10px 0;
margin: 0;
background-color: #dcdcdc;
color: #333333;
text-indent:1em;
text-decoration: none;
}
#sidebar ul li a:hover {
background-color: #c0c0c0;
}
XHTMLの設定 その４（#footerの指定）
最後に#footer部分の指定ですがここでもwidthを指定しておきます。
今回のような作りのときに、footerにwidthを指定していないと、
#contentと#footerとの間がブラウザによって変わってくるからです。
今回はIEの時によけいに高さがついてしまったので、widthを指定しました。
ここに限らずに、IEのバグの多くがこのwidthを指定することで解消できるケースが多いので、
面倒かもしれないですが、widthの指定はしていたほうがいいです。
#footer{
width: 910px;
clear:both;
margin-top: 20px;
padding: 20px 0 20px 0;
text-align: center;
background-color: #c4c4c4;
}
以上で完成です。
完成品は下記リンク。
■完成品
fontの指定をしていないので、ブラウザによって文字の大きさは変化しますが、
だいたい同じような表示をします。
※完成品は若干上記の説明以外のことも加えています(metaなど。)
今回はCSSの詳しい設定方法などは書きませんでしたが、
だいたいこんな感じでマークアップとCSS設定していますというのを書いておいた。
ちなみに、僕はこれらを全部テキストエディターで行っています。
Dreamweaverとかつかわずとも作れるので、CSS設定などは覚えて損ないです。
