トップページCSSについて
ホームページでは、トップページと中ページで異なるレイアウトが採用される場合があります。私の場合もそうです。toppageにのみ適応させたい部分をコーディングする方法を説明します。
下図の黒く塗られた部分は、トップページだけにあるレイアウトです。
要するに、ここで説明するのは、<div id ="top_mainBox" ></div>の中身ということになります。
top_MainBox内は、大きな塊3つにわけられます。
上記3つのブロックのうち、キービジュアルにはdivタグやid属性、class属性を設置しません。
なぜなら、私のホームページでは、このブロックはデザイン上、マージンやパディングなどのcssを設定する必要がないからです。
グローバルメニューとキービジュアルの間のマージンはtop_mainBoxに設定されています。
次にindex.htmlを開き、<div id="top_contents"></div>と<div id="top_sideArea"></div>をしかるべきところに記述してください。
そして秀丸で新規ファイルを開き、そこに下記ソースを加え、toppage.cssという名前で「homepage」フォルダ内の「css」フォルダ内に保存。
その後、
index.htmlにもtoppage.cssのリンクを加えてください。
div#top_contents {
width:500px;
float:left;
background:url(../img/bg_top_contents.jpg) left bottom no-repeat;
}
div#top_sideArea {
width:445px;
float:right;
}
ブラウザで確認すると、top_contentsとtop_sideareaが横並びになったと思います。
次にtop_contentsの中の設定をしてみましょう。
まず、top_contentsには<h2>、<h3>、<p>のブロックレベル要素が存在します。
<h2>にはすでに画像が設置してありますので、<h3>の背景画像や文字の大きさ・色、<p>のマージンなどを設定します。
下記cssを加えてください。
div#top_contents h3 {
margin:20px 0px 0px 5px;
padding:13px 10px 15px 40px;
font-size:120%;
font-weight:bold;
background:url(../img/bg_top_h3.jpg) no-repeat;
}
div#top_contents p {
margin:15px;
}
角丸デザイン
次が少し頭を使わなくてはいけない部分です。
top_contentsの四隅は角が丸くなっています。
角丸のデザインは柔らかさ・ポップなどの印象を与えるデザインで、最近のサイトデザインでは好んで使われています。
このデザインがborderプロパティのようにcssのみで表現できればよいのですが、現在のcss2.0は角丸に対応していません（3.0の草案には登場しています）。
そのため、メジャーブラウザで角丸を表現したければ、画像で対応することになります。
文字サイズを大きくしてもきちんと角丸で挟まれるようにコーディングするための、2つの代表的な方法があります。
cssと角丸デザイン 3つの画像を使用する方法
まず、3つの画像を使用して角丸を表現する方法を紹介します。
top_contentsにこの方法を使用した場合は、下記の手順になります。
- <div id="top_contents">のすぐ後に、角丸画像の上蓋部分に<img>で、</div>の直前に角丸画像の下蓋部分を<img>で入れます。
- 真ん中のボーダー部分は、<h2>と<p>すべてを<div id="id属性名"></div>で挟みます。
上蓋と、下蓋を一緒に挟まないように注意してください。
htmlの修正ができたら、今度はcssを加えます。
#id属性名 {
width:500px;
background:url(img/画像名.jpg) repeat-x;
}
この方法を使用すると、コンテンツの縦幅がどこまで伸びても角丸デザインが持続するというメリットがあります。
ただし、htmlに不必要な<img>タグが入ってしまうデメリットもあります。
cssと角丸デザイン 2つの画像を背景使用する方法
次に、2つの画像で角丸デザインを再現する方法をご紹介します。
先程は3つにスライスした角丸部分ですが、それを下図のように2つにスライスします。
上蓋部分の画像は1と変わりませんが、下蓋とサイドボーダーを1枚の画像として切り出しています。
top_contentsにこの方法を使用した場合は、下記の手順になります。
- <div id="top_contents"のすぐ後に、角丸画像の下蓋部分を<img>で入れます。
- cssのtop_contentsの背景画像に下蓋+サイドボーダーの画像を設定します。
div#top_contents {
width:500px;
float:left;
background:url(../images/画像名) left bottom no-repeat;
}
この方法だと、不必要な<img>タグを一つ削除できるというメリットがあります。
ただし、コンテンツの縦幅が画像の縦幅を超えると、左右のボーダーがなくなるというデメリットがあります。よって、縦幅がどれくらいになるのか分からないデザインでは使用できません。
ある程度縦幅が予測できる場合でも、ユーザーがブラウザのフォントサイズを最大にしてもボーダーが途切れないように、かなり縦長の画像を作成する必要があります。
このサイトでは、上記の方法を少しカスタマイズして使用しています。
<h2>で配置した「プロのノウハウを公開する理由」の画像が、ちょうど角丸の上蓋の位置にあります。
そこで、この画像を上蓋として利用してしまいます。
後は2と同じように、下蓋とサイドボーダーに当たる部分を大きな縦長の画像として切り出し、top_contentsの背景として指定します。
1や2の方法と比べると、htmlに不必要なタグがないことが分かります。
いつでもこの方法が使えるわけではありませんが、SEOには「シンプルなhtml」が必須になりますので、覚えておくと便利です。
さて、これで左側部分の設定は終了です。
次は右側部分top_sideAreaに取り掛かりましょう。
まずはtopics部分。ここも角丸ですね。
top_contentsと同じ方法でコーディングしてしまいます。
<div id="topics"> <h2><img src="images/top_topics.jpg" alt="TOPICS" width="445" height="43" /></h2> <div id="topics_item"> <dl> <dt>09.08.11</dt> <dd>ホームページ開設</dd> </dl> </div> </div>
次はcssです。
div#top_sideArea div#topics {
background:url(../img/bg_topics.jpg) no-repeat left bottom;
}
div#top_sideArea div#topics_item {
width:443px;
height:200px;
overflow:auto;
scrollbar-track-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #e7e7e7;
scrollbar-darkshadow-color: #ffffff;
scrollbar-highlight-color: #e7e7e7;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #999999;
}
div#top_sideArea div#topics_item dl {
background:url(../img/top_dottedLine.jpg) no-repeat center bottom;
}
div#top_sideArea div#topics_item dt {
width: 60px;
float: left;
padding:5px 0px 5px 10px;
}
div#top_sideArea div#topics_item dd {
width: 300px;
float: left;
padding:5px 0px 5px 10px;
}
現状は表示がおかしくなっていますが、設定は間違っていないので、このままにしておきます。
なぜ表示がおかしいかというと、フロートの解釈の問題なのです。
次の「CSSハックについて」で説明しますので、このままにしておいてください。
次はダイレクトリンクの設定に行きます。ここも角丸の設定があるので、1つ1つその設定をしなければなりません。
人物のイラストはとりあえず無視して、すべての角丸とレイアウトだけ行いましょう。
まずはhtmlのソースは、こうなります。
<div id="dLink"> <div class="dLink01"> <dl> <dt><a href="production.html">ホームページ制作講座</a></dt> <dd><a href="production.html">まだホームページを持っていない、リニューアルしたい等、制作に関する講座はこちら</a></dd> </dl> <p><img src="img/dLink01Btm.gif" width="219" height="2" alt="" /></p> <!--end div#dLink01--> </div> <div class="dLink02"> <dl> <dt><a href="seo.html">SEO・SEM講座</a></dt> <dd><a href="seo.html">目指せ、上位表示！検索エンジン対策(SEO)、SEMについてはこちら</a></dd> </dl> <p><img src="img/dLink02Btm.gif" width="219" height="2" alt="" /></p> <!--end div#dLink02--> </div> <div class="dLink03"> <dl> <dt><a href="advertisement.html">広告講座</a></dt> <dd><a href="advertisement.html">ホームページを軸とした広告についてはこちら</a></dd> </dl> <p><img src="img/dLink03Btm.gif" width="219" height="2" alt="" /></p> <!--end div#dLink03--> </div> <div class="dLink04"> <dl> <dt><a href="seotool.html">SEOツール講座</a></dt> <dd><a href="seotool.html">SEO対策の結果を目で確認したい！そんな時に便利なSEOツールを紹介</a></dd> </dl> <p><img src="img/dLink04Btm.gif" width="219" height="2" alt="" /></p> <!--end div#dLink04--> </div> <!--end div#dLink--> </div> <!--end div#rightside--> </div>
だんだん複雑になってきましたが、コメントをきちんと入れるようにすれば、わかりやすいと思います。
そして、cssを設定します。
#dLink {
margin-top: 40px;
width: 447px;
}
#dLink .dLink01 {
width: 219px;
background-image: url(../img/dlink01Bg.gif);
background-repeat: repeat-y;
background-position: left center;
float: left;
margin-bottom: 40px;
}
.dLink01 dt {
background-image: url(../img/dLink01Top.gif);
background-repeat: no-repeat;
background-position: left top;
height: 26px;
width: 159px;
padding-top: 12px;
padding-left: 60px;
}
.dLink01 dt a {
color: #ffffff;
text-decoration: none;
font-size: 140%;
font-weight: bold;
}
#dLink .dLink02 {
width: 219px;
background-image: url(../img/dlink02Bg.gif);
background-repeat: repeat-y;
background-position: left center;
float: right;
margin-bottom: 40px;
}
.dLink02 dt {
background-image: url(../img/dLink02Top.gif);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
height: 26px;
width: 219px;
padding-top: 12px;
}
.dLink02 dt a {
color: #ffffff;
text-decoration: none;
font-size: 140%;
font-weight: bold;
}
#dLink .dLink03 {
width: 219px;
background-image: url(../img/dlink03Bg.gif);
background-repeat: repeat-y;
background-position: left center;
clear: both;
float: left;
}
.dLink03 dt {
background-image: url(../img/dLink03Top.gif);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
height: 26px;
width: 219px;
padding-top: 12px;
}
.dLink03 dt a {
color: #ffffff;
text-decoration: none;
font-size: 140%;
font-weight: bold;
}
#dLink .dLink04 {
width: 219px;
background-image: url(../img/dlink04Bg.gif);
background-repeat: repeat-y;
background-position: left center;
float: right;
}
.dLink04 dt {
background-image: url(../img/dLink04Top.gif);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
height: 26px;
width: 219px;
padding-top: 12px;
}
.dLink04 dt a {
color: #ffffff;
text-decoration: none;
font-size: 140%;
font-weight: bold;
}
#dLink dd {
width: 140px;
margin-left: 70px;
padding: 5px;
font-size: 120%;
line-height: 130%;
}
#dLink dd a:link {
color: #000000;
text-decoration: none;
}
#dLink dd a:visited {
color: #000000;
text-decoration: none;
}
#dLink dd a:hover {
color: #333333;
text-decoration: none;
}
#dLink dd a:active {
color: #000000;
text-decoration: none;
}
ではブラウザで見てください。
まだ完成ではありませんが、cssの基本を使って設定できるのはここまでです。
これからはブラウザ特有のバグを解消する「CSSハックについて」や「JavaScriptについて」を使って、見た目を調整してゆきます。
