初心者のためのホームページ作り 第5号

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

バックナンバーはこちらから → 第1号  第2号  第3号  第4号  目次

プレーンテキスト版

<第5号>マガジンのおさらい
まず、記事から抜書きでおさらいします。

                  毎週金曜日配信 What's New 2002/6/14
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

 今週の課題■ボックスを作る

今週の講座の前の基礎知識として

◆ブロックレベル要素(ブロックレベルエレメント)
ブロックレベル要素としては、下記の要素があります。
address、blockquote、dir、div、dl、fieldset、form、h1〜h6、hr、isindex、
menu、noframes、ol、p、pre、table、ul

これらのほとんどに前後に改行が入ります。この要素をうまく使い分けて段落を
構成します。div に関してはスタイルシートで様々にアレンジを施して、自分な
りの段落を作り上げることができます。

◆インラインレベル要素(インラインエレメント)
インラインは通常の文字と同じで、何も余白や改行はありません。インラインレ
ベル要素の場合、パディング、マージンという概念がありません。そのためタグ
で囲った周囲にスペースはありません。

インラインレベル要素として下記の要素があります。
a、abbr、acronym、applet、b、basefont、bdo、big、br、button、cite、code、
dfn、em、i、iframe、img、input、kbd、label、map、object、q、s、samp、
select、small、span、strike、strong、sub、sup、textarea、tt、u、var

それぞれの働きについては
HTML4.01リファレンスで詳しく述べていますのでご覧ください。

<p>これはp要素を使って書きました。前後に改行があります。</p>

これは<span>を使って赤く</span>しました。<span>はインラインレベル要素なので、前後に改行は入りません。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆ボックスを使ったホームページを作る・・スタイルシート活用
ボックス(領域)とはまさに四角の領域のことであり、ページ全体がひとつのボ
ックスで形成されています。
 ボックス領域はマージン、パディング、ボーダー(枠線)とコンテンツから成
り立っています。これらは通常あまり見られないので意識することがないと思い
ますが、今回はスタイルシートを<head>〜</head>内に用いて様々な箱を作ります。
もちろんはこの中にはコンテンツが入ります。
 ボックスという概念はスタイルシートの登場で初めて具現化したものだと思い
ます。ボックスをスタイルシートなしで表現するのは少し無理がありそうです。

 メモ帳とか SimpleTextのようなテキストエディタを起動して、下記のようにタ
イプしてください。コロン「:」セミコロン「;」を間違えないように。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ボックスを使ったページ</title>
<style type="text/css">
<!--
body     { background-color: #ffc; 
      font-size: 12pt; 
           color: #000 }
div.test  { border: 2px solid #f00; 
            color: #006; 
            line-height: 135%;
      padding: 10px }
span     { color: #c30 }
h2       { font-size: 20pt; 
           font-weight: bold; 
           text-align: center }
-->
</style>
</head>

<body>
<h2>これはボックスを使ったページです</h2>
<div class="test">
初心者のためのホームページ作りの勉強をしています。今週はボックスを中心と
したページの勉強をしています。だんだん<span>本格的</span>になりました。
</div>
</body>
</html>  Sample

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆解説……ボックスの構造
ボックスの構造は言葉で説明するのは難しいので、下記の図を参考にしてください。
ボックスの構造

Webページはすべて「ボックス(領域)」という四角のエリアを持っています。
 ボックス領域はマージン、ボーダー(枠線)、パディングとコンテンツから成り立っています。スタイルシートでは、すべての要素のマージン、ボーダー、パディングを制御することができます。

ボックスはマージンという目に見えない四角の余白があり、その内側にコンテンツを配置します。外側の余白とコンテンツの間にはパディングという余白を配置することができます。また枠線を設定できて外側の余白と内側の余白の間に配置します。

外側の余白は親要素の色で表示されますが、内側の余白と枠線とコンテンツは自由に色を設定できます。実はこのページを含めて、このサイトではボックスを多用して表現されています。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
マージンの設定をして見ましょう。スタイルシート部分を変更します。
テキストエディタで test_02.html を開いて、下記のように div.test の部分を
書き直してください。

div.test { margin: 20px 60px 10px 60px; background-color: #cff;
           border: 2px solid #f00; color: #006; line-height: 135%;
           padding 10px }

入力が終わったら上書き保存し、ブラウザで確認してみてください。 
 div 要素で囲まれたコンテンツが、薄い青の背景色で、枠線の外の左右に60ピ
クセル分の余白があり、上側からは20ピクセル、下側からは10ピクセルの余白も
取りました。これがマージンmarginです。
 先ほども述べたとおり、マージンは見えません。色が付かないのです。言い換
えればマージンの色は親要素であるbodyの設定した色を継承しているのです。
もし枠線が要らなかったら、border属性とその値を削除するだけです。また、マ
ージンのサイズも自由に設定できます。色々といじってみてください。  Sample

マージンとパディングの違い
マージンはコンテンツの外側、パディングはコンテンツの一部と考えると分かり
やすいでしょう。例えば、ボックスの背景色を指定した場合、パディングには色
がつきますが、マージンには色はつきません。罫線もパディングの範囲の周りに
つきますが、マージンの外側にはつけることができません。
ボックスは通常目に見えるものではありませんが、スタイルシートの記述によっ
てはマージン以外は見えるようになります。

 body要素もひとつのボックスです。普段意識はしていませんが、ちゃんとマー
ジンがあるのです。このマージンを消したければ

body { margin: 0px }
とすればいいのです。これもいろいろ試してみてください。

ボックスについて詳しく説明してあるのでご覧ください。
CSSリファレンス…ボックス
 http://www.scollabo.com/banban/ref/refcss_04.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆ポイント……要素の継承
body要素で設定した背景色や文字の大きさ、文字色などは他の要素にも「継承」
します。ただし他の要素が個別にそれらを設定した場合は、そちらが優先して表
示するようになります。

◆ポイント……マージンの不思議
ブロックレベル要素が連続した場合、マージンはどうなるでしょう。上段のマー
ジンの下側を20ピクセル取ったとして、下段の上側のマージンがが30ピクセルな
ら上段と下段の間には50ピクセルのマージンがある計算になります。
 ですが、実際には30ピクセル分しか表示されません。二つのマージンが重なっ
た場合はどちらか大きい数値を優先して、ひとつだけのマージンを表示します。
覚えておいておくといいです。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


Copyright(C) 2002-2003 banban@scollabo.com