デザインに共通項を作る
流れとしては左から下方向の目線を作り、イラストでワンポイントエッセンスを加える。
●冒頭には常にセンタリング要求するスクロールバー有りの定義
html {
overflow-y:scroll;
}
※最新のブラウザは自身のサイドバーやナビバーが出てくるので自動表示のページ設定は余裕が欲しい。
●div＃container=コンテナ・・・センタリングBOX
●div#main=メイン・・・・・・・2段での仕切り
＞div#header=ヘッダー・・・・・・・・サブタイトル、サブロゴ
＞div#content=コンテンツ・・内容及び本文
＞div#footerフッター・・・サブロゴと注意書きインデックス
最後にmainのdivで閉じてグループ化
●div#sidebar=サイドバー・・・メインロゴ、インデックス=ナビゲーション
左ナビを固定する場合以下のポジションをfixedに指定。* はＩＥ6対策。
※但し、サイドバーをfixedでスクロールバーの無効化はできるが、横は＃mainが左サイドに無限に潜り込む〜相対的に横スライドを限定するのはどうするんだっけ？
一応、横サイズと縦サイズを固定してデザインの崩れは防ぐ。
position: fixed;
}
* html div#sidebar {
position: absolute;
top: expression(eval(document.documentElement.scrollTop+29));
}
●div#sidebar-right=サイドバーライト・・・・補足的なナビその他情報
制作上CSSの組み方で横に独立したブロックが存在しない為メインで何れかのサイドバーを括る
●参考／CSS Lecture
●参考／ＨＴＭＬタグ一覧
 ＣＳＳのソースコードとデザインタイプの頁
|
