制作者の活動(PR)。

<ins>要素なり<del>要素なりが、<p>要素や<h○>要素などのように直下にブロックレヴェル要素を含み得ない要素の子孫であれば、直ちにインライン要素と判断出来ます。しかしながら、一般のブロックレヴェル要素はその様な制約は仮定出来ません。
また、<ins>要素なり<del>要素なりが、<body>要素の直下や<blockquote>要素及び<form>要素など、直下にブロックレヴェル要素以外を含み得ない要素の直下であれば直下セレクタでブロックレヴェル式のスタイル定義が可能になります。しかしながら、某最大手ブラウザが直下セレクタを認識しない事を忘れてはいけません。
以上の問題を解決したとしても、<div>要素など直下に含む内容が自由な要素では、判断させる事は困難です。

結局、<ins>要素なり<del>要素なりがブロックレヴェル要素なのか、それともインライン要素なのかを的確に見分ける事が出来ない事が問題と言う訳です。

問題は、<ins>要素なり<del>要素なりが、文法上自由過ぎると言うところにあると思われます。

好ましいマークアップ作法。

▲記事先頭
△前項目
▽次項目

特に、ブロックレヴェル要素として扱う場合に、直下に何を入れても良いと言うのはどうかと思っております。

<ins>要素と<del>要素はあくまでも編集した箇所をマークアップする要素であり、それ以上のブロックレヴェル要素としての意味は無いので、<ins>要素なり<del>要素なりの開始・終了タグを記述していない状態でも文法上問題の無い記述にすべきでしょう。

すなわち、<ins>要素なり<del>要素なりをブロックレヴェル要素として用いる場合は、その直下は全てブロックレヴェル要素とするのが順当でしょう。

例えば、以下のような記述は好ましくありません。

<p>武蔵の国は、現在の埼玉県と東京都に当たります。</p>
<ins>実際には神奈川県の一部も含まれます。</ins>

このような記述を心がけるべきでしょう。

<p>武蔵の国は、現在の埼玉県と東京都に当たります。</p>
<ins><p>実際には神奈川県の一部も含まれます。</p></ins>

<p>武蔵の国は、現在の埼玉県と東京都に当たります。<ins>実際には神奈川県の一部も含まれます。</ins></p>

前者は新たに<p>要素として実際には…含まれます。というテキストを追加しております。

後者は、元の<p>要素の内容(すなわちインライン要素)に実際には…含まれます。というテキストを追加したものです。

仕様書にはどう書いてある？

▲記事先頭
△前項目
▽次項目

HTML 4.01仕様書に依れば、以下のように書いてあります。

These two elements are unusual for HTML in that they may serve as either block-level or inline elements (but not both). They may contain one or more words within a paragraph or contain one or more block-level elements such as paragraphs, lists and tables.

該当箇所は、HTML 4.01仕様書・邦訳版には

この2要素は、HTMLの常識に反し、ブロックレベル要素としてもインライン要素としても機能する(同時にはならない)。段落中の1つ以上の語を含むこともできるし、段落やリスト、表など1つ以上のブロックレベル要素を含むこともできる。

とあります。

原文・邦訳とも見た限りでは、これらの記述には「ブロックレヴェル要素として用いる場合には」とか「インライン要素として用いる場合には」と言うような但し書きは全く含まれておりません。

このため、制作者はブロックレヴェル要素として用いる場合、生テキストなどのインライン要素を直下に含めても構わないと解釈しております。

或いは、生テキストなどは匿名ブロックとして扱うか？

ただ、その様な記述はすべきで無いと考えております。

ISO-HTMLの場合。

▲記事先頭
△前項目
▽次項目

ISO-HTMLのDTDでは、ブロックレヴェル要素にもインライン要素にもなる一方で、ブロックレヴェル要素を含んではいけない事になっております(詳細はISO/IEC 15445:2000 (ISO-HTML)の書式についてをご覧下さい)。

従って、上記の記述作法はISO-HTMLでは不当になってしまいます。

ISO-HTMLで記述する場合は、ISO/IEC 15445:2000 (ISO-HTML)の書式についてにも書かれているように、常にインライン要素として用いるのが妥当ではないかと思います。

CSSでの記述について。

▲記事先頭
△前項目
▽次項目

