１．<html></html>
２．<body></body>
~ieWin5.5対策を採る
body{
text-align: center;
}
で、センタリングを行い
#plate{
text-align: left;
}
で、#plate要素（全体）の左揃えを行う
３．<div id="plate"></div>
各種コンテンツを記述。
見栄えの全体調整を行う
４．<div id="head_bar"></div>
ヘッドバー。
メニューのスキップや、ラベル、ロゴの表示
４ー１．<div id="go_to_main_contents"></div>
メニューをスキップし本文"#main_contents"へジャンプ。
サイトマップの表示（サイトマップは未作成）
４ー２．<div id="hb_ggiw_label"></div>
ラベルhb_label.jpgの表示
「トップページ」
"http://www.venus.dti.ne.jp/ggiw/"へジャンプ
４ー３．<div id="hb_ggiw_logo_02"></div>
ロゴhb_logo_02.gifの表示
「上鹿川の日々・つりの生活」
"http://www.venus.dti.ne.jp/ggiw/ggiwfish/"へジャンプ
５．<div id="head_menu"></div>
ヘッドメニュー。
各メインへジャンプ。
リスト<ul id="head_menu">を使用
６．<div id="mainContents"></div>
額縁
"frame"等へ名称変更を行うこと
７．<div id="crumbs"></div>
パンくずリスト
８．<div id="layer1"></div>
本文の見栄え調整。
９．<div id=""></div>
空の<div>
１０．<h3 id="main_contents" class="bar3"></h3>
本文のはじまり。ジャンプの目標になっている。
１１．<div id="div class="img_box_left""><div id="div class="img_box_right"">
本文中のイメージ表示領域を確保するため使用
「注意」「コメント」「サイズ」等のクラスを作成すること
１１−１"img_box_left"
の
{ float: left;
width: 21em;
margin-left: 0;
margin-right: 1em;
margin-top: 0; }
１１−２"img_box_right"
の
{ float: right;
width: 21em;
margin-left: 1em;
margin-right: 1em;
margin-top: 0; }
調整
１１−３．<div id="img_box_left">
に内包された"p"
p{ font-size: 83%;
width: 20em;
margin: 1.67em .3em;
text-indent: 0;
line-height: 1.17em;
font-family: sans-serif;}
の調整
１１−４．<div class="mycroon"></div>
の調整
「曲名」「作詞」「作曲」「編曲」等のクラスを作成すること
１１−５．<div class="my_song_book"></div>
「くり返し」等のクラスを作成すること
９９．<div id="footWarning"></div>
default_10.jsで付加される
以上を基本とし、必要に応じ外部スタイルシートを作成、読み込み上書きで調整する。
修正、改良の要点
外部スタイルシート「default_2007_00.css」
基本外部スタイルシートは"default_2007_00.css"とする。
最初に、
@import "default_2007_01.css"命令を行う。
バージョン４には適用可能な宣言だけとすること。
基本的なセレクタ（要素・ＩＤ・クラス）に基本的な宣言（プロパティ・値）だけをすること。
@import "default_2007_01.css"
・
・
body{
width: 45em;
margin-top: 0;
background-color: #ffffff;
color: #000000;
text-align: center;
}
#plate{
text-align: left;
}
・
・
基本的な宣言
・
・
外部スタイルシート「default_2007_01.css」
基本外部スタイルシート"default_2007_00.css"から「@import "default_2007_01.css"」で読み込む。
ieWin、ieMac専用の外部スタイルシートは極力避け、ハックを使用し上書きすること。
ハックの基本は、
body{
/*width: 45em;*//*default_2007_01.cssで宣言済み*/
/*margin-top: 0;*//*default_2007_01.cssで宣言済み*/
margin-left: auto;
margin-right: auto;
padding: 0;/*opr body要素の余白を消す*/
font-size: small;
}
/* ieWin6.x and ieWin7の追加*/
/* replace ieWin5.x~6 with ieWin7. hide from ~ieWin6 */
html > body{
font-size: small;
/* replace ieWin7 with ieMac5.x. for ieMac5.x ¥*//*/
font-size: small;
/*End for ieMac5.x*/
}
/* replace ieWin7 & ieMac5.x with MOSe. hide from ieWin7 & ieMac5.x */
html[xmlns]>/**/body{
font-size: medium;
}
に準じ行うこと
0 件のコメント:
コメントを投稿