質問: あいうえお strong:before { content: "「"; } strong:after { content: "」の写真"; } こういうふうな HTML と CSS を書けば、 「あいうえお」の写真 と表示されるかと思います。 「 」の写真 が自動的に挿入されるため、楽に HTML ソースを書けると思いついたのですが、この記述は文法上正しいでしょうか?
回答: >この記述は文法上正しいでしょうか? 何か誤解されているようですね。 文法と言うのは、HTMLもCSSでも同じです。機械的なもので、例えばHTMLですと、P要素はブロック要素でこれこれの要素内にしか存在し得なくて、内部にinline要素しか入れられないなどですし、CSSの場合はcontentプロパティは、擬似要素と組み合わせて内容を持つ要素に内容を追加する。・・などいうものです。よって文法的には誤りではありません。 一方、HTMLには文法以上に、HTMLは文書構造を示すように要素--タグ--を選択し、要素が足りなければidやclass名で文書構造を補完するというなどの基本があります。 例えばはブロック要素でその内部に最低ひとつのと、ゼロ個以上のを持てば、文法上は整合しますが!!!!、それをデザインのために使ってはならないというようなものです。 さて、あいうえおとは、この単語、ないし部分が重要!!というマークアップですから、文法上は整合していますが、『「あいうえお」の写真』と言うような場合、これがというマークアップで意味的によいかどうかは、私には分かりません。 strongでマークアップされていれば、検索エンジンなどの機械や誰が見ても、この部分は、この文書にとって「重要」な要素--部品--だと判断するでしょうが、それが正しいか否かは著者以外には判断できません。 普通はstrongというタイプセレクタに対しては行わないでしょう。なぜなら、他の本当の意味で重要で要素すべてにマッチしてしまいますから・・