上記の指針に従ってマークアップすれば、CSSスタイル定義ファイルでのスタイル定義もより容易になります。

具体的には、

ブロックレヴェル要素を直下に含んでいる場合は、ブロックレヴェル要素として扱い、
そうでなければインライン要素として扱う。

とすれば良いからです。

但し、内容セレクタ(セレクタの内容によって判断するセレクタ)とでも言うようなセレクタは存在しないので、記述を工夫する事で解決させます。

具体的には、以下のようにすればよいでしょう。

1. インライン扱いでの<ins>要素なり<del>要素なりのスタイルをまず定義する。

2. この後にブロックレヴェル要素の基本となるスタイルを定義する。

<p>要素や<h○>要素などのスタイルをここで定義します。

このとき、ここで定義されたブロックレヴェル要素を下位に含んだ<ins>要素なり<del>要素なりは、始めに定義しているスタイルが上書きされてしまっている可能性がある事に注意して下さい。

3. 最後にブロックレヴェル要素扱いでの<ins>要素なり<del>要素なり固有のスタイルを再度定義する。

ブロックレヴェル要素のスタイル定義によって、始めに定義している<ins>要素なり<del>要素なりのスタイル定義が上書きされているので、改めて定義し直します。

インライン要素として用いる場合は、始めに定義したプロパティは、ここで定義したブロックレヴェル要素で上書きされていないため、引続き有効です。

具体的には「ins * { … }」などで下位要素のスタイルを上書きします。

この場合、<ins>要素なり<del>要素なりに内包されるインライン要素も上書きされますので、上書きになっても困らないような基本的なスタイルのみを定義する事になります。

具体的な実例(平成16年10月20日)。

▲記事先頭
△前項目

実際に、<ins>要素と<del>要素に適切なスタイルを当てる場合のパターンを挙げて見ましょう。

ここでは、当サイトが現在利用しているスタイル、すなわち

<ins>要素には背景を薄緑色にして、その他の色・フォント操作・文字装飾は行わない。
<del>要素には抹消線を引き、その他の色・フォント操作・文字装飾は行わない。

というスタイルを適用させます。

以下、ソースです。

/*
インライン要素として用いる、<ins>/<del>要素のスタイル。
※インライン要素扱いの<ins>/<del>要素には、このスタイルが適用される。
*/
ins {
    text-decoration: none;
    font: inherit;
    line-height: 100%;
    background: #efe;           /* <ins>要素の固有のスタイル。 */
    }

del {
    text-decoration: line-through;      /* <del>要素の固有のスタイル。 */
    font: inherit;
    line-height: 100%;
    }

/* 
<del>要素の下位に<ins>要素が入っている場合、
<ins>要素のスタイル定義で抹消線が消されてしまうので、
改めてこのような入れ子関係になっている場合は抹消線を引くようにする。
*/
del ins {
    text-decoration: line-through;
    }

/*
ブロックレヴェル要素の基礎スタイル。
※始めの<ins>/<del>要素でのスタイル定義は、
ここで上書きされる可能性がある。
*/
address, blockquote,
div, dl, fieldset, form, legend,
h1, h2, h3, h4, h5, h6, hr,
menu, ol, p, pre, ul {
    color: #000;
    background: transparent;    /* <ins>要素のスタイルが上書きされた。 */
    font: normal normal 100% monospace;
    line-height: 160%;
    text-align: left;
    text-decoration :none;      /* <del>要素のスタイルが上書きされた。 */
    margin: 1em 1em;
    padding: 0;
    text-indent: 0;
    }

li {
    color: #000;
    background: transparent;    /* <ins>要素のスタイルが上書きされた。 */
    line-height: 160%;
    }

dt, dd {
    color: #000;
    background: transparent;    /* <ins>要素のスタイルが上書きされた。 */
    line-height: 160%;
    }

/*
ブロックレヴェル要素としての<ins>/<del>要素のスタイル。
※一般のブロックレヴェル要素でのスタイル定義で上書きされた可能性がある
<ins>/<del>固有のスタイルを再定義。
*/
ins * {
    text-decoration: inherit;
    background: #efe;
    }

del * {
    text-decoration: line-through;
    background: transparent;
    }

ソースは以上です。

この頁の本文はここまでです(本文の先頭へ)

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

ページ外へのご案内。

marguerite.site@gmail.com