当ブログについて | 管理人プロフィール | コンタクト
<スポンサードリンク>

[1日更新]HTMLコーディングの準備作業

2007.01.29 日記・コラム・つぶやき C(4) TB(0) このエントリーを含む「はてなブックマーク」 この記事を「livedoorクリップ」! 「Yahoo!ブックマーク」に登録

写真この記事だけ書いたら、今日は寝ようと思う。

とりあえず、明日目が覚めたらすぐHTMLコーディングに入れるよう、少し準備作業だけやっておくことにした。

まず、これまでの構成案は、画像編集ソフトFireworksで「絵」として書いてしまっているので、大きさやスペースを調整。

そのため、「ガイド」を何本もひっぱって、ピクセル単位で小見出しや枠を動かしてゆく。

写真

黄緑色の線が「ガイド」。
メニューで「ガイドに吸着」を選択しているので、これを使うと、画像やテキストなど動かしやすい。

次に、パワーポイントにこの構成案を貼り付けて、スタイルシートで配置や大きさ、色などを指定する際に、なんていうID名・CLASS名にするかを書き込んでゆく。

写真

写真

普段はここまではやらず、HTML書きながら適当に決めてゆくんだけど、今回は、数ヶ月後にMT化することを考えているので、その時にすぐ思い出せるよう、なんちゃって設計図として残しておくことにした。

このあたりの作業をしっかりやってからHTMLコーディングに入ると、途中で幅や余白・マージンなどをいくつにすればいいのかわからなくなり、何度もブラウザに表示させながら修正したり・・・という手間が省け、スムーズに最後までいける。

ということで、今日はここまで。
明日外出までに全ページのコーディングを終わらせたいな。

いや、明日は平日だからお仕事しなくちゃだめか。
どっかで暇を見つけてちょこちょこ進めていこう。



コメント

おおお、おもしろかったです!
一気読みしちゃいました~!

そういえば今まで「こんな感じで~、ここはこんなんで~♪」と適当にサイトを作ってました。アハハ(^^;)
いろいろやれること、やるべきことがあるんですね。
参考になりました。
それにしてもサイト直しで忙しいのに、ブログにもここまで記録しちゃう和田さんの素早さはやっぱりすごい~!

投稿者: とことこ散歩 (2007.01.29 08:40)

すごい!感激しました。
自分ではこれまであまりサイトロゴをちゃんと作っていなかったのですが、サイトロゴをちゃんと作るっていいなぁと思いました。

それから、デザインの設計図。私はいつもHTMLを書いて表示させて、修正してもう一度表示させて、としているので、こういうこともできるという発見しました。

投稿者: のらり (2007.01.29 12:13)

とことこ散歩さん、
ありがとうございます。
私も普段は割りと適当にその場の流れでやっているのですが、
今回はちょっと、ブログで実況中継という試みもあって、かちかちと進めてみました。

> それにしてもサイト直しで忙しいのに、ブログにもここまで記録しちゃう

ブログ記録してなかったら、多分コーディングまで終わってましたね(笑

のらりさん、
サイトロゴ、自分も素人なのでたいしたものは作れないのですが、本を買ったら、自分でも作れそうなのがいろいろ載っていて、それ以来楽しくなりました。
なかなか面白いですよ!

投稿者: わだ (2007.01.29 12:48)

こんにちは。サイト拝見しました。とても良い記事ですね。最近私のサイトを作ったのでよかったらどうぞ見て行ってください

投稿者: メル友 (2009.10.05 15:33)





トラックバック
http://app.cocolog-nifty.com/t/trackback/5901/13699695

内容に関連性のある記事からのトラックバックは歓迎です。記事内リンクも特に必要ありません。過去交流のないブログでもまったく問題ありません。ただし「単に部分的なキーワードつながり(関連性が薄すぎ)」「自動で大量トラックバック送信」「自身がトラックバックを受付けていないブログからの一方的なトラックバック」は、削除します。

最新の記事

管理人プロフィール

和田 亜希子

利根川流域に生息するアラフォー独女。ニッチなテーマで小さなサイトを作る「ミニサイト職人」で、主に運営サイトの広告収入で生計たてるようになり早10年経ちました。「パソコン一台携え、旅しながらサイト運営で生計立てる」ベドウィン・モバイラーの夢まであと一歩。大切にしたいのは「好奇心」と「向上心」。うさぎは2011年の干支、ヘビ年バージョンはこちらです。(詳細

Twitter

著書一覧(Amazon)
Yahoo!プロフィール
YouTube動画一覧

AMNパートナーブログ