制作者の活動(PR)。

堀北真希ちゃんにうさぎの耳を付けたら可愛いだろうなと思って作った創作キャラクタ
主な作品

人気女優をモデルにした制作者の創作キャラクタを用いた作品の一例

画像に関するマークアップ。

HTMLに於いて、画像である<img>要素はインライン要素なので何らかのブロックレヴェル要素に入れる必要があります。

画像に関するマークアップ・目次。

はじめに。

HTMLでは、画像埋め込みである<img>要素はインライン要素です。

従って、文章中に埋め込まれる画像でなければ、何らかのブロックレヴェル要素にしなければなりません。

それにはどうすれば良いでしょうか。

普通の段落とする。

画像に代替文字列があり、それで一つの段落と出来るのであれば、何も考える必要はありません。

通常のテキスト段落同様、<p>要素にしてしまうのが最も順当です。

例えば、

<p>
    <img alt="その日の○○公園にはコスモスの花が咲き乱れていた。" src="Cosmos.JPG" width="320" height="240" />
    </p>

とマークアップすれば、グラフィカルでない環境ではalt属性値の内容を持つ段落として扱われます。

代替文字列が空の場合には、段落としていいのかどうかは判断が分かれるかも知れません。

ただ、その画像が直後の段落と密接に関係があるのであれば、その段落の中に入れてしまってもいいでしょう。

<p>
    <img alt="" src="Cosmos.JPG" width="320" height="240" />
    秋の○○公園は(以下略)
    </p>

<div>要素でマークアップする。

段落などに組み込めない画像については、汎用ブロックレヴェル要素<div>要素にしてしまうと言うのが最も単純な方法です。

例えば、

<div class="images">
    <img alt="" src="Cosmos.JPG" width="320" height="240" />
    </div>

とマークアップするだけで、画像を簡単に埋め込めます。

ただ、このマークアップは余りにも安易な方法のため、この方法を強く否定する向きもあります。

リストにする。

そのため、<div>要素での画像マークアップを否定する向きでは画像をリスト項目としてリストにしてしまうと言う方法が好まれるようです。

リストは通常の見出しや段落とは異なる特別なブロックをマークアップする要素としてもしばしば用いられるからです。

独立した画像は順不同リスト(<ul>要素)にする。

説明文などが無い独立した画像なら<ul>要素内に画像を入れれば良いでしょう。

但し、<ul>要素の直下に<img>要素は入れられないので、<img>要素を<li>要素とします。

具体的には、以下のようにマークアップします。

<ul class="images">
    <li><img alt="" src="Cosmos.JPG" width="320" height="240" /></li>
    </ul>

説明文があるなら定義リスト(<dl>要素)にする。

ギャラリーなどで画像に対して説明文をつけたいと言うのであれば、定義リスト(<dl>要素)にするのが最も自然なマークアップと言えるでしょう。

この場合、

とそれぞれマークアップされます。

具体的には、以下のようにマークアップします。

<dl class="images">
    <dt><img alt="" src="Cosmos.JPG" width="320" height="240" /></dt>
    <dd>
        平成19年11月 5日の○○公園での一場面です。コスモスの花が咲き乱れていて…(以下略)
        </dd>
    </dl>

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com