[やってみよう] css でつくる h タグのフォントをカスタマイズしてみよう(応用編)
不定期更新でお送りしている「css でつくる h タグ」のカスタマイズシリーズですが、今回はその三回目として、フラットタイプの見出しのフォントをお好みのものに変更する方法をご紹介します。 まずは以下のページをご覧ください(クリックで別タブで開きます)。ブログ用見出しテンプレート[フラット系]実線タイプの見出しのフォントをいろいろカスタマイズしてみよう ここでは実線タイプ、一番上の「のしめはないろ」の見出しのフォントをいろいろと変えてみましょう。 以下の◆ココ◆と記された部分にフォント用のコードを設定します。のしめはないろ<h3 style="border-bottom:1px solid #426579;border-left:10px solid #426579;padding:7px;◆ココ◆">ここにテキストを入力します</h3> まずは、フォントを MS UI ゴシックにしてみましょう。 訪問者が外国人である可能性もありますので、指定フォント名は英語表記の MS UI Gothic が無難です。font-family: MS UI Gothic; 上記のコードにフォント指定を追加すると、カスタマイズ後の表示効果はこのようになります。ここにテキストを入力します注意点: MS UI ゴシックは、Windows プラットフォーム、または Mac OS X で Microsoft Office がインストールされている環境でのみ有効です。 環境がこのフォントに対応していない場合は、ブログ(または Web ブラウザ)の既定のフォントが採用されます。 次に、文字サイズを大きくしてみましょう。 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 倍の文字サイズになっていることが確認できますね。ここにテキストを入力します応用編: フォントを複数指定することによって、複数のプラットフォームにふさわしいフォントで見出しを表示させることもできます。 列記されたフォントのなかから、対応フォントが見つかった時点でそれが採用されます。font-family:sans-serif,Arial,Verdana,'MS Pゴシック','MS UI Gothic',Meiryo,'ヒラギノ角ゴ ProN W3'; また、フォント名、サイズ、スタイルなどをまとめて指定することもできます。 指定順はつぎのとおりで、それぞれを半角スペースで区切ります。font: スタイル 太さ サイズ フォント名; 一番最後のセミコロン(;)を忘れないようにしましょう。 具体的な指定例はつぎのようになりますfont: italic bold 1.5em sans-serif,Arial,Verdana,'MS Pゴシック','MS UI Gothic',Meiryo,'ヒラギノ角ゴ ProN W3'; 表示結果はこのようになります。ここにテキストを入力します 以下のページでもフォント指定について説明しておりますので、併せてご参照いただければ幸いです。 参考ページ:自由欄、フリーページ、記事内でフォントを明示的に指定する方法過去のカスタマイズ特集もあわせてどうぞ[やってみよう] css でつくる h タグの色をカスタマイズしてみよう[やってみよう] css でつくる h タグの線をカスタマイズしてみよう(基礎編) ←こちらからこっそりコメントでけますすぐに使えるスタイルシート標準テクニック いま知っておかないと困る!CSSの最重要原則を身につ...価格:2,052円(税込、送料別)