レイアウト用基本メモ（途中）

・divレイアウトで
・doctypeやブラウザに極力左右されない
・非推奨タグ、ブラウザ独自拡張タグ、ブラウザハック極力未使用
なブログテンプレートレイアウトを目標とする際のCSS用復習メモ。（モダンブラウザ想定）

◆widthを指示したブロックには左右padding、左右borderを入れない。

• border-boxとcontent-boxの差を吸収。
• height指示なら上下padding、上下borderに注意。

◆floatするブロックにはwidthを指示。marginを入れない。

• 迂闊にmargin入れるとdoctype＋ブラウザの組合わせによって差が出やすい。
• widthが入るのでpaddingもborderも入れない。
• clearするブロックも出来うる限り同様に。

レイアウトでは取り敢えずこれだけ気にすると楽かも。てなところでパズル遊び開始。

---

●個人的前準備

※個人的全共通崩れ防止用おまじないセット（センター表示想定）

body {margin:0px;padding:0px;text-align:center;}
table {margin:auto;font-size:xx;} /*MacIE用auto、WinIE互換用font-size*/
tr,th {text-align:center}
form {}
input,textarea,select {font-size:xx} /*FX用*/
/*\*//*/textarea, select, input {font-family:Osaka;}/**/

他オプションは適宜追加。ブログ検索フォーム用とか。
.blogsearch {width:100%}
.box {width:xx%}
.btn {width:xx%}
（pxでも全然構わないんだが、可変幅想定の癖で…）
カレンダーテーブル幅はpx指定にしとくと無難。%だとIE標準モードと互換モードで幅継承基準の差に悩む。

◆対MacIE用注意点

• background-imageのurl引用シングルクォートは外すかダブルクォートに。標準モード時に背景画像が読めなくなる。
• form部分にletter-spacing厳禁。長文で折り返しがある部分にも入れない方が無難。
• overflow使うならdivブロックに（それでも不具合あるのでお覚悟を）

---

●大枠２カラムの場合。

（#mainBlock）
#TopBlock
#Entry Block	.Plugin Block
#FooterBlock

忍者新規テンプレデフォルトでは大雑把にこんな感じのレイアウト。htmlの記述順序は#TopBlock →#EntryBlock（float:left）→.PluginBlock（float:left）→#FooterBlock（clear:both）。これ全体を#mainBlockで囲む状態。せっかくなのでこれを利用させていただきます。

まず#mainBlockのwidthから（全体センター表示するならmargin:Xpx auto;はここに）。固定幅ならpx、可変幅なら％、幅一杯使うならwidthは入れない。さてどれにしようか。どの場合でもmargin・padding・borderが必要無いならハイ次〜(ﾟｰﾟ)。

（以下後日に続くかもしれない。＜ぉぃ）

---

…と書き始めてみたはいいが、やっぱdoctypeによってビミョー過ぎるIE連中。ケース分けて記事書くか…

余録不確定メモ※MacIEで記事本文の部分選択が出来ないのはdoctypeも関係するかも…？HTML4.01で部分選択出来ないテンプレをXHTMLに変更すると出来たものがあった。