隔週金曜日配信 What's New 2005年5月27日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜第116号＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
当講座は、初心者が正しい文法と作法を身につけて、魅力的な Webページ作
成に役立つことを目的に配信されております。
当講座では HTML4.01、XHTML1.1 を中心とした文法が主体となっています。
なお、このマガジンは等幅フォントでお読みいただくと快適に読めます。
今週のコンテンツ
■ やさしいHTML (第９回) --- ブロックレベル要素
■ お知らせ
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆やさしいHTML --- ブロックレベル要素
HTMLドキュメントの基本的な論理構造を構成する上で、ブロックレベル要素の
役割は非常に重要です。基本的には、全てのコンテンツはこのブロックレベル
内で配置されなければなりません。
ブロックレベル要素は、そのタグにとって文法が異なります。例えば、ブロッ
クレベル要素の中に他のブロックレベル要素を含められる場合と含められない
場合などがあります。
一般的なブラウザでは、ブロックレベルはインラインと違って前後で改行し
ます。なお、インラインレベル要素中にブロックレベル要素を配置することが
できません。同時に、すべてのインラインレベル要素はブロックレベル要素中
に配置されなければなりません。
今回は、各ブロックレベル要素の機能を文法について解説します。
■ address
作者の所在情報を示すアドレスタグです。他のブロックレベル要素を配置する
ことはできません。一般的にドキュメントの末尾で配置される場合が多いよう
です。メールアドレスなどを表現します。
一般的な視覚系ブラウザではこの要素で配置されるテキストを斜体で表示し
ます。終了タグは必須です。
例文：
<address>banban@scollabo.com</address>
■ blockquote
長文となる引用文を利用するときに使います。一般的な視覚系ブラウザでは、
前後にインデント (字下げ) を表示します。なお、この要素中に配置されるコ
ンテンツは、他のブロックレベル要素中に置かなければなりません。
また、cite属性を使って引用先を明示することが望まれます。
例文：
<blockquote cite="http://www.scollabo.com/banban/>
<p>引用文となる文章</p>
</blockquote>
このタグを字下げ表現のためだけで使うのは文法違反となります。字下げを表
現したい場合には、別の方法（スタイルシート) がありますの。なお、このタ
グは終了タグが必須です。
■ del
何らかの理由によって文字を削除するときに用いられます。このタグはインラ
インとしても使えますし、ブロックレベルとしても利用できますが、同時使用
は不可となっています。
一般的な視覚系ブラウザではここに配置されたテキストに抹消線を表示しま
すが、抹消線表示のためだけに使うのは危険であり文法違反となります。意味
無くこのタグを使うのは避けたいところです。 (なお、抹消線を表示しないブ
ラウザもあることを知っておいてください。) 終了タグは必須です。
例文：
<del>ばんばんは緊急入院しました。</del>
■ div
意味を持たないブロックレベル要素で、汎用的に使われます。多くはブロック
レベルにスタイル付けするときに使われます。
このブロックレベル要素内には、他のほとんどのブロックレベル要素を配置
したり、入れ子にすることも可能です。終了タグは必須です。
例文：
<div>
<p>汎用ブロックレベルとして利用可能</p>
<div>このように入れ子として使うこともできます。</div>
</div>
■ dl
定義済みリストをあらわすブロックレベル要素で、この中に配置できるタグは
dd、及び dt の２つしかありません。他のタグは一切配置することができませ
んので注意してください。
なお、dd要素には他のブロック要素や同じ定義済みリストを入れ子にして配
置することが可能です。終了タグは必須です。
例文：
<dl>
<dt>定義済みリスト</dt>
<dd>定義済みリストはぶっロックレベル要素として分類されています。</dd>
</dl>
■ form
閲覧者からのアンケートや各種の情報などの入力フォームを形成するときに用
います。ただし、この要素の直下に入力フィールドを配置することはできませ
ん。基本的に入力フィールドは他のブロックレベル要素内で配置しなければな
らず、form直下は他のブロックレベル要素となります。
また、この要素の属性である action属性を配置することも求められています。
action属性はフォームのデータ送信先を明示するもので、そのほとんどが CGI
として利用されています。終了タグは必須です。
（フォームについての詳しい解説は別の号で予定しています。)
例文：
<form action="/cgi/samp_cgi/" method="post">
<p><label>お名前：<input type="text" value=""></label></p>
<p><input type="submit" value="送信">
<input type="reset" value="取消"></p>
</form>
■ hx (xには１〜６までの数値が入ります)
見出しをあらわすブロックレベル要素で、第一から第六までの６段階が定義さ
れています。
この要素中に他のブロックレベル要素を配置することはできません。一般的
な視覚系ブラウザでは、第一見出しが一番大きなサイズで表示され、順次小さ
なサイズになります。文字の大きさを変化させるために使うことは、明らかな
文法違反となりまさう。終了タグは必須です。
例文：
<h1>第一見出し</h1>
■ hr
罫線を意味するブロックレベル要素で、単純に水平方向の罫線を引きます。
この要素は「空タグ」で内容モデル、つまりコンテンツを含めない要素で、ブ
ロックレベル要素の中で極めて異質の要素です。空タグなので終了タグはあり
ません。
例文：
<hr>
■ ins
del要素同様にインラインレベル、ブロックレベルの両方の要素として定義さ
れています。この要素は追加を意味し、何らかの理由で必要となったコンテン
ツを追加したい場合に用いられます。
インラインでもブロックでも場面によって使い分けできますが、両方一緒に
使うことができません。一般的な視覚系ブラウザでは、この要素中のテキスト
に「下線」を表示します。終了タグは必須です。
例文：
<ins>追加となったコンテンツ</ins>
■ ol
Ordered Listの略で、番号付きリストを意味します。なお、この要素の直下で
はリスト項目をあらわす li要素しか配置できません。
一般的な視覚系ブラウザではリスト項目がインデントされ、数字がマーカー
として順番に付与されます。終了タグは必須です。
例文：
<ol>
<li>HTML講座</li>
<li>XHTML講座</li>
<li>XML講座</li>
</ol>
■ p
段落を意味するブロックレベル要素で、一般的な視覚系ブラウザでは前後の改
行と共に、１行分の余白を表示します。終了タグは省略することが可能ですが
これは、ブラウザ側で次のブロックレベルが登場したときに、終了タグを補完
しているに過ぎません。厳密には終了タグを記述することが望ましいでしょう。
なお、この要素中に他のブロックレベル要素を配置することはできません。
例文：
<p>ここは段落となります。</p>
■ pre
整形済みテキストをあらわすブロックレベル要素で、主にサンプルコードなど
を表現したい場合に用いられます。この中で配置されるテキストは改行分も維
持して表現できますので、プログラムコードを表示するには最適です。
なお、この要素中に他のブロックレベル要素を配置することができません。
終了タグは必須です。
例文：
<pre>
function sample {
ifif((h > 5) && (h <= 10)) {
document.write("おはよう！");
}
｝
</pre>
■ table
表組を定義するためのブロックレベル要素です。一般にテーブルと呼ばれ、様
々な場面で使われています。レイアウトを構築する場合にも使われています。
テーブルの初期値として枠線は表示しません。
この要素の直下に配置できるのは、thead、tbody、tfoot、tr、caption、及
び colgroup、colなどのタグのみです。他にインラインレベル、ブロックレベ
ル要素を直接置くことができません。終了タグは必須です。
例文：
<table>
<caption>テーブルで使われるタグ</caption>
<thead>
<tr><th>タグ</th>
<th>意味</th></tr>
</thead>
<tbody>
<tr><td>table</td>
<td>テーブルを定義する</td></tr>
</tbody>
</table>
■ ul
Unordered List の略で、番号なしリストをあらわすブロックレベル要素です。
使い方や決まりごとは基本的に ol要素と同じです。
一般的な視覚系ブラウザでは、リスト項目の先頭部分に、マーカーとして黒
丸が表示されます。
例文：
<ul>
<li>HTML講座</li>
<li>XHTML講座</li>
<li>XML講座</li>
</ul>
■論理構造とブロックレベル要素
論理構造とは、このシリーズの冒頭でも説明したとおり、表現される各コンテ
ンツがツリー上の構造体の中で配置されます。その骨格となるのがブロックレ
ベル要素であり、ある部分は「見出し」や「段落」となり、また「リスト」や
「表組」などです。コンテンツはそれらの中に置かれ表現されます。
そのため、ブロックレベル要素の文法や決まりごとなどを習得することは、正
しい HTMLドキュメントを作成する近道となります。
アクセス性の向上と環境に依存しないドキュメントを作成する上でも、しっ
かりとした論理構造上でコンテンツを表現することを強くお勧めします。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆お知らせ
当メールマガジンも、お陰さまで満３年を迎えました。皆様のご愛読に心より
感謝いたします。
現在、公私とも多忙の時を過ごし思うように筆が進まないものが実情です。
当マガジンの Webサイトの更新さえおぼつかず難儀しております。
いろいろと考えあぐねた最終的な結論として、当メールマガジンの廃刊に至り
ました。あと２〜３号で終わりにするつもりです。３年は長くもあり短くもあ
りますが、今日までの皆様のご厚情にそむく結果となりましたことをお詫びい
たします。
また、何かの折にお目にかかればと思います。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
今回はここまで。
「今週のおさらい」は未完です。予定が立っておりません。
次回は、6月10日に配信を予定しています。 (あくまでも予定です。)
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
と思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
てくれると思います。
発行者 ばんばん
協力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。
■バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine.html
各号のおさらい http://www.scollabo.com/banban/magazine/
アーカイブ http://www.scollabo.com/banban/daf/archive.html
まぐまぐ http://backno.mag2.com/reader/Back?id=0000090196
■配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助
かります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
＜えでぃた〜ず・る〜む＞
本日配信できるとはまったく予想もしていませんでした。わずか２日前までは
休刊する予定でしたが、ちょっと空いた時間に原稿を一気に書き上げ無事にお
届けできるようになりました。
本当はもっと時間をかけて詳細な内容にしたかったのですが、とりあえず配
信日に間に合わせた格好となりました。
最近は仕事に追いまくられ、サイト更新が手に付かず、結局メールマガジンの
中身もたいしたことが書けなくて若干スランプ気味です。こんな状態では読者
の皆さんに迷惑がかかりますし自分でもフラストレーションが溜まります。
やめちゃうという結論は間違いだったかどうかは、時間が教えてくれるだろ
うと思います。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応
じておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に
自由に使っていただいても差し支えありません。
Copyright(C) 2002-2005 www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
最新公開日 2005年7月28日
Copyright(C) 2002-2004 banban@scollabo.com