制作者の活動(PR)。

堀北真希ちゃんがモデルのうさぎ化キャラクタ
主な堀北真希うさぎ収録作品

堀北真希ちゃんがボシュロム社ソフトコンタクト用品TVコマーシャルに出演した事に因んだ、コンタクトレンズを着けている堀北真希うさぎ(うさ耳女子大生)のイラストと仮想CM動画

HTML文書への画像の埋め込み。

人に依っては、ウェブで画像を公開したいと言う方もいるでしょう。

ここでは、画像をHTML文書に埋め込む方法を解説します。

HTML文書への画像の埋め込み・目次。

HTML文書に画像を埋め込む際し、特に注意したい事。

HTMLはどんな環境でも利用出来る電子文書を作るための言語です。

従って、画像が見られない場合でも、画像の内容が理解出来るようにする必要があります。

映像出力, 音声出力, 点字出力など、どんな環境でも情報として利用出来るのはテキストだけです。

従って、画像を埋め込む場合には適切な代替テキストも併せて記述する必要があると言う事になります。

HTML文書に埋め込める画像。

HTML文書に埋め込める画像についての詳細は、ウェブ文書に埋め込める画像についてにて解説しておきましたので、そちらをご覧下さい。

実際の画像の埋め込み。

実際にマークアップしてみるテキストと埋め込む画像。

ここでは、リストのマークアップでマークアップした文書に画像を埋め込むものとして話を進めて行きましょう。

◎■HTMLについて。
●HTMLとは。
HTMLはウェブで公開する電子文書を作る為の言語です。
HTMLはW3C(ワールドワイドウェブコンソーシアム)に依って標準規格化されております。

●HTMLの特徴。
HTMLの特徴は
・画像を埋め込める
・文字の色など表示方法を指定出来る
ではありません。
確かに画像を埋め込んだりする事も可能です。
■
しかし、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。
HTMLの最大の特徴は
・ハイパーリンクが使える
・どんな環境でも読めるようになっている
この二点に尽きます。

ここで埋め込む画像は、以下の二種類です。

HTML文書に埋め込まれる"HTMLについて。"と言うロゴ画像

HTMLについてと言うテキストの代わりにこの画像を埋め込みます。

実際にHTML文書に埋め込む事となっている画像
堀北真希ちゃんをモデルにした制作者の創作キャラクタ・うさ耳女子大生を描いたGIF画像(幅218ピクセルズ、高さ269ピクセルズ)

<img>要素…埋め込み画像。

HTMLでは埋め込み画像は<img>要素として定義されております。

詳細は<img>要素についてをご覧いただく事として、ここでは先ず抑えておきたい二点について書いておきます。

必ず適切な代替テキストを決める

alt属性に何を記述すべきかでも書いておりますが、<img>要素には必ず適切な代替テキストを当てる事とされております。

たとえ代替テキストを空文字列にすべき場合であっても、alt属性は必ず書く事となります。

<img>要素は何らかのブロックレヴェル要素とする必要がある

<img>要素はインライン要素ですので、当然何らかのブロックレヴェル要素内に埋め込まれなければなりません。

見出しや段落の中に埋め込まれた画像であれば、他のテキストとまとめて <h○>要素なり<p>要素なりとしてマークアップされる筈です。

しかし、見出しや通常の段落には埋め込まれ得ない画像についても、何らかの形でブロックレヴェル要素としてマークアップされなければなりません。

その方法についてはHTMLマークアップ案内の画像に関するマークアップで解説しておりますが、ここでは取敢えず画像が並んだリストとしてマークアップする事とします。

実際のマークアップ。

画像は埋め込まれるべきものですので、先ず題名を決めたらすぐにマークアップしてしまいましょう。

先ず、題名を与えた直後は以下のようになっているでしょう。

<title>HTMLとは何か</title>
◎■HTMLについて。
●HTMLとは。
HTMLはウェブで公開する電子文書を作る為の言語です。
HTMLはW3C(ワールドワイドウェブコンソーシアム)に依って標準規格化されております。

●HTMLの特徴。
HTMLの特徴は
・画像を埋め込める
・文字の色など表示方法を指定出来る
ではありません。
確かに画像を埋め込んだりする事も可能です。
■
しかし、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。
HTMLの最大の特徴は
・ハイパーリンクが使える
・どんな環境でも読めるようになっている
この二点に尽きます。

これから、このテキスト中の二箇所(■で示されている箇所)に画像を埋め込む訳です。

順番に説明しましょう。

一番目の画像について。

先ず一番目の画像についてですが、埋め込みたい画像は以下のとおりです。

それでは、この画像の代替テキストはどうすれば良いでしょうか。

このテキストはHTMLについて。と言うテキストの代わりに埋め込むロゴです。

その事を考えると、当然画像に描かれている文字或いは置き換えられるテキストをそのまま代替文字列にすれば良い事になります。

そこで、一番目の画像は以下のようになるでしょう。

<title>HTMLとは何か</title>
◎<img alt="HTMLについて。" src="Logo.GIF" width="340" height="60" />
●HTMLとは。
(以下略)

二番目の画像について。

続いて二番目の画像ですが、埋め込みたい画像は以下のものです。

それでは、この画像の代替テキストについて考えてみましょう。

マークアップされるテキストをご覧になればお分かりかと存じますが、この画像は文章の流れと無関係に埋め込まれております。

従って、ここに代替テキストを入れてしまうと却って分からなくなる恐れがあります。

つまり、この画像の代替テキストは空文字列が正しいと言う事になります。

