制作者の活動(PR)。

アイドル女優・堀北真希ちゃんをうさぎ化した制作者の創作キャラクタ
主な堀北真希うさぎ収録作品

ソフトコンタクトレンズを入れる堀北真希うさぎのイラストとその場面を含んだ仮想TVコマーシャル動画〜昔のボシュロムの製品『オプティマ』のCM風に〜

その他の主なブロックレヴェル要素。

これまで、HTMLでのブロックレヴェル要素としては、

を解説して来ました。

しかし、HTMLで定義されているブロックレヴェル要素は他にも幾つかあり、その中には知っていると便利なものもあります。

ここでは、HTMLで初心者の段階を終えたら是非覚えておきたい便利なブロックレヴェル要素をご紹介します。

その他の主なブロックレヴェル要素・目次。

<address>要素…連絡先に関するブロック。

<address>要素は、連絡先に関する文章のブロックです。

多くの場合、<address>要素は文書のフッタ(一番下)に書かれるようです。

内容はインライン要素に限られております。

例えば、以下のようなマークアップが考えられます。

<address>お問い合わせは、<a href="mailto:ilovehorikita@uso800.ne.jp">ilovehorikita@uso800.ne.jp</a>まで。</address>

<pre>要素…整形済みテキスト。

<pre>要素は、整形済みテキスト、すなわち予め整形してあるテキストです。

具体的には、空白文字や改行などで行の位置を整形してあるテキストが、<pre>要素としてマークアップされます。

主な整形済みテキスト。

例えば、以下のものが整形済みテキストとなるでしょう。

コンピュータ言語の纏まったコード

分かり易くするため、適宜改行したり、行頭に空白文字で余白を取るなどの整形が行なわれます。

定型詩
しばしば改行や空白で整形されます。

また、当たり前ですが、HTMLには

等の要素が定義されておりますので、何でもかんでも整形済みテキストにするのはいけません。

整形済みテキストは、上記のような特別なテキストのみとしましょう。

整形済みテキストの扱い。

一般に、HTMLでは

つまり、テキスト内に改行が含まれていても、そこで改行される事はないし、空白を幾ら並べても一文字分の空白しか意味が無い事となります。

<pre>要素としてマークアップされたテキストについては、以下のような扱いとなります。

空白類をそのままにして良い

改行文字が含まれていたら、そこで改行しても良いし、また、空白が複数あればそれらをそのまま反映されても良いと言う事です。

テキストを等幅フォントにして良い

勿論、等幅フォントが無い環境もあり得ます。

途中で折返ししなくても良い

通常、行の端に達したら折返しをするものですが、<pre>要素のテキストは整形を維持するために敢えて折り返さず横スクロールを発生させても良い事とされております。

但し、アラビア語など右から書く言語の語句が入っている場合、整形済みテキストと言えどもそれらは正しく右から書かれるようにしなければなりません。

実際の<pre>要素のマークアップ。

実際に<pre>要素としてマークアップされた例です。

<pre>田子の浦ゆ
   うち出でてみれば 真白にそ
       富士の高嶺に 雪は降りける</pre>

<pre>要素についての注意事項。

<pre>要素の内容の制限

<pre>要素の内容となる整形済みテキストには、以下の要素は入れられません(ここまでで解説しているもののみ挙げております)。

これらの要素が含まれると折角の整形が崩れてしまうからです。

整形済みテキストは濫用しない事

空白文字や改行で整形するのは、それが必然性を持つ場合のみ行なわれるべきです。

通常の段落やリストなどを整形済みテキストにするのはやめましょう。

水平タブは使わない事

特にコンピュータ言語のコードでは水平タブで整形しているものが多いのですが、水平タブはウェブブラウザに依って実装がまちまちですので、思い通りに取扱われない場合があります。

適切な個数の半角空白に置き換えて整形しましょう。

整形済みでも文字参照にすべき記号の処理を忘れずに

特にコンピュータ言語のコードを整形する場合、<や>が記述される事が多いですが、これらの文字は整形済みテキストと言えども文字参照にしなければなりません。

<hr>要素…横罫線。

<hr>要素は、横に引かれる罫線です。

<hr>要素は内容となるテキストを持ち得ない空要素です。

また、<hr>要素は視覚効果をもたらす要素(物理要素)なので、好ましくないと言う意見もありますが、論理的な区切りと言う意味を持たせて用いる事もあります。

実際に<hr>要素を用いた例です。

<body>

    (本文)

    <hr />
    <address>Copyright (C)2009 uso800.uso <a href="mailto:usotsuki@uso800.uso">usotsuki@uso800.uso</a></address>
    </body>

ここでは、文書の本文と文書のフッタ(クレジットが入っている)の区切りに<hr>要素を用いたものとしております。

<div>要素…グループ化されたブロックレヴェル要素。

<div>要素は、グループ化されたブロックレヴェル要素です。

実際に<div>要素としてマークアップされた例です。

<div class="section">
    <p>主な女性アイドルには以下のものが挙げられます。</p>
    <ul>
        <li>堀北真希</li>
        <li>新垣由衣</li>
        <li>榮倉奈々</li>
        <li>長澤まさみ</li>
        <li>仲間由紀恵</li>
        <li>上戸彩</li>
        </ul>
    <p>制作者は特に堀北真希ちゃんが好きです。</p>
    </div>

前後のページ。

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

ページ外へのご案内。

marguerite.site@gmail.com