トップページ > ご利用ガイド > スタイルシート解説

ここから本文です。

スタイルシート解説

1カラム01-05のテンプレートを例に説明しています。
全てを記載しておりませんので、下記を参考にしてください。テンプレートをカスタマイズする際には充分に理解した上で変更してください。テンプレートが崩れてもサポートはしておりませんので、ご了承ください。

css/base.css：：ページ全体の構造スタイルシート

* {
font-size:100%;
line-height:1.6;
margin:0px;
padding:0px;
list-style:none;
}

解説
ブラウザによって様々な初期設定をここで統一するために全て揃えています。

body {
font-size:0.8em;
text-align:center;
color:#333333;
background-color:#F3F3F3;
}

解説
<body>に対して、フォントサイズ、色、背景色などを変更しています。

#wrapper {
width: 898px;
margin: 0px auto 0px auto;
background-color:#FFFFFF;
border: 1px solid #DDDDDD;
text-align:left;
}

解説
ID属性「wrapper」の設定です。
横幅、位置の配置（センター）、背景色の指定、全体の枠にボーダーを指定しています。
テキストは左寄せで設定。

#global_nav {
clear:both;
background-color: #05112B;
background-image: url(../images/gnav_bg.jpg);
background-repeat: repeat-x;
}
#global_nav li {
float:left;
background-image: url(../images/gnav_line.jpg);
background-repeat: no-repeat;
background-position: right top;
padding: 7px 10px 3px 7px;
}

解説
ID属性「global_nav」（グローバルナビ）の設定です。
ここではheaderでfloat設定をしている場合に、「clear:both;」を指定し、解除しています（clear:both;が解除設定とは限りません）。

各ページのナビゲーションは、リストタグにて指定しています。
floatの左寄せに設定、背景画像として、右側に区切り線として表示させています。背景画像の位置を右、上に設定です。

#footer {
padding: 0px 10px 10px 5px;
background-color: #F9F9F9;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #DDDDDD;
}
#footer li {
font-size:10px;
float:left;
padding: 5px 7px 3px 7px;
background-image: url(../images/lnav_line.gif);
background-repeat: no-repeat;
background-position: right center;
}

解説
ID属性「footer」（フッター）の設定です。
特別な設定はしていませんので参考にしてください。

フッターナビゲーションは、リストタグにて指定しています。
グローバルバビと同様な設定にしていますので、わかりやすいかと思います。

css/text.css：：テキスト関連スタイルシート

.top_img_shadow {
background-image: url(../images/top_shadow.jpg);
background-repeat: repeat-x;
background-position: 0px 0px;
margin-bottom: 20px;
}

解説
トップページの写真画像の部分の下のシャドウを設定しています。不用でしたら、この部分は使用しなくても大丈夫です。

h2.h2_title {
margin: 0px auto 20px auto;
font-weight: bold;
color: #FFFFFF;
background-image: url(../images/h2_bg.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
height: 43px;
width: 810px;
text-align: left;
font-size: 18px;
padding-top: 12px;
padding-left: 20px;
}

解説
見出しタグH2のクラス指定です。
このスタイルを使うことで背景に画像が適用されます。

同様に、H3のスタイルもあります。

ul.ul_box {
border: 1px solid #DDDDDD;
}
ul.ul_free, ul.ul_box {
padding: 10px 10px 10px 10px;
margin-bottom:10px;
}
ul.ul_free li, ul.ul_box li {
background-image: url(../images/list_icon.gif);
background-repeat: no-repeat;
background-position: 0px 8px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 15px;
}

解説
リストタグのクラス指定です。
ulタグにクラス指定すれば、その中のliタグに適用されます。

まわりにボーダーがあるスタイル（ul_box）とないスタイル（ul_free）をご用意しました。

このリストタグへクラス指定しない場合は、新規でリストスタイルを指定する必要があります。

.p_photo_l img {
float:left;
border: 1px solid #DDDDDD;
background-color: #FFFFFF;
padding: 4px;
margin-right: 10px;
margin-bottom: 10px;
}
.p_photo_r img {
float:right;
border: 1px solid #DDDDDD;
background-color: #FFFFFF;
padding: 4px;
margin-left: 10px;
margin-bottom: 10px;
}

解説
写真画像などを表示させる場合にご利用ください。
画像を右側に指定、左側に指定の場合と用意させていただきましたので、各pageディレクトリ内のページを参考にしてください。

table.table_top {
width:100%;
margin-bottom:20px;
}
table.table_top caption {
text-align:left;
font-size:14px;
font-weight:bold;
padding: 3px 5px 3px 5px;
border-top-width: 2px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #07102D;
border-right-color: #CCCCCC;
border-left-color: #CCCCCC;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
background-color: #F5F5F5;
}
table.table_top th {
text-align: left;
vertical-align: top;
padding: 3px 5px 3px 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #EEEEEE;
}
table.table_top td {
text-align: left;
vertical-align: top;
padding: 3px 5px 3px 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #EEEEEE;
}

解説
トップページのテーブル、クラス指定です。

tableに対し、クラス指定することでcaption、TH、TDが各設定されます。base.css内にて初期設定用に全てのマージンを0にしていますので、テーブルタグは、クラス指定しないと、余白などは指定しても利きませんのでご注意ください。

キャプションなどの装飾は、トップページの新着部分などにあたりますので、参考にしてください。

もちろん、ご自分の好きな装飾に変更して構いません。

※上記はあくまでも当サイト内でのスタイルシートの設定で、一概に正しいとは限りませんのでご了承ください。