3日で作るホームページ中級偏・HTMLとCSSを使ったレイアウトを理解していきましょう

それではさっそくHTMLとCSSを使ったレイアウトを実際に作りながら理解していきましょう

それでは実際にサンプルサイト「Favorite Cafe」を作っていきましょう♪

まずは下記のファイルをダウンロードしてください。
zip形式に圧縮してありますので、保存後解凍してください。

解凍ソフトが無い場合はフリーソフトがありますので、それをインストールしてから
解凍してください。

サンプルサイト「Favorite Cafe」ダウンロード→

解凍圧縮ソフト　Lhaplusダウンロード→（外部サイト）

サンプルサイトをダウンロードしたら解凍しましょう。
zipファイルを「右クリック」→「解凍」→「ここに解凍」で解凍できます。

その中にはすでに完成したhtmlファイルが入っています。

試しにindex.htmlをダブルクリックしてみましょう。
どうですか？表示されましたか？

表示されていれば、カフェのサンプルサイトであることがわかると思います。

ではそのindex.htmlをメモ帳で開きましょう。

それではソースの上から順に説明していきます。

html内には書かなくても問題ないものや、書くことが推奨されているなどの表記があります。
特に<body>タグの上の部分（head部）に多く見られます。
ただ、ここではW3Cの勧告に基づくWeb標準での制作を前提としているので、
面倒でも表記することにします。

DOCTYPE宣言

まず、一番上にあるのが、DOCTYPE宣言と言うものです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
の部分です。行幅の都合上見た目は改行されていますが、改行はしていません。
これは絶対に消したり、変更しないように注意してください。
基本的にこの部分は今後も触ることはまずありませんのでそのままそっとしておきましょう＾＾

これを消したり変更すると、サイトのレイアウトが大きく崩れます。
またこのDOCTYPE宣言の上の行に空白や、余計な文字が入らないようにしましょう。

htmlタグ

これはここからhtmlが始まるという意味のタグです。これも基本的にこのままでOKです。
HTMLでは<html>だけでしたが、XHTMLでは
xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" を追加しています。
これは日本語で書かれているということを明示的に表記するよう勧告があるからです。
無くても問題ありませんが、書いたほうが良いと言っているので書いておきましょう＾＾；

<head>タグ～</head>

<title>サンプル</title>
言わずと知れたサイトのタイトル部分です。
SEO的にはもっとも大事な部分でもあります。
検索を意識したタイトルを記述しましょう。
（ただし、長すぎるタイトルはＮＧです。また同じ文字を繰り返し使うようなこともやめましょう）

<meta name="Description" content="初心者でも簡単にホームページの作り方が理解できる・３日で作るホームページ" />
ここはそのページの要約を入れます。SEO的に効果があるかどうかは賛否両論ですが、自分のサイトの検索結果にここの文章が表示されることが多いため、ここもSEOを意識した文章を書きます。
ただし、ここも長すぎる文章はNGです。

body部分

解凍したフォルダのhtmlファイルと同じところにstyle.cssがありますので、それもメモ帳で開いておいてください。

<div id="shadow">
一番外側の部分。いわゆるサイトの枠にあたります。
ただこれは同時に外枠の背景に影画像を付けるための記述でもあります。
この部分にスタイルシートを使って以下の記述をすることでページを真ん中に持ってきて、
さらに画像を使って影を付けています。

#shadow {
width:820px;
background-image:url("img/shadow.jpg");
background-repeat:repeat-y;
margin-right:auto;
margin-left:auto;
}
意味としては
幅820px、
background-imageで背景画像にshadow.jpgを指定し、
background-repeat:repeat-y;を使って縦にリピートさせています。
（repeat-yはy軸（縦軸）にリピートさせるという指定です）

margin-right:auto;
margin-left:auto;
でページ全体をセンタリングさせています。
ちょっと特殊な記述が多いですが、こういうもんだと思ってください。
※ちなみに
margin-right:auto;
margin-left:auto;
はソース一番上のDOCTYPE宣言をしないと有効になりません。

<div id="sotowaku">
影を付けるための外枠に対して、そのひとつ内側の外枠と考えてください。
余白を設けるために指定しています。
スタイルシートの記述は以下です。

#sotowaku {
width: 800px;
margin-right:auto;
margin-left:auto;
border-bottom:1px solid #eeeeee;
}
幅が800pxでmargin:autoを指定しているので、左右に10pxずつ余白ができることになります。
border-bottom:1px solid #eeeeee;はページの一番下に線を表示するための記述です。
これは一括指定による指定法です。

この部分がサイトのヘッド部分（タイトルやロゴが入る部分）になります。

<h1>

これはSEO的にも大事なタグなので、一番上に持ってくることが良く行われます。
（SEO的には一般的にソースの上にあるものほど重要視される可能性が高いため）

これが左側部分になります。
この部分のスタイルシートでの記述が以下です。

