見出しタグに日本語と英語を併記する場合のHTMLとCSSの書き方メモ

サイト作成をしているとたまに h2 や h3 の見出しタグに英字と日本語が併記されている場合があります。

そんな時、皆さんはどんなふうにコーディングされていらっしゃいますか？

<h2>
  <span class="ja">ニュース</span>
  <span class="en">News</span>
</h2>

こんな風に見出しタグの中に spanタグを入れて日本語と英語それぞれにCSSを充てる方法もあると思います。

今日は、擬似要素を使った方法をご紹介します。

擬似要素を使った英語と日本語の見出しタグの併記の仕方

今回紹介する方法は擬似要素を使った見出しタグの表示の仕方です。

コーディングとしては日本語が主で英語が飾りのような位置づけになります。

<h2 data-title="company">会社概要</h2>

HTMLはどのように描くかというと、title や data-title に英字表記を入力して、日本語は普通に見出しタグに入れます。

h2:before {
  content: attr( data-title );
}

CSSでは attr属性を使って title や data-title を呼び出します。

英字をすべて大文字にする場合は、text-transform を uppercase とします。

h2:before {
  content: attr( data-title );
  text-transform: uppercase;
}

英字の頭文字だけを大文字にしたい場合は、text-transform を capitalize とします。

h2:before{
  content: attr( data-title );
  text-transform: capitalize;
}

位置を変更するには見出しタグに position を relative とし、擬似要素に position を absolute として位置調整します。