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

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

プレーンテキスト版バックナンバー

<第56号> 今週のおさらい
                   毎週金曜日配信 What's New 2003/6/27
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   ■ HTML講座  第5回 --- コンテンツの表現 / 文字コード
   ■ XHTML講座 第17回 --- コンテンツの配置 その2

◆ HTML講座 --- コンテンツの表現

Webブラウザ画面にコンテンツを表示するためには、bodyタグの中で、実際に用意するコンテンツ(情報を提示するテキストや画像など)を配置します。この bodyタグは、その意味ではコンテンツを表示させるためのタグの最上位に位置します。

body直下に配置する見出しや段落、リストなどを全部ひっくるめて body要素と呼びます。つまり、body要素内に、表現すべきコンテンツが配置されるわけです。

body要素における論理構造

ちょっと難しくなります。

この講座で何度も説明していますが、HTMLは SGMLの原則を継承しています。文書の構造が論理的に記述されなければならないのです。そのため、むやみに body要素内にコンテンツを配置するわけにはいきません。

早い話が、body要素直下にはすべてブロックレベル要素に分類されたタグを配置しなければならないのです。基本的にブロックレベル要素は、文書の構造骨格を示す働きがあります。そのために、すべてのコンテンツはブロックレベル要素と呼ばれるタグの中に配置されなければなりません。

ブロックレベル要素一覧

タグ機能
address 制作者の情報提示:E-maiなどを表記する
blockquote 長文の引用をする場合に利用する
div 汎用的に利用するブロックレベル要素
dl 定義リスト
fieldset フォームの入力項目のグループ化
form 入力フォームの設定
h1〜h6 見出し(第1から第6まで)
hr 横罫線
ol 番号つきリスト
p 段落
pre 整形済みテキスト(余白、改行を含むテキストの表示)
table 表組(テーブル)
ul 番号なしリスト

(HTML4.01Strictのみ掲載)

基本的に、すべてのインラインレベル要素は、このブロックレベル要素の中で配置されます。body要素直下に、インラインレベル要素と呼ばれるタグを配置することができません。

インラインレベル要素とは、通常の文字列と同等に扱われるもので、前後に改行や余白などを持っていません。

インラインレベル要素一覧

タグ機能
a アンカーと呼ばれ、リンク先を設定する
abbr 発音できない略語を示す(例:W3C)
acronym 発音できる略語(頭字語)を示す(例:NATO ナトーと発音)
b 強調文字(物理タグなので利用を控えましょう)
bdo テキストの表記方法の指定
bdo テキストの表記方法の指定
big 大きい文字(物理タグ)
br 強制改行の指定
button ボタンの設定
cite 引用元などの情報源の参照
code 短文のソースコードなどの出力結果の表示
dfn 削除された部分の設定(一般的に抹消線を表示する)
em 強調文字(一般的に斜体で表示する)
i 斜体文字(物理タグ)
img 静止画像の表示
input 入力フィールドの設定(フォーム以外の単独利用が可能)
kbd ユーザによって入力された文字を示す
label 入力フィールドにラベル情報を設定する
map イメージマップ機能を設定する
object 静止画や動画などのオブジェクトを表示する
q 短い引用文を表示する
s 抹消線を表示する(物理タグ)
samp プログラムなどのソースの表示
select プルダウンのメニュー項目の表示
span 汎用的に利用するインラインレベル要素
strike 抹消線を表示する(物理タグ)
strong 強調文字(一般的に太字で表示)
sub 下付き文字
sup 上付き文字
textarea テキストの入力領域の設定
tt テレタイプ文字(物理タグ)
u 下線付き文字(物理タグ)
var プログラムなどの変数や引数などを表す

(HTML4.01Strictのみ掲載)

コンテンツを表現する body要素には、こうした規則があることをしっかりと覚えてください。コンテンツは必ずブロックレベル要素内で配置されるということこそが、HTMLの論理的な文書構造を構築する第1歩です。

◆ XHTML1.1講座 --- コンテンツの配置 その2

コンテンツの位置は、通常 XHTML(HTML含む)の記述順に並べられます。ここでは、その並び順を無視した 「絶対位置」について解説します。

絶対位置

構文の記述順を無視して、指定した位置で表示させることを「絶対位置」と呼び、スタイルシートによって実現する表示方法です。

コンテンツの位置をどうしてもその位置でなければならない、というような場合に利用できる便利な設定です。

スタイルシートでは、position属性を利用します。なお、position属性の値には次のような機能を持っています。

position属性の値と機能一覧

機能
absolute 絶対位置の指定(ただし left、right を指定しなければならない)
static デフォルト値(記述順に相対的に表示する)
fixed 指定した位置に固定して表示、スクロールしてもその位置にとどまる

絶対位置を指定した場合、現在のブロック(ボックス)の1つ外側のブロックの絶対位置が指定されます。多くの場合、何らかのブロックレベル要素内で絶対位置を指定した場合、1つ外側とは body要素であることが多いようです。

言い換えれば、絶対位置を指定留守場合には、必ずブロックレベル要素内のある要素に対して行うということがいえるでしょう。

position属性のサンプル (一部ブラウザによっては表示に難があります。)



Valid XHTML 1.1! Copyright(C) 2002-2003 ばんばん banban@scollabo.com