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

・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に変更すると出来たものがあった。

オーナメント

独り言メモ。
柔らかいリボン・柔らかい罫線・鈴・リース…雪や星降らすのは白でやるか？…グラデやアンチエイリアスはgifにするとやはり綺麗に出ない…16bit・24bit…FWとフォトショで違うかな…ん〜。ぶつぶつ。
どーもWinIEとMacネスケのclear動作の平均化がしにくい…heightかwidth入れとくものなのは分かってるが迂闊に入れたくないとゆーのに…width:100%で行けるように組めるか？…むー。

あひゃひゃ（と不具合）

忍者ブログ開発者みずの様がブログやTB本舗で「くのいち関係のお仕事」「Flash」とか言っておられたのはこれか〜（笑）
と言うことで、www.shinobi.jpの大バナーがちょと変更され「シノビ塾」広告となってますね。おもろかしいプロデュースを。アイドル萌え路線なので好きな方はGOだ。ミニギャルゲーのようなプラグイン（とゆーかブログパーツのようなFlash）プレゼントがあります。Flashの幅は180pxなのかな？自分のテンプレだとちょとやばいな。（わざわざWin立ち上げて見に行く自分は何者か…）
んでOS9MacIEでは例の如くFlashは正常に利用できませんが、更に注意なのがプレゼントプラグイン選択の切り替え。くのいちさんの切り替えをしようとクリックすると、MacIEは落ちます（落ちるだけで実害無いですが）。ネスケだと切り替えは出来るから、MacIEのJavaScriptバグに引っかかるんだろな…Flashは、ver.8でもものによってはOS9でも動くのだけれど、新しい機能使っておられると動作しないのかな？MacIEでもネスケでもすた〜とボタンが見えない使えないのがしくしく。
それはともかく、可愛いくのいち３人組さま、応援してあげましょう。

つーか！ブログテキストエディタの自動改行モードで<br />が書き出されてないようです、本日。手打ちでbr入れると改行されるけど(^^;　あ、半角スペースも消える。ブログ新着記事にもちらほら。HTMLエディタでも同様だろか…画像UPやリンクも書けないとゆー記事もあったが半角スペース消えるのが原因かな。解析では本日分のpageviewとvisitがイコール（生ログと違う）になってるようだし…ってこれはリンク元表示の変更というやつでしょか。
夜追記※上記改行＆スペース消え不具合は13:00〜14:30で修正された模様。短い時間帯中に当たったものだ。ラッキー（？）

なんとなくクリスマス

…タイトルが我ながらお寒かった。orz
何やら霙の降るような寒い雨。勢い任せでクリスマスカラーを半端に２パターン。赤背景と白背景、どっちで行くかな…Silent Night とHoly Nightで両方詰めてみるか…もっとデコラティヴにするべ。特にタイトル回り。幅可変だとバランスの見当がつきにくいことだ。
自分は使う予定無いのに何やってるんだか。ヽ(´▽`)ﾉ
赤の現物はnuitempに晒し中。どうでもいいが物凄く久々に向こう開いたらPageRankが地味〜に上がってる…全然更新してないのに。記事３つしか無いのに。恐るべし忍者効果。つか、共有用作って向こうも更新しようよ自分。orz

あれ？

ブログメンテもう終了したのかな。
６時までの予定が、３時過ぎに見たらもう終わってる…毎度ながら早い。
お侍さま、お疲れさまでした。