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

スタイルシートデザインの場合

スタイルシートデザイン１: <table>タグのデザイン１の<table>タグを全てスタイルシート化; ヘッダ（HPタイトルなど）

左メニュー１

左メニュー２

左メニュー３

左メニュー４

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

サブメニュー1

サブメニュー2

サブメニュー3

サブメニュー4

フッタ（著作権表示など）
作例における外部スタイルシートの設定: /*全ての要素に対するデフォルト値 */
* { margin: 0; padding: 0; }; /*ページ全体の構成 */
.page_sample {
text-align: left;
border: 1px solid #B6CADE;
color: #245386;
background: #FFFFFF;
width: 404px;
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_waku {
border: 1px solid #B6CADE ;
margin-left: 3px 3px 5px 3px;
float: left;
}; /*左メニュー、メインコンテンツ個々の構成 */
.left_menu {
border: 1px solid #B6CADE ;
margin: 5px 0px 4px 0px;
padding: 0px 10px;
color:#FFFFFF;background-color:#245386;
}; /*メインコンテンツの余白指定 */
.main_menu { margin: 6px;width: 133px; }; /*右メニュー枠の構成 */
.menu_wakur {
border: 1px solid #B6CADE ;
margin: 3px 0px 3px 5px;
float: left;
}; /*右メニュー個々の構成 */
.right_menu {
border: 1px solid #B6CADE ;
margin: 5px 0px 4px 0px;
padding: 0px 10px;
width: 98px;
color: #333333;
background-color:#FFCCCC;
}

上記スタイルシートデザインのソース表示: （外部スタイルシートによりソースの判読が容易）; <div class="page_sample">
<div class="headtitle">ヘッダ（HPタイトルなど）</div>
<div class="menu_waku">
<div class="left_menu">左メニュー１</div>
<div class="left_menu">左メニュー２</div>
<div class="left_menu">左メニュー３</div>
<div class="left_menu">左メニュー４</div>
</div>
<div class="menu_waku">
<div class="main_menu">
メインコンテンツ<br />
メインコンテンツ<br />
メインコンテンツ<br />
メインコンテンツ<br />
メインコンテンツ<br />
メインコンテンツ<br />
メインコンテンツ
</div>
</div>
<div class="menu_wakur">
<div class="right_menu">サブメニュー1</div>
<div class="right_menu">サブメニュー2</div>
<div class="right_menu">サブメニュー3</div>
<div class="right_menu">サブメニュー4</div>
</div>
<div class="footline">フッタ（著作権表示など）</div>
</div>

▲Top

<<　HOME　|　next　>>

ハイブリッドデザインNAVI

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

サイト内IT用語リスト

スタイルシートデザインの場合