OKANOーSTYLE-3
OKANOWEBで使っているレイアウトとスタイルの概要です。実際にはSSIも使用しているので細かなところは割愛しています。
また、本記事を作成後の修正は校正していません。各ブロック内の要素に対するスタイルは、記事作成時のものです。
/*左サイドバー開始 */
<div id="sidebar">
メニューなど
</div>
/*左サイドバー終了 */
/*右サイドバー開始 */
<div id="sidebar-r">
メニューなど
</div>
/*右サイドバー終了 */
/*コンテンツ開始 */
<div id="content">
</div>
/*コンテンツ終了 */
/*フッター開始 */
<div id="footer">
/*可変バナー画像の左サイド用画像 */
<div id="footerleft">
</div>
</div>
/*フッター終了 */
</body>
OKANOーSTYLE-3.CSS
/*全体のレイアウト*/
/* コンテンツ 設定 */
/* コンテンツブロック内の要素の指定 */
div#content {
background: #fff url('メインコンテンツ右上の飾り') no-repeat right top;
margin: 0px 0px 0 205px;
color: #000;
min-height: 1024px;
border: 1px #3366FF solid;
}
div#content {
position: relative;
top:0px;
margin: 0px 0px 0 o;
background: #fff url('メインコンテンツ右上の飾り') no-repeat right top;
color: #000;
min-height: 1024px;
border: 1px #3366FF solid;
float:left;
clear: both;
}
/* ブロック内の要素の指定 */
div#content iframe {
margin: 0 0 0 10px;
}
div#content ul {
font-size: 0.93em;
margin: 0 0 0 40px;
padding-right: 10px;
}
div#content ol {
font-size: 0.93em;
margin: 0 0 0 50px;
}
div#content dl.topmenu dt {
font-size: 1.2em;
}
/* サイドバー 設定 */
/* 右サイドバー */
div#sidebar {
color: #000;
background: #fff;
font-size: .85em;
float: left;
width: 200px;
border: 1px #3366FF solid;
text-align: center;
}
/* 左サイドバー */
div#sidebar-r {
position: relative;
margin: 0px 0 0 5px;
color: #000;
background: #fff;
font-size: .85em;
float: right;
width: 200px;
border: 1px #3366FF solid;
text-align: center;
clear: both;
}
/* サイドバー共通 */
div#sidebar h4,div#sidebar-r h4 {
font-size: 1em;
padding: 5px 0 2px 0;
margin: 0px;
color: #000000;
background: #9999ff url('../images/sidetitleb.jpg') repeat;
text-align: center;
}
div#sidebar h3,div#sidebar-r h3 {
font-size: 1em;
padding: 5px 0 2px 0;
margin: 0px;
color: #000000;
background: #9999ff url('../images/sidetitleb.jpg') repeat;
text-align: center;
}
div#sidebar h2,div#sidebar-r h2 {
font-size: 1em;
padding: 5px 0 2px 0;
margin: 0px;
color: #000000;
background: #9999ff url('../images/sidetitleb.jpg') repeat;
text-align: center;
}
div#sidebar p,div#sidebar-r p {
font-size: .9em;
margin-left: 1em;
margin-right: .5em;
margin-top: .5em;
text-align: center;
}
div#sidebar p.bar ,div#sidebar-r p.bar {
border-bottom: 1px #3366FF solid;
font-size: .9em;
margin: 0px;
padding: 0 5px 0 5px;
text-align: left;
}
div#sidebar ol,div#sidebar-r ol {
margin-top: 0px;
color: #000;
background: #ffffff;
list-style-type: none;
border-bottom: 1px #3366FF solid;
}
div#sidebar ul,div#sidebar-r ul {
margin-top: 0px;
color: #000;
background: #ffffff;
list-style-type: none;
border-bottom: 1px #3366FF solid;
}
div#sidebar ul ul,div#sidebar-r ul ul {
list-style-type: none;
border-bottom: 1px #3366FF solid;
}
div#sidebar li {
background: url('../images/head.gif') no-repeat right top;
border-top: 1px #3366FF solid;
text-align: justify;
line-height: 150%;
}
div#sidebar-r li {
background: url('../images/head.gif') no-repeat left top;
border-top: 1px #3366FF solid;
text-align: justify;
line-height: 150%;
}
div#sidebar li a,div#sidebar-r li a {
margin-left: 8px;
}
div#sidebar li li,div#sidebar-r li li {
border-top: 1px #3366FF solid;
border-left: 1px #3366FF solid;
text-align: justify;
margin-left: 10px;
}
div#sidebar dd {
margin: 0px;
}
div#sidebar li a:active,div#sidebar-r li a:active {
color: #f00;
background: #ffffff;
text-decoration: underline;
}
div#sidebar li li a:active,div#sidebar-r li li a:active {
background: #ffffff;
text-decoration: underline;
color: #f00;
}
/* フッター 設定 */
/* フッターブロックの指定 */
div#footer {
height: 90px;
font-size: .8em;
color: #000;
background: #00cccc url（背景画像') no-repeat right bottom;
text-align: center;
padding-top: 10px;
clear: both;
}
/* 横幅可変のための左サイド整形用 */
div#footer div#footerleft {
width: 20px;
height: 90px;
top: 0px;
left: 0px;
float: left;
clear: left;
background: #00cccc l url('背景画像') no-repeat left bottom;
}
/* フッターブロック内の要素の指定 */
div#footer img {
text-align: center;
}
コンテンツ
広告
ＨＴＭＬ解説
CSSの小道具
広告
