CSSファイル作成③
ナビゲーションボタン設定
ここからはナビゲーションボタンの設定をしていきます。以下のCSSのコードを記述し、確認していきましょう。
/*ナビボタン*/
nav{
margin-top: 10px
}
nav li{
float: left;
}
#nav1:hover{
filter:alpha(opacity=60);
opacity:0.6;
}
#nav2:hover{
filter:alpha(opacity=60);
opacity:0.6;
}
#nav3:hover{
filter:alpha(opacity=60);
opacity:0.6;
}
#nav4:hover{
filter:alpha(opacity=60);
opacity:0.6;
}コンテンツ同士のマージン
始めにナビゲーションボタンを配置したnav要素のスタイルをCSSで設定していきます。まずは、コンテンツのマージンを考えましょう。
nav{
margin-top: 10px
}「header」下側マージン10ピクセル、「nav」上側マージン15ピクセルの指定だが、10＋15で25ピクセルにはならずに相殺されて15ピクセルとなるので注意が必要です。ですから、どちらかにマージンを設定すれば良いということになります。
ボタン同士の隙間
CSSを設定していない状態では、ボタンとボタンの間に隙間があると思いますが、設定をすると以下のようになります。
CSSでは以下のように記述するだけで、隙間を詰めることができます。
nav li{
float: left;
}「float:left」で指定することで、左詰めで横幅が許す限り画像が並んでいきます。しかし、「wrapper」は横幅960ピクセルで指定したので、ピッタリ収まるようになります。
マウスオーバーで色の変更
ナビゲーションボタンの上にマウスポインタをのせると色が変わり、離すと元の色になるように設定していきましょう。
HTMLファイルでは、「li id=”nav1″」から「li id=”nav4″」と設定してきました。この4つに対してのセレクタで、「hover」を追記し、文字色の変化を以下のコードのように記述します。
#nav1:hover{
filter:alpha(opacity=60);
opacity:0.6;
}
#nav2:hover{
filter:alpha(opacity=60);
opacity:0.6;
}
#nav3:hover{
filter:alpha(opacity=60);
opacity:0.6;
}
#nav4:hover{
filter:alpha(opacity=60);
opacity:0.6;
}メインコンテンツの設定
ブロックごとのスタイル
ここでは、メインコンテンツのスタイルを定義していきますが、今までの基本をそのまま生かすだけです。以下にコード全体を記すので、順を追って説明します。
/* おすすめ情報*/
#global_info{
width: 670px;
float: left;
margin-top: 30px;
margin-right: 30px;
}
#global_info img{
border: 5px #fff solid;
}
.info_photo01{
width: 300px;
float: left;
margin-right: 30px;
margin-bottom: 30px;
}
.info01{
width: 340px;
float: left;
margin-bottom: 30px;
}
.info_photo02{
width: 300px;
float: left;
margin-right: 30px;
margin-bottom: 30px;
clear:left;
}
.info02{
width: 340px;
float: left;
margin-bottom: 30px;
}
.intro{
width: 670px;
float: left;
margin-bottom: 30px;
}
構造を確認しながら、進めていきましょう。
「global_info」のスタイルを定義
#global_info{
width: 670px;
float: left;
margin-top: 30px;
margin-right: 30px;
}
「gloabal_info」では、HTMLファイルで配置した「div id=”global_info”」に対応する形でセレクタを定義します。スタイルでは、主にマージンと幅を決めています。右側に「side_bar」を配置するので、「float:left」で左に寄せておくことも忘れずに行いましょう。また、マージンとして30ピクセル空けておくことも必要です。
写真のフレーム
#global_info img{
border: 5px #fff solid;
}次に「global_info img」を定義します。これは「global_info内のimg要素」にのみ適用する子孫セレクタで、borderで枠を設定します。
info_photo01のスタイルを定義
.info_photo01{
width: 300px;
float: left;
margin-right: 30px;
margin-bottom: 30px;
}写真を配置している「div class=”info_photo01″」という要素に対し、セレクタを設定します。スタイルでは、幅とマージンの設定を基本設計で決めたサイズにしておきます。
見出しと文章のスタイル
文章部分の見出しと本文のスタイルを設定していきます。section要素に対し、「info01」というクラスセレクタを定義し、レイアウトを整えておきます。とくに見出しは大きく、表示し見やすいページを心がけましょう。
info01という名前でクラスセレクタを定義
.info01{
width: 340px;
float: left;
margin-bottom: 30px;
} 文章内の340ピクセルは次のように算出しています。「#global_infoの幅670px」-「.info_photo01の幅300px」+「.info_photo01の右のマージン30px」＝340px
同様にinfo02のセレクタも記述しておきましょう。
見出しのスタイルを定義
.item_heading{
font-weight: bold;
margin-bottom: 10px;
}HTMLファイルでは、p要素に「class=”item_heading”」を追記し、item_headingというクラスセレクタを設定しています。
このようにCSSでマージンを設定すれば、小見出しと本文の間に隙間を自由に設定できるます。
「おすすめ情報」のスタイル
「おすすめ情報」と書かれた部分のCSSを設定していきましょう。ここには、コンテンツの横幅と文字の左寄せ、下側の余白を設定するだけです。CSSソースも以下のようにシンプルになります。
.intro{
width: 670px;
float: left;
margin-bottom: 30px;
}特に特別なことはしていませんが、sectionタグに「class=”intro”」を追記してintroというクラスセレクタを設定しています。