レイアウトを変える

この名札をつけられた要素たちのレイアウト（今の状態を表示するとこんな感じのはずです。→サンプル）をスタイルシートを用いて変えていきます。

上から順番に見て行きますと、h1の画像の周りに枠があるのがきになりますね。これは画像にリンクを設定すると自動的に枠ができてしまうせいであり、削除したい場合は、

img {
border:0;
}

とCSSファイルの方に記述すればOKです。

imgというのは画像を示し、borderは枠を示しますので、この場合、ページにある全ての画像の枠線をなくしてくださいという命令をしていることになります。

borderが出てきたところで、marginとpaddingも含めた、ボックスモデルについて解説しましょう。

ボックスモデルの理解はホームページを作って行く上で、最も大切な事項の一つですので、ないがしろにしないで完璧に？理解してくださいね。

margin（マージン）はborder（ボーダー）より外の余白のことで、padding（パッディング）はborderより内側で内容領域の外の余白のことを言います。

余白の設定は、

p {
margin:2px;（周り全てに2pxの余白）
margin-top:3px;（上に3pxの余白）
margin-left:3px;（左に3pxの余白）
margin-right:3px;（右に3pxの余白）
margin-bottom:3px;（下に3pxの余白）
margin:4px 5px;（上下に4px、左右に5pxの余白）
margin:1px 2px 3px 4px;（上に1px、右に2px、下に3px、左に4pxの余白）
}

paddingもborderの設定は、marginのところのタグを入れ替えるだけです。

長さ？の単位は、px（ピクセル）以外にemもありますが、pxだけ知っていればよいでしょう。

h1のスタイルは中身が画像だけですので特別な設定はする必要はありません。

続いて、idがa1のp要素（メニュー1）のスタイルを変えてみましょう。

p#a1 {
width:700px;　　pエリアの幅を指定
background-color:#ccc;　　pエリアの背景色を指定
line-height:20px;　　文字の縦幅を指定
border-top:solid 3px #360;　　エリア上部に実線で3pxの#360色の線
}
p#a1 a:link {　　何もされていないリンク
color:#000;
text-decoration:none;　　リンクの下線を除去
}
p#a1 a:visited {　　クリックされたことがあるリンク
color:#000;
text-decoration:none;
}
p#a1 a:hover {　　カーソルを当てたときのリンク
color:#360;
text-decoration:underline;　　リンクに下線を付ける
}

idがa1のp要素のみにスタイルを適用したい場合は、pの後に#（シャープ）ID名を記述して指定します。

border-top：の後のsolidは実線であることを示し、dottedは点線、doubleは二重線で、○pxは線の幅を、#○は線の色を示します。

「p#a1 a」というのは、idがa1であるp要素のa要素に対する指定の意味で、上記では、リンクの色と下線を設定しています。

a:linkはクリックされたことのないリンクの色を、a:visitedはクリックされたことのあるリンクの色を、a:hoverはカーソルが当てられているときのリンクの色を設定する擬似要素です。

この３者はこの順番に記述しないとうまく機能しないので順番は守って記述するように。

サンプル

次はメニュー2のスタイルを設定します。

td {　　全ての行に対して上詰めを指定
vertical-align:top;
}
p.a2 {　　クラスa2に対する指定
width:170px;　　幅を指定
margin-top:5px;　　上にマージンを指定
}
p.a2 img {　　クラスa2の画像のみに指定
margin-left:8px;　　左にマージン
}
p.a3 {
margin-left:20px;　　左にマージン
line-height:24px;　　文字の縦幅
}

vertical-alignは特定のエリア内での文章のインデントを指定できます。よってその文章が入るエリアに対してtopを指定すると上詰、middleは中間、bottomは下詰です。

サンプル

次はコンテンツのスタイルを修正します。

h2 {
width:360px;
color:#360;
font-size:18px;　　文字の大きさを指定
font-weight:bold;　　文字の太さを指定
margin:10px 0 0 10px;　　↑→↓←マージン
padding-left:5px;
　　←パディング border-left:solid 10px #360;
　　10pxの実線 border-bottom:dotted 1px #360;
　　1pxの点線 }
p.a4 {
width:400px;
margin:10px 0 0 20px;
font-size:14px;
line-height:20px;
color:#252;
}
p.a4 span {　　spanで囲まれた部分だけのスタイル
text-decoration:underline;
color:#252;
font-weight:bold;
}

font-sizeは文字の大きさを指定することができます。普通のブラウザのデフォルトは16pxですのでそれを目安に指定するとよいでしょう。

font-weightは文字の太さを指定することができます。bold（太字）、normal（普通）くらいしか使わないので２つで十分です。

border-leftを使用して小見出しの左に四角い図形を表現しましたが、これは、■という記号が小見出しの先頭に来ると重要度が下がりもったいないという検索エンジンクローラーへの配慮です。

■は削除しておきましょう。

サンプル

最後は、アドレスの部分を修正していきましょう。

address {　　アドレスのスタイルを設定 width:695px;　　幅は700-5(paddingの左分）=695 border-top:solid 5px #360; padding:2px 0 0 5px; font-style:normal;　　字体をノーマルに font-size:14px; }

font-styleはitalic（斜体）かnormal（普通）の二つを知っていればよいでしょう。

addressで囲われた部分は通常は最初の字体がitaricです。講座の方では、スタイルの設定の序盤にわけわからずに入力した"* {}"で囲われた部分にfont-styleを記述しているためにはじめから普通の書体になっているのです。

"* {}"はユニバーサルセクレタといって、全ての要素（hもpもtdもbodyも・・・）に対して指定されたスタイルが適用されます。

そして、border="1"を"0"にすれば完成です。

サンプル

掲示板、アクセスカウンタ、アクセス解析を付けたいと思っている人は多いと思いますが、これらのツールはサイトを公開してからでないと付けることができないので、先にホームページの公開方法を学びましょう。