今週のおさらい/第５号

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

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

バックナンバーはこちらから → 第１号第２号第３号第４号目次

プレーンテキスト版

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

　　　　　　　　　　　　　　　　　　毎週金曜日配信　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">  </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ピクセル分しか表示されません。二つのマージンが重なった場合はどちらか大きい数値を優先して、ひとつだけのマージンを表示します。覚えておいておくといいです。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

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

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