コモンCSSを仕上げる
「コモンCSSについて」は、それぞれの要素に名前を付けるというところで中断していました。
いよいよ、common.cssを仕上げてしまいたいと思います。
全体の背景のグラデーションとcontainerのシャドウを加えて見ましょう。
common.cssの中身を下記のように書き換えて保存し、確認のため、ブラウザでindex.htmlを開いてみてください。
html {
background:url(../img/bg_html.jpg) repeat-x;
}
body {
text-align:center;
background:url(../img/bg_body.png) top center repeat-y;
}
div#container {
width:960px;
margin:0 auto;
text-align:left;
}
このような表示になりましたか？
なっていない方は、画像を保存した場所が違っているかもしれません。
「homepage」フォルダの中に「img」フォルダがあり、その中にスライスした画像が入っているかを確認しましょう。
次に、テキストを画像に置き換える作業をしましょう。
今回の場合は、ロゴ、メインイメージ、コンテンツ部分の大見出し、トピックスの部分です。それ以外の画像が入っている部分は後から詳しく説明します。
ではまず、ロゴを画像に置き換えてみます。index.htmlを秀丸で開いてください。
青くなっている部分（画像の代わりにテキストを配置している部分）を下記のソースに書き換えることで、画像が挿入されます。
<img src="img/logo.jpg" width="445" height="59" alt="鈴木智子のホームページのアクセスアップ講座">
同じようにして、コンテンツの大見出しとトピックス部分にも画像を配置します。
<img src="img/●●●.jpg" width="○○○" height="△△△" alt="画像の説明文">
●●●の部分は、画像の名前。
○○○の部分は、画像の横幅。
△△△の部分は、画像の縦幅。
「画像の説明文」は、画像の説明文に変更してソースに記述します。
画像の横幅・縦幅・説明文は省くことも可能ですが、レンダリング（データの可視化）が遅くなるなどのデメリットがあるのできちんと入力してください。
現段階でのソースは下記のような形になりました。
<!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><img src="img/top_title.jpg" width="960" height="283" alt="ホームページ制作からSEO・SEM、広告戦略まで、プロのノウハウを公開！"></p> <h2><img src="img/top_reason.jpg" width="500" height="73" alt="プロのノウハウを公開する理由 インターネットとフリー（無償）の思想"></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><img src="img/top_topics.jpg" width="445" height="43" alt="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>
パディングとマージン
ここで、これからコーディングしていくにあたり、重要な概念の説明をいたします。
HTMLでは、すべての要素は「目に見えないBOX」で形成されています。
内容物から目に見えないBOXまでをパディング（padding）、BOXとBOX同士の間をマージン（margin）と言います。
このマージンとパディングの数値を設定していくことで微妙な位置関係を調整する、というのがコーディングの作業です。
では、マージンとパディングを使ってh1の部分を完成させましょう。
div#container h1 {
width:960px;
height:21px;
color:#999999;
font-size:80%;
border-bottom:1px #dcdcdc solid;
}
フロート
次にヘッダー部分の説明に入ります。
上図の通り、今のところ、すべてのテキストは縦に積み重なってしまっています。
これは、htmlにはソースに書かれた順に、上から積み重なるように表示されるという原則があるからです。
しかし、私のホームページは、デザイン的にもユーザビリティ（使い勝手の良さ）の面でも、ブロックを横に並べたい部分があります。
ここで必要になるのが、「フロートレイアウト」というCSSの手法です。
フロート（float）を定義することで、通常は縦に積み重なっているボックスを横並びに表示させることができます。
CSSを何も設定しないと、ボックスは縦に積み重なります。
フロートレフトを使用し、横並びにします。
AとBボックスに、フロートレフトを使用し、横並びにします。
Cボックスにクリアレフトで、Bボックスに引きずらないようにする。
注意していただきたい点は、float（フロート）の定義にはwidth（幅）は必須であるということです。
では、float（フロート）を使ってヘッダー部分を横並びにしてみましょう。
/* -- header -- */
div#header {
width:960px;
height:59px;
}
div#header h2#logo {
width:615px;
float:left;
}
div#header ul {
width:165px;
float:left;
margin-top:29px;
}
div#header form {
width:180px;
float:right;
margin-top:30px;
}
ブラウザで確認すると下記のようになります。
ロゴ、ヘッダーナビゲーション、検索フィールドが横並びになりましたか？
次はロールオーバーの設定です。
ロールオーバーと画像置換
ロールオーバーとは、マウスを置いた箇所の画像が変化することを言います。
ロールオーバーの設定にはいくつかの方法がありますが、今回はCSSのみでロールオーバーする方法で、「画像置換」と呼ばれる手法をご紹介いたします。
画像置換を用いる理由は、IE6、7などで、セキュリティーの強化が図られたことです。
JavaScriptなどのプログラム言語でロールオーバーを設定すると、
[このコンテンツを許可しますか？]というポップアップ表示が出てしまいます。
ユーザーが[許可しない]を選択すると、JavaScriptが許可されないため、ロールオーバー部分は何の変化もしません。
ロールオーバーする部分は、できるだけ多くの人に「ここはクリックするところなんだよ」とわかっていただきたい重要な箇所です。このような理由から、特にグローバルメニューでは、CSSでの設定をお奨めします。
また、画像置換でロールオーバーを設置すると、SEOに有利であることも挙げられます。
画像置換で配置されたロールオーバーは、人間には画像に見えていますが、コンピューターはテキストとして認識します。
画像に記述されたalt属性よりも、テキストの方がコンピューターの評価が高いため、SEOの内部施策としても広く使用されている手法です。
JavaScriptを使ったロールオーバー
DreamweaverやホームページビルダーなどのWEBオーサリングソフトを使うと、自動でJavaScriptを生成して、ロールオーバーを実現してくれます。
CSSでの画像置換を使った、ロールオーバーが難しい場合は、こちらの機能で代替して置いても良いかもしれません。
では、画像置換の仕組みを説明します。
「画像をスライスする」で用意しておいた、グローバルナビゲーション、ヘッダーナビゲーションの画像を使います。
メニューが2つつながっているものです。
- <a>要素に幅を入れ、高さ（height）を0（ゼロ）にする。
高さを0にするのは、cssをオフにした状態でテキストが表示されるようにするためです。 - 背景に画像を入れる。
- <a>要素はインラインレベル要素なので、ブロックレベル要素のように装ってもらう。
- 高さ（height）分のpadding-topで画像分の高さを出す。
- 背景に入れる画像は通常時とマウスオーバー時の画像2つを組み合わせたものを使う。
これは「画像のプリロード」という技法で、マウスオーバーするたびに違う画像を参照するのではなく、あらかじめ読み込んでおくというものです。マウスオーバーのたびにそれぞれの画像を読み込むと、画像が表示されなくなりチラつく場合があるためです。 - a:hoverでマウスオーバーの変化を加える。
ヘッダーナビゲーションの場合は、以下のようなソースになります。
div#header {
width:960px;
height:59px;
}
div#header h2#logo {
width:615px;
float:left;
}
div#header ul {
width:165px;
float:left;
margin-top:29px;
}
div#header ul li {
display:inline;
}
div#header ul li a {
float:left;
height:0px;
padding-top:23px;
background-image:url(../images/bg_hnav.jpg);
background-repeat:no-repeat;
overflow:hidden;
}
div#header ul li#hn_top a { width:55px; background-position: 0 0; }
div#header ul li#hn_sitemap a { width:107px; background-position: -55px 0; }
div#header ul li#hn_top a:hover { background-position: 0 -23px; }
div#header ul li#hn_sitemap a:hover { background-position: -55px -23px; }
ブラウザで、マウスオーバーの変化を確認してください。
グローバルナビゲーションのcssも同じ要領で記述してみましょう。
/* -- globalNav -- */
ul#globalNav {
clear:both;
width:960px;
}
ul#globalNav li {
display:inline;
}
ul#globalNav li a {
float:left;
height:0px;
padding-top:40px;
background-image:url(../images/bg_gnav.jpg);
background-repeat:no-repeat;
overflow:hidden;
}
ul#globalNav li#gn_production a { width:171px; background-position: 0 0; }
ul#globalNav li#gn_seo a { width:118px; background-position: -171px 0; }
ul#globalNav li#gn_sem a { width:115px; background-position: -289px 0; }
ul#globalNav li#gn_seotool a { width:157px; background-position: -404px 0; }
ul#globalNav li#gn_advertisement a { width:111px; background-position: -561px 0; }
ul#globalNav li#gn_failure a { width:114px; background-position: -672px 0; }
ul#globalNav li#gn_link a { width:101px; background-position: -786px 0; }
ul#globalNav li#gn_blog a { width:73px; background-position: -887px 0; }
ul#globalNav li#gn_production a:hover { background-position: 0 -40px; }
ul#globalNav li#gn_seo a:hover { background-position: -171px -40px; }
ul#globalNav li#gn_sem a:hover { background-position: -289px -40px; }
ul#globalNav li#gn_seotool a:hover { background-position: -404px -40px; }
ul#globalNav li#gn_advertisement a:hover { background-position: -561px -40px; }
ul#globalNav li#gn_failure a:hover { background-position: -672px -40px; }
ul#globalNav li#gn_link a:hover { background-position: -786px -40px; }
ul#globalNav li#gn_blog a:hover { background-position: -887px -40px; }
ブラウザで、マウスオーバーの変化を確認してください。
メインボックス
次はメインボックス部分です。
contentsとかwrapperなどと呼ばれる部分を内包する部分です。
「鈴木智子のホームページのアクセスアップ講座」では、トップページのデザインと中のページのデザインは共通ではないので、トップページのみに適用する部分をtop_mainBoxとし、こちらは、「トップページCSSについて」で、詳しく説明しますが、toppage.cssの方に設定します。
中ページに適用する部分は、トップページ以外、共通で使うので、mainBox,localNav,contentsとしてcommon.cssに設定します。
div#mainBox {
width:960px;
margin:10px auto 0px auto;
background:url(../img/bg_mainBox.jpg) repeat-y;
}
div#localNav {
width:250px;
margin-bottom:50px;
float:left;
}
div#contents {
width:690px;
float:right;
margin-bottom:50px;
}
フッター
メインボックスの後はフッター（footer）部分です。
「鈴木智子のホームページのアクセスアップ講座」では、以下のようになります。
/* -- footer -- */
div#footer {
clear:both;
width:960px;
margin:50px auto 0px auto;
font-size:90%;
text-align:center;
}
div#footer ul#footerNav {
padding:80px 0px 10px 0px;
background:url(../images/bg_footer.jpg) left bottom no-repeat;
}
div#footer ul#footerNav li {
display:inline;
list-item-position:inside;
margin-left:10px;
padding-right:10px;
border-right:1px #999999 solid;
}
div#footer ul#footerNav li a {
color:#666666;
}
div#footer ul#footerNav li a:hover {
text-decoration:underline;
}
div#footer ul#footerNav li.end {
display:inline;
list-item-position:inside;
margin-left:10px;
border-right:none;
}
div#footer address {
width:400px;
float:left;
margin:10px 0px 20px 0px;
}
div#footer address a {
color:#666666;
text-decoration:none;
}
div#footer ul#footerSponsor {
width:500px;
float:right;
margin:10px 0px 20px 0px;
}
div#footer ul#footerSponsor li {
display:inline;
list-item-position:inside;
margin-left:10px;
padding-left:10px;
background:url(../images/icon_arrow.jpg) 0px 2px no-repeat;
}
div#footer ul#footerSponsor li a {
color:#666666;
}
div#footer ul#footerSponsor li a:hover {
text-decoration:underline;
}
さて、出来上がりのデザインを見てください。
IE6,7では問題なく表示されていますが、FireFoxでは下記のようになっているはずです。
赤い四角部分にご注目！
IEではcontainerの背景に敷き詰めた両脇のドロップシャドウが表示されていますが、FireFoxは表現されていません。
これはFireFoxが間違っているのではなく、IEが勘違いをしているだけなのです。
この点は後の章、「CSSハックについて」で回避方法を説明いたしますので、参考にしてください。
フォントやフォームやテーブルなどの見た目
最後に全てのhtmlで共通に使う、見た目のクラスを用意しておきます。
「鈴木智子のホームページのアクセスアップ講座」では、以下のようになります。
/*
-------------------------------
layout [=tab]
-------------------------------
*/
/*------- table -------*/
table.layout {
margin:15px 20px 0px 20px;
}
table.layout td {
padding:0px 5px 5px 5px;
vertical-align:top;
}
table.layout_border {
margin:15px 10px 0px 10px;
border:1px #cccccc solid;
}
table.layout_border thead th {
background-color:#e8f6ff;
color:#333333;
padding:8px;
line-height:160%;
border:1px #cccccc solid;
vertical-align:top;
text-align: center;
}
table.layout_border tfoot th {
background-color:#fffde8;
color:#333333;
padding:8px;
line-height:160%;
border:1px #cccccc solid;
vertical-align:top;
}
table.layout_border tfoot td {
padding:8px;
line-height:160%;
border:none;
vertical-align:top;
text-align:center;
}
table.layout_border tbody th {
background-color:#fffde8;
color:#333333;
padding:8px;
line-height:160%;
border:1px #cccccc solid;
vertical-align:top;
text-align: center;
}
table.layout_border tbody td {
color:#333333;
padding:8px;
line-height:160%;
border:1px #cccccc solid;
vertical-align:top;
}
table.layout_border img {
margin:0px !important;
}
table.layout_border td.item {
text-align:center;
color:#333333;
background-color:#e8f6ff;
}
table.layout_border td.subItem {
color:#333333;
background-color:#fffde8;
}
table.layout_border td li {
padding-left:8px;
background:url(../img/icon_square.jpg) 0px 9px no-repeat;
}
table.layout_border caption {
font-weight:bold;
background:url(../img/icon_table.jpg) no-repeat;
width:690px;
margin:0px 0px 0px -5px;
padding:10px 10px 15px 50px;
}
/*------- list -------*/
.list_square {
margin-top:15px;
}
.list_square li {
margin:0px 10px 0px 15px;
padding-left:8px;
background:url(../img/icon_square.jpg) 0px 0.6em no-repeat;
}
.list_c_arrow {
margin-top:7px;
}
.list_c_arrow li {
margin:0px 10px 0px 15px;
padding-left:15px;
background:url(../img/icon_c_arrow.jpg) 0px 5px no-repeat;
}
.list_d_arrow {
margin-top:15px;
}
.list_d_arrow li {
margin:15px 10px 0px 10px;
padding-left:15px;
background:url(../img/icon_d_arrow.jpg) 0px 5px no-repeat;
}
.list_e_arrow {
margin-top:15px;
}
.list_e_arrow li {
margin:15px 10px 0px 10px;
padding-left:15px;
background:url(../img/icon_e_arrow.jpg) 0px 5px no-repeat;
}
ol.list_decimal {
margin:15px 10px 0px 30px;
list-style-type:decimal;
}
/*------- textarea/input/pre/kbd/blockquote -------*/
textarea.code {
width:660px;
height:200px;
margin:15px 10px 0px 10px;
padding-left:10px;
}
textarea.input_field {
width:400px;
}
input.input_area {
width:200px;
}
kbd {
margin:0px 2px;
padding:2px 2px 0px 3px;
font-weight:bold;
background-color:#eeeeee;
border-top:1px #cccccc solid;
border-right:2px #999999 solid;
border-bottom:2px #999999 solid;
border-left:1px #cccccc solid;
}
blockquote {
margin:20px 10px 0px 10px;
padding:0px 0px 10px 0px;
background-color:#f5fefd;
border:1px #dcdcdc solid;
}
/*------- font -------*/
.emphasis {
color:#CC0000;
font-size: 150%;
}
/*------- inline -------*/
.notice {
padding-left:10px;
background:url(../img/icon_attention.jpg) 0px 4px no-repeat;
}
.pitems {
background:url(../img/icon_pitems.jpg) 0px 5px no-repeat;
margin: 15px 10px 0px 10px;
padding-left:15px;
}
以上でcommon.cssの説明を終わりにします。
次は、各ページ固有の設定を「トップページCSSについて」で説明してゆきます。
