2013年7月3日水曜日

css : htmlでアイコンをムリヤリ文字と同じサイズで表示

ラベル: 時刻:

htmlの文中にアイコンを絵文字のように埋め込みたいことはけっこうあると思います。 これはちょうどよいサイズの画像を用意したり、画像(imgタグ)のサイズを調節したりで実現できそうです。 しかし、こういうやり方ではレイアウトが崩れる(フォントサイズと画像サイズが不揃いになる)ことがあります。 それは次のような理由でです。

  • ブラウザによって微妙に文字サイズが違う。
  • ユーザースタイルシートによりユーザーが文字サイズを変更できる。(メガネがあっていない人など、文字を大きくしている事は多い。)
  • ブラウザの設定で最小フォントサイズが設定できるものがある。小さな文字だけ拡大されるので全体の文字バランスが崩れることも。

ユーザースタイルシートなどで「閲覧者がレイアウトを調節できる」という要素は多くのブラウザの仕様です。 それが理由でレイアウトが崩れないようなページを作ることが推奨されています。 すぐに連絡が取れる身内だけが閲覧するページなら多少崩れてもいいでしょう。 しかし、閲覧する人をできるだけ増やしたい場合や公共のページなどでは、そのようなレイアウトが崩れる要素はできるだけ取り除かねばなりません。

じゃあどうすればいいのか? とりあえず思いついたやり方は2つ。

  • css3を使う ... 古いブラウザでは表示できない。
  • javascriptを使う ... セキュリティを気にする人はjavascriptを無効にしている場合がある。

それぞれ短所がありますね。 全ての環境でこの問題を解決する手段はないような気がしますが、さて?

まぁ、このブログは個人のサイトって事で「どんな閲覧者でも読める記事を書かなければならない」なんて事はありません。 とりあえずcss3の方を試してみました。 この投稿でゲームのボタン(例えば )を表すのに使ってみました。

やってることは単純で、幅のある空白文字「 」の背景に画像を指定しています。 「 」が正方形に近かったので使いました。 背景画像は領域に合わせて自動でサイズ調整ができます(css3)。 普通の画像の場合はこのようなサイズの自動調整はできない ... ハズ。

コードはこんな感じです。 

<span
    title="lp"
    alt="lp"
    style="
        background-size:contain;
        -webkit-background-size:contain;
        background-repeat:no-repeat;
        background-image:url('data:image/png;base64,iVBOR～gg==')">
  &emsp;
</span>

「background-size:contain」はアスペクト比を保持して領域に収まる最大サイズになるように画像を拡大縮小する設定です。 空白文字「&emsp;」の背景扱いということで、ちょうど1文字分のサイズに調整されます。 「-webkit-background-size:contain」は古いアンドロイド端末向けで同じ事をする設定。 古いアンドロイド端末なんて持ってないので表示は未確認です。 そのままだと、画像と&emsp;のサイズが違うとき、画像がタイル状に繰り返し表示されるので「background-repeat:no-repeat」で1つだけの表示にしています。

background-imageのurlにはデータURIスキームが入っています。 これはbloggerで細かい画像を上げるのが面倒なのでこうしました。 外部cssを使っていないのもこのため。 もちろん、普通のサイトでは普通の画像へのリンクも外部cssも使えます。

文中で使うとこんな風になります。 「左下 から下 右下 とまわして でボディスマッシュ。」 とりあえずそれっぽい表示はできるようですね。 ブラウザの設定でフォントサイズを変えると、それにあわせて画像サイズが変更されることも確認できました。

短所は次の通りです。

  • 1文字分の表示をしたいだけなのにソースが長くなる。
  • css3に対応していない古いブラウザでは表示が崩れる。空白だけ表示されて意味が通じなくなる可能性も?
  • 他の文字とベースラインがあわない事が多い。だからといって画像の中身を描き変えて調節すると他のブラウザで表示がずれるかもしれない。
  • 一見文字に見えるがコピー&ペーストができない。
投稿者