XHTMLコーディング過程を晒してみる(画像で)

恥を忍んでつらつら過程の画像だけ並べてみる。
画像は全部等倍で、ソースは貼って無いです。
架空じゃないから実際のサイトで見れると思いまする。

ラフデザイン。
ラフデザイン

2カラムでメインメニューは左?ど真ん中にタブのメニュー。
メニューが2箇所あるので、コンテンツをメニューで挟むことにする。
コンテンツの両脇にグラデーションのシャドウって定番だよなあ。

※デザインはデザイナーが作った

コーディング開始
タグとテキスト全部書いた。並び順は、h1(seo)>navi(tab)>content>sidebar(menu,topics,link)>footer
#headerブロックは無し。コンテンツのタイトルもh1にしようかなぁ、とかぼんやり考える。
XML宣言ありでUTF-8。iframe使うかもなのでXHTML 1.0 Transitional。

色分けした
色分けした。暫定で色分けとか線つけたりするのはメインのCSSとは別にまとめて、
あとで一気に消せるようにしてる。配布してるテンプレートがそんな状態です。
色分けしない人は心の目で見るんですかね。

配置
ガッと配置。この辺からIEに対してイライラしはじめる。
トップのコンテンツはブログ表示なのでRSSで指示通り出来なかったらiframeになる予定。

背景入れました
背景つけて調整。背景画像は空のでかい画像とリピートするグラデ影の2枚。影の上に空がかぶせてある状態。
こういうでかい背景ってどこまで圧縮するかいつも迷う。

微調整後
さらに調整後。h1を絶対配置、ブロック要素のサイズ変更とかした。
ここで一通りほかのブラウザでも確認する。(いつも忘れる)
このメニューはliをlist-style-position:outsideして、中のaをdisplay:blockにしてtext-indentとかで右にちょっと寄せる。
list-style-position:insideにするとIEでズレる。

メニュー1
メニュー作成中。
左メニューの背景が乗算だったことに気づいたのでデザイナーに文句を言う相談。背景は透過pngにしてIEはフィルタ使う。
1行置きのはaにクラスつけてるのでそれで。javascriptでもいいかもしれなかった。
タブメニューはとりあえず画像で。CSSオフで不細工だからあとでjavascript書いて背景化しようかなぁとか迷う。

メニュー拡大
メニューのとこ拡大。左側のメニューはとりあえずテキストそのまま。あとで画像にしてもいいなぁとか思う。
画像ならプリロードつけた方がいいような。

右側
先に左側。フッタも背景入れた。
バリデータかけ忘れてたのでチェックしとく。(いつも忘れる)
空画像のコンテンツの所白く変更しといた。

左側
右側の上。グレーのところにはFlashが入るらしい。
なんかやたらFlashが好きな人っているよね。

テンプレート
終了。あとはコンテンツ入れながらやってく。
ラフと全く同じにするのがオーモローー。

これの姉妹サイト?は超赤いんだけど、メニューが透過で浮いてるようなデザインで中々オモシロス。
なんか赤と青って蒼紅共闘って感じでいいよね・・・フフフ

Leave a Comment.