LoginSignup
4

More than 5 years have passed since last update.

text-transformで文頭だけ大文字にするときのCSSメモ

Last updated at Posted at 2018-04-11

英文の先頭だけ大文字で、他は小文字にする場合のCSSでのやり方を質問されて、
text-transform で一発やんけと思ったけど、そうでも無く考えさせられたのでメモ。 (後半ポエム)

text-transform とは

HTMLに記述されている英文の表示を、大文字/小文字を指定するためのCSSプロパティです。

元ソース(html)
<h1>May the FORCE be with you.</h1>
CSS 意味 表示
h1 { text-transform: none; } 記述そのまま May the FORCE be with you.
h1 { text-transform: uppercase; } すべて大文字 MAY THE FORCE BE WITH YOU.
h1 { text-transform: lowercase; } すべて小文字 may the force be with you.
h1 { text-transform: capitalize; } 単語の先頭だけ大文字 May The Force Be With You.

文頭だけ大文字にするには?

text-transform: capitalize; だと、文中の各単語の頭文字が大文字になってしまう。
冒頭の「文の先頭だけ大文字にする」には以下のようにする。

css
h1 { 
  text-transform: lowercase;   /* 全体を小文字にリセット */
}

h1::first-letter {
  text-transform: capitalize;  /* 先頭文字だけ大文字化 */
}

まず当該のセレクタ全体に対し、 lowercase で全体を小文字にリセットし、 ::first-letter 疑似要素で先頭だけ capitalize する。

CSS 意味 表示
上記 文頭の1文字だけ大文字 May the force be with you.

text-transform::first-letter は、ほとんどのブラウザでサポートされているが、 IE8以前のIEではCSS2時代のシングルコロンの疑似クラスしか受けつけないので注意。

考察

1. 手法の妥当性

上述の通り text-transform を使用して大文字/小文字表示のある程度のコントロールは効く。
しかしこの手段は「どうしても」という時に使う程度に考えておき、
実際表示されたい様にHTMLにもともと記述するのが本来的であると考える。

※ 例えば、上記の方法だと 「I AM SAM.」 の場合に 「I am sam.」 となってしまい、期待値の 「I am Sam.」が実現できない。

2. セマンティクス(意味性)

次にこの手法がアクセシビリティやセマンティクスの面でHTMLの品質に与える影響を考える。

F2: 達成基準 1.3.1 の失敗例 - 適切なマークアップ又はテキストを用いずに、テキストの見た目の表現の変化を用いて情報を伝えている | WCAG 2.0 達成方法集
https://waic.jp/docs/WCAG-TECHS/F2.html

上のページの「失敗例3」では、強調するために span class="yell" などのマークアップをし、text-transform を使用している例があるが、このように強調目的で表現する場合には strongem など「強調」というセマンティクス(意味性)を持つタグでマークアップする方がHTML5としては本来的だ。

3. アクセシビリティ

次にアクセシビリティの観点でこの手法がいいのかを考えてみた。

コードとして

CSSで文字情報の内容や見た目を操作するもの(例えば ::before 擬似要素に content プロパティでテキストを出力するような方法) は、感覚的にアクセシビリティ的によろしくないのかな、と思い込んでいたが、以下を読む限りそうではなさそう。

C22: テキストの視覚的な表現を制御するために、CSS を使用する | WCAG 2.0 達成方法集
https://waic.jp/docs/WCAG-TECHS/C22.html

※もちろん ↑の content の例は言語に依存したテキスト情報をCSS側にハードコードするという点でメンテナブルではなく、HTML/CSSの棲み分けとしても気持ちがわるい。
(そういう場合は自分だったら content: attr("data-***"); とかで情報をHTML側に集約させるとか?)

可読性として

というかアクセシビリティという点で言えば、「可読性」(読みやすさ) がそもそもの論点か。
大文字の方が読みやすい(例えば略語など)で、局所的に uppercase をかけるというなら妥当かと思うが、
であればもともとHTMLにそのように記述するのがやはり本来的。

音声リーダー対応

強調ないし装飾の目的でHTML上、全てを大文字に記述してしまうと、音声リーダーの読上げが期待値通りにならないという点も紹介されていた。

NG
<span>FORCE</span>       <!-- 読上げ "エフオーアールシーイ―" -->
OK
<span>Force</span>       <!-- 読上げ "フォース" -->

この問題を回避する場合、CSS側で見た目上 uppercaseにする方法が妥当。

<span style="text-transform:uppercase">Force</span>

↑の方法であれば視覚的に 「FORCE」と表示し、音声リーダーは「フォース」と読んでくれる。

参考
アクセシビリティガイドライン > 39. ユーザーが一般的に理解できる外来語・外国語を除き、外国語を必要以上に用いない... : 三井住友銀行
http://www.smbc.co.jp/accessibility/guidelines/guideline_39.html

まとめると、特段意味がなく装飾だけの目的で大文字/小文字のCSS操作をする際には、視覚的に読みづらくなってないかを考慮し、する場合は音声リーダのことも考えると良い。というところか。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4