恥を忍んでつらつら過程の画像だけ並べてみる。
画像は全部等倍で、ソースは貼って無いです。
架空じゃないから実際のサイトで見れると思いまする。
ラフデザイン。
２カラムでメインメニューは左？ど真ん中にタブのメニュー。
メニューが２箇所あるので、コンテンツをメニューで挟むことにする。
コンテンツの両脇にグラデーションのシャドウって定番だよなあ。
※デザインはデザイナーが作った
タグとテキスト全部書いた。並び順は、h1(seo)>navi(tab)>content>sidebar(menu,topics,link)>footer
#headerブロックは無し。コンテンツのタイトルもh1にしようかなぁ、とかぼんやり考える。
XML宣言ありでUTF-8。iframe使うかもなのでXHTML 1.0 Transitional。
色分けした。暫定で色分けとか線つけたりするのはメインのCSSとは別にまとめて、
あとで一気に消せるようにしてる。配布してるテンプレートがそんな状態です。
色分けしない人は心の目で見るんですかね。
ガッと配置。この辺からIEに対してイライラしはじめる。
トップのコンテンツはブログ表示なのでRSSで指示通り出来なかったらiframeになる予定。
背景つけて調整。背景画像は空のでかい画像とリピートするグラデ影の２枚。影の上に空がかぶせてある状態。
こういうでかい背景ってどこまで圧縮するかいつも迷う。
さらに調整後。h1を絶対配置、ブロック要素のサイズ変更とかした。
ここで一通りほかのブラウザでも確認する。（いつも忘れる）
このメニューはliをlist-style-position:outsideして、中のaをdisplay:blockにしてtext-indentとかで右にちょっと寄せる。
list-style-position:insideにするとIEでズレる。
メニュー作成中。
左メニューの背景が乗算だったことに気づいたのでデザイナーに文句を言う相談。背景は透過pngにしてIEはフィルタ使う。
１行置きのはaにクラスつけてるのでそれで。javascriptでもいいかもしれなかった。
タブメニューはとりあえず画像で。CSSオフで不細工だからあとでjavascript書いて背景化しようかなぁとか迷う。
メニューのとこ拡大。左側のメニューはとりあえずテキストそのまま。あとで画像にしてもいいなぁとか思う。
画像ならプリロードつけた方がいいような。
先に左側。フッタも背景入れた。
バリデータかけ忘れてたのでチェックしとく。（いつも忘れる）
空画像のコンテンツの所白く変更しといた。
右側の上。グレーのところにはFlashが入るらしい。
なんかやたらFlashが好きな人っているよね。
終了。あとはコンテンツ入れながらやってく。
ラフと全く同じにするのがｵｰﾓﾛｰｰ。
これの姉妹サイト？は超赤いんだけど、メニューが透過で浮いてるようなデザインで中々ｵﾓｼﾛｽ。
なんか赤と青って蒼紅共闘って感じでいいよね・・・ﾌﾌﾌ