但し、alt属性は仮令空文字列であっても明記しなければなりません。

結局、二番目の画像は以下のようになるでしょう。

<title>HTMLとは何か</title>
◎<img alt="HTMLについて。" src="Logo.GIF" width="340" height="269" />
●HTMLとは。
HTMLはウェブで公開する電子文書を作る為の言語です。
HTMLはW3C(ワールドワイドウェブコンソーシアム)に依って標準規格化されております。

●HTMLの特徴。
HTMLの特徴は
・画像を埋め込める
・文字の色など表示方法を指定出来る
ではありません。
確かに画像を埋め込んだりする事も可能です。
<img alt="" src="HorikitaUsagi.GIF" width="218" height="269" />
しかし、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。
HTMLの最大の特徴は
・ハイパーリンクが使える
・どんな環境でも読めるようになっている
この二点に尽きます。

このあとのマークアップ。

この後は順次見出しや段落をマークアップしていけば良い訳です。

一番目の画像のマークアップ。

一番目の画像は大見出しとなっているので、そのまま第一等級見出しすなわち<h1>要素としてマークアップすれば良いでしょう。

つまり、以下のようにマークアップすれば良い事になります。

<title>HTMLとは何か</title>
<h1><img alt="HTMLについて。" src="Logo.GIF" width="340" height="60" /></h1>
●HTMLとは。
(以下略)

二番目の画像のマークアップ。

一方、二番目の画像が入るべきブロックは無意味に画像が一枚あるだけのもので、どちらかと言えば通常の段落とは異なったブロックと考えられます。

しかしながら、HTMLには画像と言うブロックレヴェル要素は定義されていないので、取敢えず画像が並んだリストとしてマークアップする事にします。

ただそうするにしても、普通のリストと全く同じものと言う訳でもないので、画像を収めたリストと言う事で当該リストには class="images"属性で images と言うクラス名を与えておきましょう。

<title>HTMLとは何か</title>
<h1><img alt="HTMLについて。" src="Logo.GIF" width="340" height="60" /></h1>
<h2>HTMLとは。</h2>

<p>HTMLはウェブで公開する電子文書を作る為の言語です。</p>
<p>HTMLはW3C(ワールドワイドウェブコンソーシアム)に依って標準規格化されております。</p>

<h2>HTMLの特徴。</h2>
<p>HTMLの特徴は</p>
<ul>
    <li>画像を埋め込める</li>
    <li>文字の色など表示方法を指定出来る</li>
    </ul>
<p>ではありません。</p>
<p>確かに画像を埋め込んだりする事も可能です。</p>
<ul class="images">
    <li><img alt="" src="HorikitaUsagi.GIF" width="218" height="269" /></li>
    </ul>
(以下略)

最終的なマークアップ。

その後、必要なマークアップを一通り終えると、以下のようになるでしょう。

<title>HTMLとは何か</title>
<h1><img alt="HTMLについて。" src="Logo.GIF" width="340" height="60" /></h1>
<h2>HTMLとは。</h2>

<p>HTMLはウェブで公開する電子文書を作る為の言語です。</p>
<p>HTMLは<a href="http://www.w3.org">W3C(ワールドワイドウェブコンソーシアム)</a>に依って標準規格化されております。</p>

<h2>HTMLの特徴。</h2>
<p>HTMLの特徴は</p>
<ul>
    <li>画像を埋め込める</li>
    <li>文字の色など表示方法を指定出来る</li>
    </ul>
<p>ではありません。</p>
<p>確かに画像を埋め込んだりする事も可能です。</p>
<ul class="images">
    <li><img alt="" src="HorikitaUsagi.GIF" width="218" height="269" /></li>
    </ul>
<p>しかし、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。</p>
<p>HTMLの最大の特徴は</p>
<ul>
    <li>ハイパーリンクが使える</li>
    <li>どんな環境でも読めるようになっている</li>
    </ul>
<p>この二点に尽きます。</p>

このマークアップされたテキストをHTML文書にすると、以下のようになる筈です。

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
        <title>HTMLとは何か</title>
        </head>

    <body>
        <h1><img alt="HTMLについて。" src="Logo.GIF" width="340" height="60" /></h1>
        <h2>HTMLとは。</h2>
        <p>HTMLはウェブで公開する電子文書を作る為の言語です。</p>
        <p>HTMLは<a href="http://www.w3.org">W3C(ワールドワイドウェブコンソーシアム)</a>に依って標準規格化されております。</p>

        <h2>HTMLの特徴。</h2>
        <p>HTMLの特徴は</p>
        <ul>
            <li>画像を埋め込める</li>
            <li>文字の色など表示方法を指定出来る</li>
            </ul>
        <p>ではありません。</p>
        <p>確かに画像を埋め込んだりする事も可能です。</p>
        <ul class="images">
            <li><img alt="" src="HorikitaUsagi.GIF" width="218" height="269" /></li>
            </ul>
        <p>しかし、表示方法は寧ろ指定しない事こそ本来のHTMLの在り方です。</p>
        <p>HTMLの最大の特徴は</p>
        <ul>
            <li>ハイパーリンクが使える</li>
            <li>どんな環境でも読めるようになっている</li>
            </ul>
        <p>この二点に尽きます。</p>
        </body>
    </html>

今回はいろいろ考えながらマークアップしておりますが、本来便利なウェブ文書にするにはこのようにいろいろ考えてやらなければならないものです。

前後のページ。

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

ページ外へのご案内。

marguerite.site@gmail.com