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

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

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

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

cssで投稿の外部リンクにアイコンをつける

前の投稿でけっこうな数の外部リンクとページ内リンクを書きました。 外部リンクとページ内リンクが混じっていてちょっと見づらいかもしれません。 その投稿ってのがcssセレクタのお話なんですよね。 せっかくなのでそこで調べたことを使ってbloggerのテンプレートを書き換え、外部リンクにアイコンを付けてみました。

これをやってみたキッカケの1つに「主要ブラウザの中でなかなか対応しなかったieでも ::after で画像を追加できるようになった」ってのがあります。 逆に言うと古いieでは表示されません。

cssセレクタの説明

cssセレクタについて、今まで参考になりそうなサイトをサラッと流し読みしたくらいでマジメに調べたことがなかったので調べてみました。 css3の情報がメインです。 htmlで使用する場合について書きました。 ブラウザ以外のアプリケーションでもcssが使われることはありますが、そちらについては考慮してません。 名前空間については調べてません。