制作者の活動(PR)。

アイドル・堀北真希ちゃんはうさぎの耳が似合うと思って作った制作者の創作キャラクタ
主な作品

制作者の創作キャラクタを用いたイラストの一例とアニメーション動画

顔文字などの文字絵を使いたい場合。

CSSの基本的な小技として、顔文字などの文字絵を使いたい場合のスタイル上の問題点と対策です。

顔文字などの文字絵(アスキィアート)はアクセシビリティの点で問題があるものですが、その問題をなるべく小さなものにするためにも覚えておきたいものです。

顔文字などの文字絵を使いたい場合・目次。

顔文字などの文字絵での問題点。

本来、顔文字などの文字絵(アスキィアート)はウェブでは使ってはいけないものとされております。

音声ブラウザなどで意味を読み上げられないのが大きな理由でしょう。

とは言うものの、やはり使いたいと言う方もいるかも知れません。

そこで、なるべく問題の起こり難い方法を考えて見ましょう。

インラインの文字絵とブロックレヴェルの文字絵。

文字絵と言っても、インラインの文字絵とブロックレヴェルとなる文字絵があると考えられます。

いわゆる顔文字は、二行以上に跨らない限り、インラインと考えられます。

インラインの文字絵での問題をなるべく少なくするには。

インラインの文字絵では何が問題か。

顔文字などのインラインの文字絵の場合、問題になるのは以下の二点です。

問題点 1. 全ての環境で意味が伝わるとは限らない。

前者の全ての環境で意味が伝わるとは限らない問題は、文字絵を字面通りに読み上げる事が出来なくなる事に起因します。

このため、出来るだけ補助的な情報を与える事で、音声ブラウザなどを助けてあげれば良いでしょう。

これには、<abbr>要素でマークアップする事です。

title属性で顔文字の意味或いは口頭で読み上げてもらいたい語句を指定する事で、音声ブラウザはtitle属性を代用する事が期待できます。

問題点 2. 文字絵の途中でテキストが折返されると通じなくなってしまう。

一方、後者の文字絵の途中でテキストが折返されると通じなくなってしまうと言う問題は、CSSで解決します。

具体的には、顔文字に関して特別なクラスを当てておき、そのクラスに対して、CSSでwhite-spaceプロパティにnowrap値を当てておけば、この要素内での折返しが抑制されます。

具体例を挙げておきます。

HTML側
<p>今日はとてもいい一日でした<abbr class="face" title="(喜び)">(^-^)</abbr></p>
CSS側
abbr.face {
    white-space: nowrap;
    }

ブロックレヴェルの文字絵の場合…なるべく使わないようにしましょう。

尚、ブロックレヴェルの文字絵の場合、このようなマークアップで対処する事は難しいでしょう。

特に日本でのアスキィアートは、不等幅(プロポーショナル)フォントを前提としているため、視覚系のブラウザであっても、OSなどの環境が変わると崩れて読めなくなります。

そういうことも考えると、(ブロックレヴェルの)文字絵は、原則的に使うべきでは無いと言えましょう。

どうしても使いたい場合は、当該文字絵をGIF画像などにして<img>要素で埋め込んだ方がまだいいでしょう。

<img>要素ならalt属性やlongdesc属性で当該画像が見られない方も意味を掴む事が可能になります。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com