コモンCSSについて
リセットCSSやベースフォントCSSは、ブラウザのデフォルトスタイルを揃えるためのスタイルシートですから、そのまま他のホームページにも流用できます。
これ以降は、いよいよそのホームページ独自の体裁・見た目を定義するスタイルシートを説明します。
英語でcommonは「共通」の意味。コモンCSSは、ホームページ全体で使用する要素のスタイルを定義するものです。
既にサイトドラフトとデザインが出来あがっているはずですので、どのページにどのような要素がはいるかは明確になっていますよね。共通で使われる要素を一つのCSSにまとめておけば、スタイルの修正や追加などが必要になった場合でもコモンCSSのみ作業をすればよいので解り易いです。
コモンCSSのコーディングの流れは、まず、共通で使われているタグを再定義することから始まります。次に、サイトドラフトとトップページや中ページのデザインをもとに、共通要素を定義します。背景画像が必要となる共通要素には、画像をスライスして背景画像を設定します。画像のスライスは「画像をスライスする」のページを参照してください。最後に、これら全ての設定をブラウザで確認し、必要に応じて調整をします。最終調整のやりかたは「コモンCSSを仕上げる」をご覧ください。
ここでは、ヘッダー、フッター部分を中心に説明します。
common.cssとは？
スタイルシートは、できるだけ一つのファイルにまとめた方が良いとされていました。
しかし、トップページや下層ページで「そのページのみで適用するスタイルシート」の記述が増えると、1つのファイルでは長大になってしまいます。これでは、修正したい箇所を探すだけでも大変です。
そこで、全てのページで共通している部分は1つのcssに、それぞれの設定が必要な部分はそのページの名前のcssに分けることが主流になりました。
「全てのページで共通している部分」を記述するcssを、ここでは「コモンCSS」と呼びます。
コモンCSSは定められた名称ではありません。base.cssやstyle.cssなど様々なファイル名が用いられています。
しかしここでは「common＝共通」の意味合いを採用して、common.cssのファイル名を採用しています。
それでは、実際のコーディングに入りましょう。
共通部分のコーディング
今回のサイトの場合、赤い色がついた部分がすべてのページで共通なところ。
黒い色の部分は各ページごとに内容が変わるエリアです。
出来上がりのイメージを見てください。
ブラウザで表示すると、コンテンツが常に中央にあるようにデザインされています。
これを「センタリングレイアウト」と言います。ブラウザのデフォルトでは左揃えになっているので、中央表示（センタリング）設定を行います。
まずは、index.htmlを秀丸で開いてください。
すべての要素、<body>の直後から</boby>の直前までを、<div>という要素で囲みます。
<div>というのは汎用ブロックレベル要素と言われるもので、文書の構造には関係のないブロックを作るものです。
レイアウトする際に、どうしても必要な場合に使用するようにしましょう。
divタグの定義と使い方
divタグは、HTML文書で「部分」や「セクション」を定義するためのタグです。
英語のdivisionのdivです。
ブロック要素のまとまりの体裁を整えるために、divタグを使います。
複雑なデザインをcssで再現しようとすると、コードの中についつい<div>が多くなってしまいます。
できるだけ余計な<div>が入らないようなデザインを心がけることも重要ですが、複雑で華やかなデザインは閲覧者をひきつける大切な要素でもあります。
華やかなデザインを選択した場合は、コーディングの工夫で余計な<div>を減らすしかありません。
デザインとコードの両立は難しいですが、工夫を考えることもホームページ制作の楽しみです。
さて、コーディングしていく上で、<div>要素はたくさん登場します。
しかし<div＞自体には見た目を左右する要素は全くありません。
そこで、id属性やclass属性というものを使ってスタイルを割り振り、記述してゆきます。
divタグとspanタグ
divタグと同じ様な使い方をするタグにspanタグがあります。
divタグはブロック要素であり、spanタグはインライン要素です。
ブロック要素とインライン要素
ブロック要素とは、見出し、段落、リスト、フォームなどのひとつのまとまった単位として表される要素です。
インライン要素とは主に文書の一部として利用される要素です。
id属性とclass属性の使い分け
<div id="●●●"></div> <div class="▲▲▲▲"></div>
上記に示したidを「id属性」、classを「class属性」と言います。どちらもスタイルの集合につける名前です。
id属性とclass属性は、divタグだけでなく、pタグやulタグなど、ほぼ全てのタグにつけることができます。
idとclassってどう違うの？とよく聞かれます。
idはそのページに1つしか登場しないもの、classはそのページに複数登場するものと覚えてください。
例えば、strongタグで挟んだテキストを赤い色で強調したいと考えます。
そして、赤い色で強調したいstrongタグが、そのページにいくつか出てくるとします。
その場合はclassを使用します。htmlの記述は<strong class="red">などになります。
id属性
英語のidentityのid。同一性、一致、独自性、主体性、帰属意識などの意。
class属性
英語のclass。共通の性質を有する部類や種類。類、クラス、集合などの意。
さて、今回はページをセンタリングするために<div id="container"></div>で<body>の中身すべてを囲みます。
containerはページに一つしか登場しないので、id属性で記述します。
上書きを忘れずに・・・。
今度は秀丸で新規ファイルを立ち上げ、そこにcssを記述します。
@charset "utf-8";
body {
textc-align:enter;
}
div#container {
width:1000px;
margin:0 auto;
text-align:left;
}
bodyにtext-align:centerを記述するのは、IE6以前のブラウザの対策のためです。
これらのブラウザではmargin:autoが適用されないので、text-align:centerを使用してセンタリングします。本来は正しくない記述なのですが、IE6以下のブラウザのCSS解釈が誤っていることが原因のため、苦肉の策と言えます。
div#containerに記述したmargin:0px auto;は「<div id="container"></div>の上下のmarginは0px、左右のmarginはauto（左右に等分のマージンを取る＝ブラウザの中間に配置される）」という意味です。
また、bodyにtext-align:centerを記述していると、containerの中のインライン要素（テキスト等）がセンタリングされてしまうので、text-align:leftを記述して打ち消します。
なお、width:1000pxは<div id="container"></div>の横幅は1000pxである、という意味です。その他の幅でデザインしている場合は、ここの数値を変更してください。
上記のスタイルをコピー＆ペーストしたら、ファイル名をcommon.cssとして保存します。
リセットCSSやベースフォントCSSと同じ要領で、index.htmlにcssへのリンクを貼ってください。
ブラウザで確認します。
このように、ブラウザを大きくしても小さくしても、テキストの内容は常に真中に表示されましたでしょうか？
次は大まかなレイアウトのためのグルーピングをします。
まずは下記図のように、ヘッダー、コンテンツ、フッター部分を、それぞれheader,contents,footerのdivで囲みます。
そして、html上にpタグ、ulタグ、liタグ、dlタグ、dtタグ、ddタグなど何度も使用しているようなタグに名前（id属性やclass属性）を付けてゆきます。
下記のようになりました。
<!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 rel="stylesheet" href="css/reset.css" type="text/css" /> <link rel="stylesheet" href="css/basefont.css" type="text/css" /> <link rel="stylesheet" href="css/common.css" type="text/css" /> </head> <body> <!--container--> <div id="container"> <h1>ホームページ制作からSEO・SEM・広告戦略まで、WEBサイトのノウハウを公開 ｜ 鈴木智子のホームページのアクセスアップ講座</h1> <!--header--> <div id="header"> <h2 id="logo"><a href="./">鈴木智子のホームページのアクセスアップ講座</a></h2> <ul> <li id="hn_top"><a href="./">トップ</a></li> <li id="hn_sitemap"><a href="sitemap.html">サイトマップ</a></li> </ul> <form>検索</form> </div> <!--/header--> <!--globalNav--> <ul id="globalNav"> <li id="gn_production"><a href="production.html">ホームページ制作講座</a></li> <li id="gn_seo"><a href="seo.html">SEO・SEM講座</a></li> <li id="gn_seotool"><a href="seotool.html">SEOツール講座</a></li> <li id="gn_advertisement"><a href="advertisement.html">広告講座</a></li> <li id="gn_failure"><a href="failure.html">失敗講座</a></li> <li id="gn_link"><a href="link.html">リンク集</a></li> <li id="gn_blog"><a href="blog/">ブログ</a></li> </ul> <!--globalNav--> <!--contents--> <div id="contents"> <p>ホームページ制作からSEO・SEM、広告戦略まで、プロのノウハウを公開！</p> <h2>プロのノウハウを公開する理由 インターネットとフリー（無償）の思想</h2> <h3>インターネットの普及</h3> <p>1995年、Windows95の登場によって、インターネットは爆発的に普及しました。<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>私、鈴木智子が代表を務める株式会社西新宿ドットネットでは、2003年の創業以来、ホームページの制作からSEOまでをトータルパッケージで提供してきました。<br /> 2003年移行インターネットの動向を実際の現場で見てきた、ホームページのアクセスアップ講座を、すべてお見せします。</p> <dl> <dt><a href="production.html">ホームページ制作講座</a></dt> <dd><a href="production.html">ホームページを作りたい！リニューアルしたい！制作に関する講座はこちら</a></dd> </dl> <dl> <dt><a href="seo.html">SEO・SEM講座</a></dt> <dd><a href="seo.html">目指せ、上位表示！<br /> 検索エンジン対策(SEO)、SEMについてはこちら</a></dd> </dl> <dl> <dt><a href="advertisement.html">広告講座</a></dt> <dd><a href="advertisement.html">ホームページを軸とした、広告・マーケティングについては、こちら</a></dd> </dl> <dl> <dt><a href="seotool.html">SEOツール講座</a></dt> <dd><a href="seotool.html">SEOの結果を目で確認したい！<br />そんなときに便利なSEOツールを紹介</a></dd> </dl> <h2>TOPICS</h2> <dl> <dt>09.08.11</dt> <dd>ホームページ開設</dd> </dl> </div> <!--/contents--> <!--footer--> <div id="footer"> <ul id="footerNav"> <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/">ブログ</a></li> <li><a href="sitemap.html">サイトマップ</a></li> <li class="end"><a href="inquiry.php">お問合せ</a></li> </ul> <address> Copyright©2009 tomokos.net. Powered by <a href="http://www.nishi-shinjuku.net/" target="_blank">nishi-shinjuku.net</a> </address> <ul id="footerSponsor"> <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> </div> <!--/footer--> </div> <!--container--> </body> </html>
中には何度も出てくるのに名前（id属性やclass属性）を付けていないものもあります。
この辺はcssコーディングに慣れてくると、必要なところ、そうでないところの判断がわかってくると思います。
始めのうちはhtmlとcssの間を行ったり来たりしながらの制作になるでしょう。しかしそのうち、htmlのグルーピングを先行して終わらせ、あとはcssファイルを記述するだけといった手順になってゆきます。
さて、一度common.cssの話を中断して、「画像をスライスする」に移りましょう。
