ホームページ制作時のCSS設定(文章に最適なフォントサイズ)

ホームページを作成する際に、フォントの色や大きさで悩んだ事がある人も多いと思います。見出し部分はデザインに合わせて色々な大きさを使うと思いますが、コンテンツ部分(文章)のフォントサイズはサイトによって様々です。

12~16pxほどの大きさが一般的ですが、最近は大きな文字のブログが増えており、20pxを超えるものも見かけます。ブログの場合、サイズ指定はpxではなくemや%で行うのが一般的です。ブログは文章を読んでもらうのが目的ですので、その人に最適な文字の大きさで読んで貰える様に、サイズが変更できるような形になっている事が多いですね。

ただ、最近のブラウザは文字サイズ変更とは別にズームアップ機能が付いています。pxの場合でもズームアップであれば文字サイズを変更する事が可能です。

ちなみに当サイトのコンテンツ部分のフォント指定は以下のようになっています。

#main-contents{
color: #333;
font-size: 1.4em;
}

font-familyは使っていませんが、使うとしたらこのように記述します。

font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;

どの順番で記述しても大きな問題は発生しませんが、ヒラギノを先頭に記述するのが一般的なようです。

ヒラギノやメイリオは文章の横幅が広がりますので、MS Pゴシックできれいに納まっているように見えても、ヒラギノやメイリオで見るとデザインが崩れているという事も珍しくありませんので、右側に余裕を持たせた方が良いでしょう。

FirefoxのFirebugで他サイトのフォントサイズを知る

FirefoxのFirebugというアドオンを使うと、他人のサイトのフォントサイズを知る事が出来ます。(フォントサイズだけではなく、CSSが全て見られます。)

»Firebugをインストールする

蛍アイコンの隣にある矢印を選択すると、サイト内の特定の場所のHTMLやCSSを確認する事が出来ます。コンテンツ部分の文章をクリックして、右側にある「累計」をクリックすると本文のフォント指定がわかります。

bodyに指定したフォントサイズに対して、pタグを何%にすると言った形で指定している場合、直接フォントサイズを知る事が出来ませんが、Firebugの累計ではそれを計算した上でpタグのフォントサイズを知る事が出来ます。

個人的には当サイトで使用している1.4emが好きです。最近は大きな文字のサイトが増えてそれに慣れてしまったので、1.2だと小さく感じます。1.6も使いますが、長文になった時の事を考えると1.4が最適かなと思っています。

»ホームページ作成時に最適な背景やフォントの色

目的別 おすすめレンタルサーバー

コストパフォーマンスが高いレンタルサーバー
WordPress向け
法人レンタルサーバー
激安料金

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーの無料お試し申し込みはこちら

公開日:2011年7月4日
最終更新日:2013年12月4日

カテゴリー:HP初心者 パシのレンサバブログ

コメント

コメントは受け付けていません。

このページの先頭へ