3531971

ショップハンター

2014.08.13

[やってみよう] css でつくる h タグのフォントをカスタマイズしてみよう（応用編）

テーマ：楽天ブログいろいろ(1435)

カテゴリ：当ブログオリジナル

　不定期更新でお送りしている「css でつくる h タグ」のカスタマイズシリーズですが、今回はその三回目として、フラットタイプの見出しのフォントをお好みのものに変更する方法をご紹介します。

　まずは以下のページをご覧ください（クリックで別タブで開きます）。

ブログ用見出しテンプレート[フラット系]

実線タイプの見出しのフォントをいろいろカスタマイズしてみよう

　ここでは実線タイプ、一番上の「のしめはないろ」の見出しのフォントをいろいろと変えてみましょう。
　以下のと記された部分にフォント用のコードを設定します。

のしめはないろ

◆ココ◆ ">ここにテキストを入力します</h3>

　まずは、フォントを MS UI ゴシックにしてみましょう。
　訪問者が外国人である可能性もありますので、指定フォント名は英語表記の MS UI Gothic が無難です。

font-family: MS UI Gothic;

　上記のコードにフォント指定を追加すると、カスタマイズ後の表示効果はこのようになります。

ここにテキストを入力します

注意点：

　MS UI ゴシックは、Windows プラットフォーム、または Mac OS X で Microsoft Office がインストールされている環境でのみ有効です。

　次に、文字サイズを大きくしてみましょう。
　font-size を追加することによって、文字の大きさを自在に変更できます。

font-family: MS UI Gothic; font-size: 1.5em;

　サイズは様々な方法で指定できます。
　いくつかの例を挙げますので、必要に応じてお好みのものをお使いください。

18pt; --- 18ポイント（固定値）
20px; --- 20 ピクセル（固定値）
1.5pc; --- 1.5 パイカ（1pc は 12pt に相当）（固定値）
1.5em; --- 既定の文字サイズの 1.5 文字分（推奨）
xx-small/x-small/small/medium/large/x-large/xx-large --- 相対指定（推奨）

　上記で（推奨）となっているものについては、ユーザのブラウザ環境に応じた相対サイズとなるため、ユーザにとってより見やすい文字サイズを提供できるというメリットがあります。

　たとえば、老眼や弱視などで小さい文字を見にくい方は、Web ブラウザの既定フォントサイズを大きめに設定している可能性があります。
　この場合、ブログページ側で固定値のフォントサイズを指定してしまうと、逆に文字が小さくなって見づらいという現象が発生することがありますので、多用は避けたほうが無難といえます。

　文字サイズ 1.5em の効果を加えると、このようになります。
　もとの大きさの 1.5 倍の文字サイズになっていることが確認できますね。