#left {
width:180px;
float:left;
margin-left:2px;
}
ここで注目すべきはfloat:left;の部分です。
これは左側に寄り、さらにその後に続くものを右側に回り込ませなさいという指定です。
ここで注意が必要なのは、floatを指定する場合は必ず幅を指定する必要があります。
幅を指定しなくても左寄せになる場合もあります（写真画像などの右寄せ、左寄せなど）が、
必ず指定しましょう。

この部分がメニュー（ナビゲーション）部分です。

.menu {
width:180px;
margin-bottom:10px;
}
.menu a {
text-decoration: none;
display: block;
padding:5px;
width:170px;
color:#C6A76C;
font-size:13px;
border-bottom:1px dotted #cccccc;
}
.menu a:hover {
color:#996666;
background-color:#F6F6F6
}
menu内のaタグに対しては複雑な指定をしていますが、これはボタンのように見せるための指定なので、このままで覚えてしまいましょう。
説明すると、
まずdisplay: block;でインライン要素をブロック要素に変換しています。
こうすることで、幅の指定や、続けて書いても横に並ばず改行され下に続きます。

padding:5px;
width:170px;

の部分に注目してください。
.menuの幅は180pxでしたよね。ところがここでは170pxになっています。
これはpaddingの分を引いた値を指定しているからです。
幅とpaddingを同時に指定する場合、本来の幅からpaddingの値を引いた値を書く必要があります。

padding:5pxとなっているので、単純に上下左右に5pxずつ余白を指定していますので、
左右の余白は10pxになるわけです。
その10pxを引いた値を幅に指定します。
これは標準のHTMLではpaddingとborderは幅に含めるという仕様であるためです。
とにかく、幅とpaddingを同時に指定する場合は、paddingの分の値を引いた値を幅に指定するというように考えればOKです。

border-bottom:1px dotted #cccccc;
これでaタグの下に破線を指定しています。dottedがドット表示という意味です。
こちらも一括指定をしています。

左側はとりあえずOKですね？
メニューの項目を増やしたり、減らしたりするのも簡単ですよね？＾＾；

<div id="right">
これが右側の部分です

#right {
width:600px;
float:right
}
これも左側と同じく幅を指定していますが、今度はfloat:rightとなっています。
これは右側に寄りなさいという指定です。
これで左右のカラムに分けるレイアウトが完成します。

※幅を指定する際は気をつけてくださいね。
幅が大きすぎると当然収まらずに下に落ちてしまいますので＾＾；
単純に足し算だけでなんとかなりますので、新たに作る際はあらかじめサイズを決めておくことをおすすめします。

これは写真をfloatを使って右側に寄せて、続くテキストを左側に回り込ませています。
スタイルシートには以下のような記述をしています。
.floatright{
float:right;
}
class名が指定と似ているためややこしいかもしれませんが、
この指定をスタイルシートにあらかじめ書いておくことで、
<p class="floatright">という記述をするだけで右寄せにすることができるため、なにかと重宝します。
ただし、floatを指定した場合には注意が必要です。
どこかで解除してやらないとどこまでも回り込んでしまうため、どこかで解除する必要があります。
解除のための指定は
スタイルシートでclear:bothを指定します。
サンプルサイトではh2に対してclear:bothを指定しているので、確認してみてください。
これを指定していないとh2の部分も回り込んでしまいます。

<table class="menu-table">
何かの一覧などの表示にはtableタグが便利です。
その昔は（と言ってもいまだに）tableタグでページ全体のレイアウトを行っていました。
意味合い的にはExcelなどのセルと同じと考えられます。
まぁExcelも実はHTMLで書かれているらしいです。

<td>～</td>が横のセル1つになります。
<tr>～</tr>が縦方向の行になります。

.menu-table{
margin-bottom:30px;
}
.menu-table td{
line-height:120%;
padding:0px 10px;
font-size:80%;
}
この辺の指定は説明するまでもないですよね＾＾；

<div id="footer">
ここがページ下のフッター部分になります。

#footer{
clear:both;
text-align:center;
font-size:13px;
color: #999999;
margin-top:20px;
margin-right:10px ;
margin-left:10px;
border-top:1px dotted #ccc;
}
ここでもclear:bothが指定されています。
これはid="left"とid="right"に対して指定したfloatを解除するためのものです。

HTML側の記述についてはこんなものです。
どうですか？結構簡単ですよね？？＾＾

そうなんです！HTMLってコツさえ覚えてしまえば案外簡単なものなんですよ(^^♪

あとはひたすら作りまくって覚えていくしかないです。
数をこなさないとなかなか覚えきれないのも事実です。

レンタルサーバーを借りてみる→

HTMLとCSSを使ったレイアウトをテンプレートを利用し、実際に作りながら理解していきましょう(^_-)-☆

Contents

その他

姉妹サイト

それではさっそくHTMLとCSSを使ったレイアウトを実際に作りながら理解していきましょう

DOCTYPE宣言

htmlタグ

<head>タグ～</head>

body部分