Webサイト制作でよくある「日本語＋英語」の見出しレイアウト。
span要素を増やすほどでもないけれど、CSSだけで完結させたいそんな場面で使える方法です。
この記事では、
- data属性を使った見出しレイアウトの作り方
- before / after で表示順がどう決まるか
- data属性が本当に向いている用途
- SEO的に問題はないのか
を紹介します。
data属性＋擬似要素で作る見出しレイアウト
まずは実装例です。
HTML
<h2 data-en="News">お知らせ</h2>HTMLはとてもシンプルで、日本語の見出しだけを書き、英語はdata属性に持たせます。
CSS（::after を使う場合）
h2 {
font-size: 3rem;
}
h2::after {
content: attr(data-en);
display: block;
font-size: 1.4rem;
}この場合、表示は次の順番になります。
- 上：日本語（お知らせ）
- 下：英語（News）
CSS（::before を使う場合）
h2::before {
content: attr(data-en);
display: block;
font-size: 1.4rem;
}こちらは逆に、
- 上：英語（News）
- 下：日本語（お知らせ）
となります。
before / after を使い分けるだけで、表示順はコントロール可能です。
この方法のメリット
① HTMLをシンプルに保てる
<h2 data-en="News">お知らせ</h2>要素を増やさずに実装できるため、
- マークアップが読みやすい
- デザイン変更にも対応しやすい
というメリットがあります。
② クラスの増殖を防げる
英語見出し専用の span やクラスを増やさなくて済むため、 軽い装飾用途にはちょうどいい実装です。
③ data属性は「状態・分類」を表すのが得意
data属性は、もともと
- 種別
- 状態
- カテゴリー
といった意味情報を持たせる用途に向いています。
<li data-category="news">お知らせ</li>
<li data-category="event">イベント</li>
[data-category="news"] {
background-color: blue;
}
[data-category="event"] {
background-color: orange;
}この考え方を見出しにも応用している、という位置づけです。
ただし注意点もある
便利な方法ですが、万能ではありません。
SEO的にはどうなのか？
結論から言うと、
data属性＋擬似要素で表示したテキストは、SEO評価の対象にはなりません。
理由は、
- data属性の値はHTMLのテキストノードではない
- 擬似要素の文字はDOM上に存在しない
ためです。
つまり今回の例では、
- 「お知らせ」：SEO評価される
- 「News」：評価されない
という扱いになります。
この方法が向いているケース / 向いていないケース
向いている
- 英語表記は装飾的な意味合い
- SEO上は日本語を重視したい
- HTMLをできるだけシンプルにしたい
向いていない
- 英語キーワードでも検索流入を狙いたい
- 英語見出しにも意味を持たせたい
- アクセシビリティを強く意識する必要がある
この場合は、HTMLに両方書く方法を選ぶのが安全です。
まとめ
- data属性＋擬似要素で見出しレイアウトは作れる
- before / after で表示順はコントロールできる
- data属性は「装飾や状態」を表す用途に向いている
- SEOや意味を持たせたい文字はHTMLに書く
使いどころを理解していれば、 data属性はレイアウト実装の強い味方になります。
