HTML : してログ

Unicode(UTF-8)を採用しているサイトで、これらの文字が小さく(半角サイズで)表示されてしまう場合があります。ブラウザがこれらの記号が表示される際、小さく表示される欧文フォントが選択されてしまうために起こります。いくつか対応方法がありますが、CSS で font-family を固定してしまうのがベストだと思います。

日本語フォントを指定した場合

日本語フォントを指定すると「○×□」は正しい幅で表示されます
<div style='font-family:"MS ゴシック"'>○×□</div>

欧文フォントを指定した場合

欧文フォントを指定すると「○×□」は半角の幅で表示されます
<div style='font-family:"Arial"'>○×□</div>

以前の私は「font-family: monospace」を指定していましたが、これだとブラウザに依存してしまうのでお勧めしません。ブラウザのデフォルト設定に依存しないよう、しっかりフォントを固定しておくことをお勧めします。また例では「MS ゴシック」のみですが、Windows でも MacOS でも大丈夫なように複数の日本語フォントを指定するのが良いと思います。

ようはブラウザのデフォルト設定で、欧文フォントが日本語フォントより優先されているため、Unicode で表示可能な記号が欧文フォントで描画されてしまうということでしょう。Unicode だと欧文フォントでも表示可能な記号としてマップされているのだと思います。ただ、欧文と日本語でフォントを分けたい場合は対応できませんが、個人的には同じフォントで描画した方が好きなので問題ありません。

Font Awesome がメジャーバージョンアップしていたので、当サイトも Font Awesome 4 → 5 へ上げてみました。単に CSS の入れ替えだけではダメだったので、アップグレードのポイントを整理しておきます。

変更要点

  • 導入は on-server を配置し、fontawesome-all.min.css を読み込めば OK です
  • アイコンは系列クラスに分けられて、ソリッド系("fas" 塗りつぶしスタイル)、レギュラー系("far" 線画系)、ブランド系("fab" 各種サービスロゴ)、そしてプロ版のライト系("fal" 細い線画系)があります
  • Font Awesome 4 の "fa" クラスはソリッド系 "fas" に互換割り当てされているようです(従って、アイコン名が変更されているものを除き、後ろに "-o" が付かないものは変更なしで表示されます)
  • Font Awesome 4 でアイコン名の後ろが "-o" になっているものは、Font Awesome 5 ではレキュラー系列 "far" に変更します(例:"fa newspaper-o" → "far newspaper")
  • それでも表示されないものは、アイコン名が変更されているので個別に調べて変更します

ソリッド系(fas)

レギュラー系(far)

ブランド系(fab)

Font Awesome の利点と課題

Font Awesome は 4 の頃から使っていますが、アイコンに関してほぼ困ることが無くなりました。ウェブ制作のみに限らず、開発における様々なシーンで適用可能で、アイコン制作にかける時間はかなり短縮できています。特にウェブシステム開発では、アイコン画像を無くすことができ、サイズ変更も容易なためメンテナンス性の向上は計り知れません。

いっぽう少なからず課題もあります。まず、日本でメジャーなブランド系、規格などの日本にマッチしたアイコンの不足です。個人的に欲しいと思ったのは、オリヅル、サクラ、モミジ、オニギリ、熨斗、日本列島、などです。系列を拡張できるなら、ジャパン系 "faj" とか作ったらいいかも知れません。

もう一点は、小さめのアイコンの系列です。リストのリーダとして利用する場合、標準のサイズでは大きいと思います。アイコンサイズを "fa-xs" などで小さくできるのは知っていますが、真ん中に来ないし位置合わせ等気にするのが嫌ですね。文字と同じサイズ指定で小さめのアイコンがあれば、もっと使い易くなると思います。

また、丸付き数字や四角付き数字はベタで30ぐらいまで欲しいかなと思います。これらは一個も無いので、シェイプ系のベースアイコンと他のアイコンや文字を組み合わせたいのだと思います。しかし、サクッと使いたい場面が結構あり、組み合わせるのに神経を使うのでは意味が無いです。

追記

アイコンの組み合わせですが、前あった fa-stack が効かないので調べたら fa-layers + JavaScript になったっぽい。そもそも Font-Awesome 5 自体が SVG + JavaScript を推奨してるようなので、<i> は互換性のため基本的な部分を残しているのかも知れません。

この fa-stack や fa-layers は自由な半面コードを複雑にするだけだと思うんですよね。もう少し使い方を制限してもいいので、簡潔な書き方で利用できるようになるといいですね。

HTML5 で作られたページを IE8 で表示させたときに、互換モードで表示されてしまい、レイアウトが崩れるという事態に遭遇しました。 調べてみると、META タグで互換モードへ落ちるのを防げるらしいので、試してみました。 下記のような記述を、<head> の直後に書いたところ、アドレスバーの脇に出ていた互換モードのアイコンが消えました。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

[HTML] XHTMLひな形

HTML 20121231

もう XHTML UTF-8 でしかサイト作らなくなったな...。

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<link rel="stylesheet" type="text/css" href="stylesheet.css" />
	<script type="text/javascript" src="javascript.js"></script>
	<title>Site name</title>
</head>
<body>
	...
</body>
</html>