OKANOーSTYLE-2R
OKANOWEBで使っているレイアウトとスタイルの概要です。実際にはSSIも使用しているので細かなところは割愛しています。
また、本記事を作成後の修正は校正していません。各ブロック内の要素に対するスタイルは、記事作成時のものです。
<body>
/*バナー開始 */
<div id="banner">
/*可変バナー画像の左サイド用画像 解説 */
<div id="bannerleft">
</div>
/*トプナビゲーション開始 */
<div id="top-navigation">
リストを一行で表示する
</div>
/*トプナビゲーション終了 */
</div>
/*バナー終了 */
/*ナビゲーション開始 */
<div id="navigation">
リストを一行で表示する
</div>
/*ナビゲーション開始 */
/*左サイドバー開始 */
<div id="sidebar">
メニューなど
</div>
/*左サイドバー終了 */
/*コンテンツ開始 */
<div id="content">
</div>
/*コンテンツ終了 */
/*フッター開始 */
<div id="footer">
/*可変バナー画像の左サイド用画像 */
<div id="footerleft">
</div>
</div>
/*フッター終了 */
</body>
OKANOーSTYLE-2R.CSS
/*全体のレイアウト*/
/* レイアウトID クラス 設定 */
/* バナー設定 */
/* バナーブロックのすべての要素のスペースをなくす */
div#banner * {
margin: 0px;
padding: 0px;
}
/* バナーの位置決めとバナー画像を背景として設定 */
div#banner {
position: relative;
margin-top: 0px;
margin-bottom: 0px;
color: #fff;
background: #3366FF url('背景画像') no- repeat right top;
width: 100%;
height: 100px;
}
/* 横幅可変のための左サイド整形用 */
div#banner div#bannerleft {
width: 20px;
height: 100px;
top: 0px;
left: 0px;
float: left;
clear: left;
background: #3366FF url('背景画像') no- repeat right repeat left top;
}
/* バナーブロック内の要素の指定 */
div#banner h1 {
font-size: 1.7em;
font-weight: bold;
color: #fff;
border: 0px;
padding-top: 20px;
}
div#banner a {
color: #fff;
background-color: transparent;
}
div#banner div.bannercm {
position: absolute;
top: 10px;
right: 5px;
clear: both;
}
div#banner p {
margin-top: 0.3em;
font-size: 0.8em;
margin-left: .5em;
margin-right: .5em;
line-height: 120%;
}
/* ナビゲーション*/
/*トップナビゲーションブロックのすべての要素のスペースをなくす */
div#top-navigation * {
margin: 0px;
padding: 0px;
}
/* トップナビゲーションブロック整形用 */
div#top-navigation {
color: #FFF;
margin-top: 0px;
margin-bottom: 0px;
background: #0033FF url('背景画像') repeat;
font-size: .9em;
width: 100%;
height: 23px;
text-align: center;
clear: both;
}
/* ブロック内の要素の指定 */
div#top-navigation ul {
display: inline; */
}
div#top-navigation li {
display: inline;
}
div#top-navigation a:link {
font-weight: bold;
color: #fff;
}
div#top-navigation a:visited {
font-weight: bold;
color: #fff;
}
div#top-navigation a:hover {
font-weight: bold;
color: #00f;
background: #FFFFFF;
}
div#top-navigation a:active {
color: #FFFF00;
background: #0033FF;
font-weight: bold;
text-decoration: underline;
}
/* ナビゲーション*/
/* ナビゲーションブロック整形用 */
div#navigation {
position: relative;
padding-right: 0px;
margin-right: 0px;
color: #000;
background: #00CCCC url('背景画像') repeat-x;
font-size: .8em;
width: 100%;
height: 25px;
}
/* バナーブロック内の要素の指定 */
div#navigation a ,div#navigation p,div#navigation form ,div#navigation img{
margin-top: 5px;
}
div#navigation a:link {
padding: 0 5px 0 5px;
font-weight: bold;
}
div#navigation a:visited {
padding: 0 5px 0 5px;
font-weight: bold;
}
div#navigation a:hover {
padding: 0 5px 0 5px;
font-weight: bold;
color: #990033;
}
div#navigation a:active {
padding: 0 5px 0 5px;
font-weight: bold;
text-decoration: underline;
}
/* コンテンツ 設定 */
/* コンテンツブロック内の要素の指定 */
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 {
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 h2 ,div#sidebar h3,div#sidebar h4{
font-size: 1em;
padding: 5px 0 2px 0;
margin: 0px;
color: #000000;
background: #9999ff url('背景画像') repeat;
text-align: center;
}
div#sidebar p {
font-size: .9em;
margin-left: 1em;
margin-right: .5em;
margin-top: .5em;
text-align: center;
}
div#sidebar ol {
margin-top: 0px;
color: #000;
background: #ffffff;
list-style-type: none;
border-bottom: 1px #3366FF solid;
}
div#sidebar ul {
margin-top: 0px;
color: #000;
background: #ffffff;
list-style-type: none;
border-bottom: 1px #3366FF solid;
}
div#sidebar ul ul {
l ist-style-type: none;
border-bottom: 1px #3366FF solid;
}
div#sidebar li {
background: url('メニューの左画像') no-repeat left top;
border-top: 1px #3366FF solid;
text-align: justify;
line-height: 150%;
}
div#sidebar li a {
margin-left: 8px;
}
div#sidebar 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 {
color: #f00;
background: #ffffff;
text-decoration: underline;
}
div#sidebar li li a:active {
background: #ffffff;
text-decoration: underline;
color: #f00;
}
div#sidebar table {
margin: 0px;
padding: 0px;
}
hr.menubot {
position: relative;
bottom: 60px;
}
/* フッター 設定 */
/* フッターブロックの指定 */
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;
}