制作者の活動(PR)。

堀北真希ちゃんのうさ耳キャラクタ。次ぎ
主な作品

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

好ましくないclass属性の当て方。

HTMLに於いて、クラス名を与えるclass属性はしばしば好ましくない使われ方をしているようです。

好ましくないclass属性の当て方・目次。

class属性の好ましくない値。

class属性(クラス名)はCSSでのセレクタに利用する事が出来ますが、その所為かスタイルを指定するためのものと誤解されている方も多いようです。

その結果、以下のようなクラス名を当てる方もいるようですが、好ましくはありません。

<p class="black_frame">降りたバスの前や後ろを横断するのは<strong class="red bold">非常に危険</strong>です。横断歩道を渡りましょう。</p>

この場合、バスを降りた際の危険な歩き方に対して注意を促すため、黒い枠線で囲んだ段落内に危険の文字を赤い太字で強調しようとして、このようなクラス名を与えておりますが、背景色を変えた場合、枠線や強調の文字の色などが却って目に留まり難くなる事が予想されます。

この場合、警告文ですので、以下のようにマークアップすると良いでしょう。

<p class="warning">降りたバスの前や後ろを横断するのは<strong class="danger">非常に危険</strong>です。横断歩道を渡りましょう。</p>

もう一つ例を挙げてみましょう。

<p>
    <img class="left" alt="" src="HORIKITA_Maki.JPG" width="320" height="480" />
    堀北真希ちゃんは昭和63年10月6日生まれのＢ型で、東京都清瀬市出身のアイドル女優です。
    (以下略)
    </p>

こちらの例は leftクラスを与えた<img>要素に対し、float: left;プロパティを当てる事で画像を左に寄せようとしているものですが、CSSに対応していない環境では何の事か分かりません。

この場合、(恐らく)堀北真希ちゃんの写真などを埋め込もうとしていると思われますので、それならば以下のようにマークアップすればよいでしょう。

<p>
    <img class="portrait" alt="" src="HORIKITA_Maki.JPG" width="320" height="480" />
    堀北真希ちゃんは昭和63年10月6日生まれのＢ型で、東京都清瀬市出身のアイドル女優です。
    (以下略)
    </p>

いずれにしても、クラス名は要素のタイプ或いは性格と言ったものを与えるようにしましょう。

表示スタイルそのものを論じている場合には。

しかし、例えば「赤い文字で書かれた場合…」などと言うように、表示スタイルそのものが話題になる場合は、当然そのスタイルがクラス名として相応しいものとなります。

表示スタイルをクラス名にするのは好ましくないとは言え、このようなケースでは表示スタイルをクラス名にした方が却って論理的な状況となっているからです。

言い換えると、杓子定規に表示スタイルをクラス名にする事を忌避しようとすれば、却って分かり難くなってしまうと言う状況であるからです。

そのような場合にはどうすれば良いでしょうか。

杓子定規にスタイルをクラス名にする事を避けて却って意味不明なクラス名にしなければならないのでしょうか。

以下に例を挙げて見ましょう。

表示スタイルそのものを論じた文書の例。

却ってナンセンスなクラス名を与えてしまった例。

既に閉鎖してしまいましたが、ウェブに目に優しいリソースを求むと言う文書がありました。

この文書では、作者が好ましくないと思った配色を実際に挙げて、それが何故良くないかを解説しているのですが、各例の解説の後にこんな事を言っておりました。

このサンプル集に割り当てられた究極的に如何しようもないクラス名を何とかしたい。

この文書の作者は余りにも杓子定規なところがあり、各例について、以下のような却ってナンセンスなクラス名を与えてしまっていたのです。

<h3>白の文字色に青の背景色</h3>
<p class="sample-one">一般的には良い方とされてゐる配色ですが、(以下略)</p>

<h3>赤の文字色にKの背景色</h3>
<p class="sample-two">Kの背景に明度が高い文字。(以下略)</p>

この文書に当てられたスタイルシートでは、実際にこれらのセレクタを与えられた<p>要素に対して、白の文字色に黒の背景色或いは赤の文字色に黒の背景色などと言ったスタイルが与えられておりました。

それ故、この文書の制作者はスタイルをクラス名に適用すべきでないと言う原則を愚かしくも杓子定規に墨守しようとしてこのような訳の分からないクラス名を与えてしまったのです。

ですが、配色そのものを話題にしているのに配色に関したクラス名を与えられないと言うのはもはや本末転倒ではないのでしょうか。

論理的な名前と言う考えにしても、配色が議論の対象になるならそれが論理的な名前になるのではないのでしょうか。

わざわざナンセンスな名前を付けなければならないのでしょうか。

この例での対処策。

確かに、例えば一番目について

と言うclass属性はスタイルそのものを表わしているようで好ましくないと思われるかも知れませんが、

とした場合はどうでしょうか。

これなら、白の前景色に青の背景色の場合と言う意味になり、該当する要素で言及している議題そのものとなり、問題はない筈です。

ちょっとクラス名が長過ぎる嫌いはありますが、少なくとも分かり易いのは確かでしょう。

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

ページ外へのご案内。

marguerite.site@gmail.com