文章の間隔・線

■文字の間隔・線

文字の間隔と線は、一般にボックスモデルにて説明されます。borderはその名の通り、文字を囲う線を指します。

p.a1 {
　　　border-left:solid 1px #000（左に１pxの黒い線）;
　　　border:dotted 3px #f00（3pxの赤い点線で囲う）;
　　　}

borderの中身はsolid(実線)で5pxの太さで、色が321132であることを示します。

borderのスタイルはsolid以外にも、dotted(点線)、double(2本線)、dashed、groove、ridge、inset、outsetがあります。

marginとpaddingは文章の間隔を調整するタグで、「margin-left:20px」は文章の左側を20ピクセルあけろという意味です。

この二つの意味の違いはこちらを参照してください。

次にこのタグを用いて先ほどのサンプルの小見出しとマークの位置を調整します。用いるタグはmarginです。

h2 img {
　　　　vertical-align:middle;
　　　　margin-right:5px;
　　　　}

今度はpaddingも使ってメニューバーを作成します。先に新しくclass：a3を追加しておきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="description" content="初心者が作るページです。">
<meta http-equiv="keywords" content="wakabagari,若葉狩り">
<title>Wakabagari(若葉狩り)</title>
<link rel="stylesheet"type="text/css" href="stylee.css" media="all">
</head>
<body>
<img src="sho1.gif" alt="wakabagari" width="280" height="50">
<p class="a3">
｜<a href="">HOME</a>｜<a href="">PROGRAMING</a>｜<a href="">TRAVEL</a>｜<a href="">DISEASE</a>｜<a href="">BBS</a>｜
</p>
<h1>Wakabagari</h1>
<img src="fuukei1.jpg" alt="風景写真" width="500" height="180">
<h2><img src="point.gif" alt="" class="mark">意味</h2>
<p class="a1">
若葉狩りというのは紅葉狩りの若葉バージョンです。つまり、若葉を見に行くみたいなのりです。ただ、本来の意味は別のところにあります。それは何かというと、みなさんは自動車につける若葉マークをご存知でしょうか？あれって初心者がつけますよね？ここまでくればわかるでしょう。すべてにおいて初心者なので、HPにくること＝若葉狩りにくることみたいになるでしょう？それがこのサイト名の意味です。
</p>
<h2><img src="point.gif" alt="" class="mark">目的</h2>
<p>
目的はというと、特にはないです。が、あえていえば、紅葉マークをつけることでしょうかね。自動車だってはじめは若葉マークだけど 1年後にマークははずれ、高齢者になると紅葉マークになるでしょう？それと一緒ですね。
<p class="a2">
<address>Copyright(C)2007 Wakabagari all rights reserved.</address>
</body>
</html>

a3に対してスタイルを適用します。

p.a3 　{
　　　　margin-top:5px;
　　　　margin-bottom:5px;
　　　　padding-left:50px;
　　　　width:450px;
　　　　}

ここまでのサンプル

ホームページの作り方（HP作成法）を解説

STEP1

STEP2

STEP3

STEP4

STEP5

STEP6

STEP7

■文字の間隔・線