« ［1日更新］マックでスタイルシート修正の続き | Home | ［1日更新］自宅でスタイルシート修正（まだやってる・・・） »

2007年1月30日

［1日更新］中身ページのコーディング方針

写真うかさんが、「アフィリエイトインテリジェンス」で、今回のリニューアル実況中継の記事を紹介してくれた。そしてさらにこんな記事。

うか流HTML・CSSコーディング術

ヘッダー部分はヘッダー部分で崩れのないようにチェックしながら完成させる。2段組部分は2段組部分で崩れのないようにチェックしながら完成させる.....といった感じで作業を進めていくと、もし崩れが出てしまった場合でも、その原因は今作業している部分（ヘッダー部分の作業をしていればヘッダー部分）にあるわけで、余計なところをチェックしなくてすみます。

確かに。

とくに、自分のようにまだスタイルシート知識が十分じゃない場合、崩れた時、「どの時点で過ちが起きたのか」できあがってしまった後だと、見当がつかず、検証作業が大変になる。で、場当たり的にいろいろ数値を変更していたら、あるとき突然「あ、うまくいった」という感じの修正方法。

各ブロックの幅指定が間違っているのかと思ったら、
単に、２つの画像がぶつかりあって内側から膨らんでしまっているだけだったり・・・。

土台を組む。
しっかり土台が組めていることを確認したら柱を立てる。
柱がまっすぐ立ったことを確認したら壁を作り、
そして最後に内装に着手する。

そんな、ステップ毎に確認作業をしながら堅実に進めていくやり方のほうが、
知識もつきそうだし、効率的だ。

中身ページのコーディングは、うか流でやってみようと思う。

なにはともあれ、マックでB5ノート（10.5型）でコーディング作業をするのは、なかなかしんどい。忍耐力はつきそうだけど、やっぱり大型ディスプレイがいい。

気づいたらもう日も沈んじゃっているし。
そろそろおうちに帰ろう。
（注：まだマック千石店にいます）

wada (17:09) | コメント(3)

コメント(3)

私もうかさんとほぼ同じやり方です。
中身入れてからやるとソース多くなってよく分からなくなるんですよね(^^ゞ

全体レイアウトを手書きでざっと書いて、そこにclass、idなどをちょこちょこ書いてるんですが、作って増えていくうちにわからなくなるので、今回の画像パーツ作成は「なるほど」と思いました。
（特に画像って所が思いつきもしなくて新鮮でした(^^；）

Dreamweaverででもざっと全体レイアウト作成しておいたら、良さそうですよね。これからそうしてみます♪

CSSはほんとに困ったもんです。。
うちもSleipnirなんで、Firefoxで見るとかなりぐちゃぐちゃで・・
特にリストや行、マージンなんかが微妙に違うんですよね・・（Ｔ＿Ｔ）
回り込みもまた色々と複雑で・・（苦笑）

私も見習って、今日の夜は頑張ります♪

yuu | 2007年1月30日 17:55 | 返信

わださん、もの凄い企画やってますね（笑）
サイトを再構築しながらそれを実況するとは、その魂に熱いものを感じましたよｗ

ちなみに僕はたいした技術はないですが、やはりHTMLとCSSは同時に作ることにしてます。

理由はわださんやうかさんのように、キッチリ計画的にサイトを作ることが出来ないので、行き当たりばったりで作るにはその方がやりやすいからだったりしますが・・・ｗ

アフィリ | 2007年1月30日 23:22 | 返信

yuuさん、
私もちょい前まで、HTMLとCSSと同時に書いていたんですが、先に構成案を固めるようになってから、分離して作るようになっていました。複数ブラウザ表示確認、ここのところかなり怠惰になっていたので、今回しっかりとクリーンで正しいタグ記述をマスターしたいなと思います。

アフィリさん、
いえいえ、こんな企画にするつもりなかったんです。
３本くらい記事書いて、日曜日の夕方には完成して「ふふふ」とか画面見て笑いながら、祝杯ビールを飲んでいるはずだったんです。
なにやら長期戦になってきてしまいました。
ま、でもロフトベッド購入ナビは、ぼちぼち成果あげている残り少ないサイトでもあるので、ここらできちんとリボーンさせてあげようと思いました。

わだ | 2007年1月31日 00:32 | 返信

コメントする

検索

カテゴリ

月別 アーカイブ

この記事について

このページは、wadaが2007年1月30日 17:09に書いた記事です。

ひとつ前の記事は「［1日更新］マックでスタイルシート修正の続き」です。

次の記事は「［1日更新］自宅でスタイルシート修正（まだやってる・・・）」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。