before / after 疑似要素の使い方

質問

<strong>あいうえお</strong>

strong:before { content: "「"; }
strong:after { content: "」の写真"; }

　こういうふうな HTML と CSS を書けば、
　　「あいうえお」の写真
と表示されるかと思います。

　「　　」の写真　が自動的に挿入されるため、楽に HTML ソースを書けると思いついたのですが、この記述は文法上正しいでしょうか？

回答No.1

ORUKA1951 · ベストアンサー

＞この記述は文法上正しいでしょうか？
　何か誤解されているようですね。
　文法と言うのは、HTMLもCSSでも同じです。機械的なもので、例えばHTMLですと、P要素はブロック要素でこれこれの要素内にしか存在し得なくて、内部にinline要素しか入れられないなどですし、CSSの場合はcontentプロパティは、擬似要素と組み合わせて内容を持つ要素に内容を追加する。・・などいうものです。よって文法的には誤りではありません。

　一方、HTMLには文法以上に、HTMLは文書構造を示すように要素--タグ--を選択し、要素が足りなければidやclass名で文書構造を補完するというなどの基本があります。
　例えば<table>はブロック要素でその内部に最低ひとつの<tbody>と、ゼロ個以上の<caption><thead><tfoote>を持てば、文法上は整合しますが!!!!、それをデザインのために使ってはならないというようなものです。

　さて、<strong>あいうえお</strong>とは、この単語、ないし部分が重要!!というマークアップですから、文法上は整合していますが、『「あいうえお」の写真』と言うような場合、これが<strong>というマークアップで意味的によいかどうかは、私には分かりません。
　strongでマークアップされていれば、検索エンジンなどの機械や誰が見ても、この部分は、この文書にとって「重要」な要素--部品--だと判断するでしょうが、それが正しいか否かは著者以外には判断できません。

　普通はstrongというタイプセレクタに対しては行わないでしょう。なぜなら、他の本当の意味で重要で<strong>要素すべてにマッチしてしまいますから・・

お礼

ご回答ありがとうございます。

自分でも調べてみると、擬似要素で挿入された文章はソースに表示されないようです。これだと不親切なので、記号などの挿入にとどめたほうがいいのかもしれません。

ありがとうございました。

回答No.2

ORUKA1951

＞擬似要素で挿入された文章はソースに表示されないようです。これだと不親切なので、記号などの挿入にとどめたほうがいいのかもしれません。
　いえ、逆です。ソースにはわざわざ入れたくないが、ユーザーエージェントによっては別の内容を加えたいときなどに使用するものです。
　視覚系ブラウザについては"!"の画像を入れる。スクリーンリーダーには、前後に余韻を入れる。プリンターには太字でアンダーラインを入れるなど・・
例えば、
@media screen{
　　div.section p strong{
　　　　text-decoration:none;
　　　　color:red;font-weight:bold;
　　　　position:relative;
　　}
　　div.section p strong:after{
　　　　content:"!";color:red;
　　　　position:absolute;
　　　　top:-1em;right:-0.5em;
　　}
}
@media aural{
　　div.section p strong{
　　　　pause-before:1s;
　　　　pause-after:1s;
　　　　volume:loud;
　　}
}
@media print{
　　div.section p strong{
　　　　font-weight:bold;
　　　　text-decoration:underline;
　　　　color:inherit;
　　}
}
とか、本来HTMLソースにあったほうが良い物はソースに書きますが、ないほうがよい物は書かない。例えばSTRONG要素の前後に「」なんてないほうが良いのは明白です。スクリーンリーダーや印刷、あるいは検索エンジンには、無いほうがよいですよね。
・スクリーンリーダーが、"かっこ開く　ここは重要 カッコ閉じる"なんて読んだら困ります。
・検索エンジンが、「ここは重要です」ではマッチしません。

　HTMLには文書構造しか書かない。装飾的なもの--特にユーザーエージェントごとに違う---は、HTMLには書かないのが望ましいのです。言い換えると、ユーザーエージェントに依存してその要素の内容に何かを追加したいときには使いましょう。
[例]
<div class="nav">
　<ol>
　　<li><a href="/Top">トップ</a></li>
　　<li><a href="/Products">製品</a></li>
に対して、印刷用スタイルシートでは、
div.nav ol li a:after{
　　content:"\A　　　　( http://hoge.com"attr(href)")";
　　white-space:pre;
　　color:inherit;
}
とかはよく使うのじゃないでしょうか？？

お礼

ありがとうございました。