ベースフォントCSSについて
ベースフォントとは、ホームページを表示させる際のフォントの基本設定用cssを指します。
先述したリセットCSSと同様に、今度はフォント、つまり文字の「見た目」を揃えます。
ベースフォントCSSは、リセットCSSでcssの初期化を行った後に記述します。
フォントファミリーについて
使用しているパソコンにどのフォントが入ってるかによって、文字の表示が異なります。
ですから、ベースフォントCSSで設定するフォントの種類は、表示がきれいでなおかつシェアの低いブラウザのフォントから順にカンマで区切って記述します。
フォントファミリーの具体的な記述について、このページの下の方にも記述しますので、参考にしてください。
フォントサイズについて
多くのブラウザの標準フォントサイズは16px相当です。
このままでは色々と不便ですので、一度すべてのフォントサイズを10px相当になるようにベースフォントCSSで設定してしまいます。
なぜ10pxに設定するか分かりますか？
あとで、「この部分はもう少し文字を大きくして、12px相当で表示したいなぁ」と思った時、10pxに設定しておけば、120%と記述するだけで良いわけです。
では16px相当にしたいときは？160%と指定すれば良いのです。
これが他の大きさ、例えば、16pxを10pxにしようとすると、10÷16×100＝62.5などの計算が必要になってしまいます。
だからと言って、単純にfont-size:10px;と記述してしまうと、大変な問題が起こります。
IE6ではフォントサイズをpxで指定してしまうと、ユーザーがテキストの大きさを変更できなくなってしまいます。
ブラウザの「表示」メニューに拡大する・縮小するというものがあり、目の悪い人などはテキストを大きく設定できたりします。閲覧者のためにも、「%」で指定するようにしましょう。
上記を踏まえて、「%」で10px相当にするためのベースフォントCSSを以下に用意しました。
@charset "utf-8";
/*
===========================================================
Base Fonts
Copyright (c) 2009, nishi-shinjuku.net All rights reserved.
version: 2.0.2 [2009/12/9]
===========================================================
*/
body {
font-size:13px;
font-family:arial,helvetica,clean,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ', Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
/* ------------------------------------------------------
font size
------------------------------------------------------ */
body {
font-size:77%;
line-height:1.6;
}
ここでもYUI Libraryを参考にしています。
YUI Library: Fonts CSSでは、フォントサイズを13pxに指定した後、さらに特定の%を指定することによって、希望のpx相当になる比率を公表しています。
13pxを10pxにするための比率は77%です。
上記の手順に従って、まずフォントサイズを13pxに指定します。
さらにフォントファミリーを設定します。
| フォント名 | 備考 |
|---|---|
| arial,helvetica,clean | 欧文フォント |
| ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro | Mac OS Ⅹの標準日本語フォント |
| メイリオ,Meiryoo | Windows Vista以降の標準日本語フォント |
| MS Pゴシック | Windows XP以前の標準日本語フォント |
| sans-serif | サンセリフ体（ゴシック体）フォント |
欧文フォント、Mac OS Ⅹの日本語フォント、Windows Vista以降の標準日本語フォント、Windows XP以前の日本語フォント、サンセリフ体フォントの順番で表示せよという命令になります。
次にフォントサイズを10pxに揃えるための設定です。
フォントサイズに77%を指定します。
cssのコード 内で、/*～*/で挟んだ部分はコメントになるため、cssとしては認識されません。
このことを利用して、説明などを加えると、後で見たときにわかりやすいでしょう。
ついでにline-heightの指定もしてしまいましょう。
line-heightを指定すると、テキストの高さが変わり、行間が空いた読みやすい文書になります。
ここでは、1.6（16px相当）を指定します。
数字を大きくすると行間が広くなります。
これで、ベースフォントの設定は終了です。
WEBサイトはいろいろな人が様々なOS・ブラウザ環境で閲覧しています。
シェアの高い環境はもちろん、少数派の環境でも、できるだけデザイン的に崩れないサイト作りを目指したいものです。
それがWEB標準なのです。
basefont.cssは前述したreset.cssと同じ要領で、秀丸で作成し、保存、htmlにリンクさせてください。
記述する順番は、reset.css、basefont.cssとなります。
「鈴木智子のホームページのアクセスアップ講座」では、次のようになります。
<!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" xml:lang="ja" lang="ja" dir="ltr"> <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" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="robots" content="INDEX,FOLLOW" /> <meta name="author" content="鈴木智子のホームページのアクセスアップ講座" /> <meta name="copyright" content="Copyright (c) 2009 nishi-shinjuku.net" /> <meta name="coverage" content="japan" /> <meta name="Targeted Geographic Area" content="japan" /> <meta name="classification" content="general,computers,internet,personal" /> <meta name="rating" content="general" /> <meta name="Keywords" content="鈴木智子,ホームページ,アクセスアップ,講座" /> <meta name="Description" content="鈴木智子のホームページのアクセスアップ講座は、実戦的ホームページの制作からSEO、SEM、広告戦略まで余すところなく公開します。" /> <meta name="slurp" content="NOYDIR" /> <meta name="robots" content="NOODP" /> <title>鈴木智子のホームページのアクセスアップ講座</title> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <link href="css/basefont.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>ホームページ制作からSEO・SEM・広告戦略まで、WEBサイトのノウハウを公開！鈴木智子のホームページのアクセスアップ講座</h1> <h2><a href="./">鈴木智子のホームページのアクセスアップ講座</a></h2> <ul> <li id="hn_top"><a href="./">トップ</a></li> <li id="hn_sitemap"><a href="sitemao.html">サイトマップ</a></li> </ul> <form action="results.html"> <input type="text" /> <input type="submit" value="検索" /> </form> <ul> <li><a href="production.html">ホームページ制作講座</a></li> <li><a href="seo.html">SEO・SEM講座</a></li> <li><a href="seotool.html">SEOツール講座</a></li> <li><a href="advertisement.html">広告講座</a></li> <li><a href="failure.html">失敗講座</a></li> <li><a href="link.html">リンク集</a></li> <li><a href="blog.html">ブログ</a></li> </ul> <p>ホームページ制作からSEO・SEM、広告戦略まで、プロのノウハウを公開！</p> <h2>プロのノウハウを公開する理由 インターネットとフリー（無償）の思想</h2> <h3>インターネットの普及</h3> <p>1995年、Windows95の登場によって、インターネットは爆発的に普及しました。<br /> インターネットに<strong>アクセス</strong>すれば、様々な<strong>ホームページ</strong>から知りたい情報をいつでも入手できる。そんな手軽さがインターネット普及の大きな要因であることは間違いありません。<br /> インターネット上で使われている様々な技術や管理制度の多くは、一般のユーザに公開されているものが多く、インターネットが通信網としてその地位を確立するまでの歴史的経緯から、インターネット網の中には特定の集中した責任主体は存在しません。<br /> 誰もが平等にアクセスする事ができ、様々なホームページを自由に閲覧することができるのです。<br /> インターネットの根底にあるこの「フリー（無償）の思想」に基づいて、通信網にアクセスすれば有益な情報を「フリー（無料）」で探し出すことができるという利便性こそが、インターネットが普及した要因であると言えます。</p> <h3>インターネット利用者の増加</h3> <p>インターネット利用者は、確実に増加を続けています。<br /> 総務省の調査では、平成20年度末インターネット利用者は9,091万人。日本人の75.3%が何らかの形でインターネットを利用しているのです。（平成20年度通信利用動向調査）利用者層は、13歳から40歳代までが9割以上、50代が8割以上、60代前半は6割以上で、いずれの世代も前の年度より増え続けています。<br /> より使いやすいパソコン、その他の通信機器のおかげで、より多くの人が、より気軽に、インターネットを利用して情報を得ているのです。</p> <h3>ホームページの利用とアクセスアップ</h3> <p>ホームページを通して自社製品やサービスを販売する企業や個人が増えました。<br /> しかし、インターネットという通信網内に存在する膨大な数のホームページの中、利用者に閲覧されるのは、検索サイトで上位表示されるごく僅かな数のホームページにすぎません。<br /> どうすれば検索サイトで上位表示されるのか？アクセスアップのためには、何をすればよいのか？<br /> インターネット利用者に見てもらえる地位を確保するには？</p> <p>私、<strong>鈴木智子</strong>が代表を務める<a href="http://www.nishi-shinjuku.net/" target="_blank">株式会社西新宿ドットネット</a>では、2003年の創業以来、ホームページの制作からアクセスアップのための<strong>SEO</strong>までをトータルパッケージで提供してきました。優れた商品、サービスに関する情報をより多くの人々に知ってほしい。これは、商品・サービスを提供する企業のビジネスチャンスが広がるだけでなく、消費者にとっても有益な情報だからです。SEO、SEMでアクセスアップ！<br /> 2003年以降インターネットの動向を実際の現場で見てきた、ホームページのアクセスアップ講座を、すべてお見せします。</p> <p><a href="production.html">ホームページ制作講座</a><br /> <a href="production.html">ホームページを作りたい！<br /> リニューアルしたい！<br /> ホームページ制作に関する講座はこちら</a></p> <p><a href="seo.html">SEO・SEM講座</a><br /> <a href="seo.html">目指せ、上位表示！<br /> アクセスアップ！<br /> SEO、SEMについては、こちら</a></p> <p><a href="seotool.html">SEOツール講座</a><br /> <a href="seotool.html">SEOの結果を目で確認したい！<br /> そんなときに便利なSEOツールを紹介</a></p> <p><a href="advertisement.html">広告講座</a><br /> <a href="advertisement.html">ホームページを軸とした、広告・マーケティングについては、こちら</a></p> <h2>TOPICS</h2> <p>ダミーテキスト/ダミーテキスト/ダミーテキスト/ダミーテキスト</p> <ul> <li><a href="./">トップ</a></li> <li><a href="production.html">ホームページ制作講座</a></li> <li><a href="seo.html">SEO・SEM講座</a></li> <li><a href="seotool.html">SEOツール講座</a></li> <li><a href="advertisement.html">広告講座</a></li> <li><a href="failure.html">失敗講座</a></li> <li><a href="link.html">リンク集</a></li> <li><a href="blog.html">ブログ</a></li> <li><a href="sitemap.html">サイトマップ</a></li> <li class="end"><a href="inquiry.html">お問合せ</a></li> </ul> Copyright©2009 tomokos.net. Powered by <a href="http://www.nishi-shinjuku.net/" target="_blank">nishi-shinjuku.net</a>. <ul> <li><a href="http://www.nishi-shinjuku.net/" target="_blank">株式会社西新宿ドットネット</a></li> <li><a href="http://www.mainecoon.jp/" target="_blank">メインクーンのホームページ</a></li> <li class="end"><a href="http://www.nirajima.com/" target="_blank">ニラジマGT</a></li> </ul> </body> </html>
さて、下準備は完了です。
ここからは、このサイト独自の設定、「コモンCSSについて」の説明に入ります。
