其の23 アルファベットの大文字英単語に注意する | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて
タイトル画像

レベル上級其の23

アルファベットの大文字英単語に注意する


音声読み上げソフトは、アルファベットの大文字と小文字で言葉の読み上げ方式が異なっている。小文字は英単語として認識するが、大文字は英単語ではなく、ローマ字を1文字ずつ読み取ってしまうのだ。

このことから、何か特別な理由がない限り、アルファベットは基本的には小文字で書くようにするべきだ。どうしても、大文字を使いたい場合はCSSファイルで小文字を大文字表記に変更するのも手段のひとつなので覚えておきたい。

たとえば、表示させるテキストを英語「SITEMAP」などにしたいときは、大文字で入力してしまうと「エスアイティエムエーピー」と意味のわからない音声で読み上げられてしまう。ソース上では小文字で「sitemap」などと入力し、「text-transform:uppercase」を使用して大文字に変換させる処理が必要だ【1】【2】。

CSSソース
p{text-transform: uppercase;}

HTMLソース
< html >
< head >
< link rel="stylesheet" href="sample.css" type="text/css" >
< /head >
< body >
< p >sitemap< /p >
< /body >
< /html >
【1】ソースを上記のようにした。注目してほしいのはHTMLソース< p >タグの中にあるアルファベットだ。ここでは小文字で記述してある

【1】のソースをブラウザで表示
【2】上記ソースをブラウザで表示した例。ソース上では小文字で記述したのに、ブラウザではきちんと大文字で表示されている


お作法一覧へ
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在