ハイブリッドデザインNAVI　ハイブリッドデザイン考察５

スタイルシートデザインの場合　>>　見出し要素やリスト要素等の記述

スタイルシートデザイン３

<table>タグのデザイン１の<table>タグを全てスタイルシート化および見出し要素やリスト要素、段落の記述

下記作例の見出し要素はサンプルのため
<h3>ヘッダ</h3>
および<h4>左メニュー</h4><h5>右メニュー</h5>
としておりますが、通常はSEO対策に有効とされる
<h1>ヘッダ</h1>
および<h2>左メニュー</h2><h3>右メニュー</h3>
・・・となります。

ヘッダ（HPタイトルなど）

左メニュー１

リスト
リスト

左メニュー２

リスト
リスト

左メニュー３

リスト

左メニュー４

リスト

メインコンテンツ
メインコンテンツ

メインコンテンツ
メインコンテンツ
メインコンテンツ

右メニュー

フッタ（著作権表示など）

作例における外部スタイルシートの設定

/*全ての要素に対するデフォルト値 */
* { margin: 0; padding: 0; }

/*ページ全体の構成 */

.page_sample2 {
text-align: left;
border: 1px solid #B6CADE;
color: #245386;
background: #FFFFFF;
width: 442px;
margin: 5px auto;
}

/*ヘッダの構成 */

.headtitle {
border: 1px solid #B6CADE;
margin: 4px;
padding-left: 10px;
color: #333333;
background: #F5F5F5;
font-size: 100%;
font-weight: bold;
}

/*フッタの構成 */

.footline {
border: 1px solid #B6CADE ;
margin: 4px;
color: #333333;
background: #F5F5F5;
text-align: center;
font-size: 80%;letter-spacing:1px;
clear: both;
}

/*左メニュー、メインコンテンツ枠の構成 */

.menu_waku2 {
border: 1px solid #B6CADE ;
margin-left: 3px 3px 5px 3px;
float: left;
}

/*左メニューリストの構成 */

h4 {
border: 1px solid #B6CADE ;
margin: 5px 0px 0px 0px;
padding: 0px 10px;
color:#FFFFFF;background-color:#245386;
clear:both;
}

/*左メニューリストの表示位置 */

div#left_list ul {
margin: 0px 0px 0px 2px;
list-style: circle;
padding-left: 2em;
}

li {
padding-left: 0px;
list-style:circle;
}

/*メインコンテンツの余白指定 */

div#main_menu2 { margin: 0px 0px 0px 10px ; width: 200px; }

/*メインコンテンツ内"段落"の左右余白 */

div#main_menu2 p { margin-left:14px; margin-right:26px; }

/*右メニュー枠の構成 */

.menu_wakur {
border: 1px solid #B6CADE ;
margin: 3px 0px 3px 5px;
float: left;
}

/*右メニュー個々の構成 */

.right_menu2 {
border: 1px solid #B6CADE ;
margin: 5px 0px 4px 0px;
text-align: center;
width:76px;
color: #333333;
background-color:#FFCCCC;
}

上記スタイルシートデザインのソース表示: （見出し要素等によりSEO対策に有効）; <div class="page_sample2">
<div class="headtitle"><h3>ヘッダ（HPタイトルなど）</h3>
</div>
<div class="menu_waku">
<div id="left_list">
<h4>左メニュー１</h4>
<ul><li>リスト</li><li>リスト</li></ul>
<h4>左メニュー２</h4>
<ul><li>リスト</li><li>リスト</li></ul>
<h4>左メニュー３</h4>
<ul><li>リスト</li></ul>
<h4>左メニュー４</h4>
<ul><li>リスト</li></ul>
</div>
</div>
<div class="menu_waku">
<div id="main_menu2">
メインコンテンツ<br />
メインコンテンツ<br />
段落部分ここから↓
<p>
<br />メインコンテンツ<br />メインコンテンツ
</p>
↑段落部分ここまで
メインコンテンツ<br />
メインコンテンツ<br />
メインコンテンツ
</div>
</div>
<div class="menu_wakur">
<div class="right_menu2"><h5>右メニュー</h5></div>
<div class="right_menu2"><h5>右メニュー</h5></div>
<div class="right_menu2"><h5>右メニュー</h5></div>
<div class="right_menu2"><h5>右メニュー</h5></div>
</div>
<div class="footline">フッタ（著作権表示など）</div>
</div>

仕上がりイメージ