シリコンカフェ@森川眞行のブログです。

Fireworksのデータを完成させて、ローカルサイト内のPNGフォルダに保存。Dreamweaverでローカルサイトを定義してから、作業開始。

いよいよフルCSSレイアウト。

Fireworksのマスターデータとなるファイルから、それぞれのパーツのPNGマスターを作成するには、スライスオブジェクトを使って「ドキュメントを切り抜く」を実行するとよい。

それぞれのPNGマスターからJPEGやGIFを書きだす場合は、必ずDreamweaverをバックグラウンドで起動させておくこと。これは運用面で画像更新の際に役立つ「ラウンドトリップHTML」という連携機能のためだ。

インターフェイス設計の際に話をしたページ内での役割、及び文書構造としての位置づけを考えながら、ページ内のDivisionを割り当てていく。Divisionとは会社で言う部署とか、大学の学科…みたいな、塊としてのブロック。

それをそのまま[div要素]としてマークアップをする。そしてそれぞれの[div要素]には意味のある名称をIDとして認識させること。ページ内での役割だな。

[div要素]を入れ子にする場合でも、できる限り意味のある構造にすること。[div要素]はそのままボックスというかハコとしての観念で組みたてていくこと。

それぞれの[div要素]をIDで割り振れば、リストや段落などの要素はクラスで指定しなくとも、CSS側でまとめて設定できる。ソースコードはできるかぎりシンプルに。これでもかっ！ってくらいに意地になって行数を減らす努力をしましょう。

…

今日の授業の中でCSSレイアウトのキモは全部説明しました。もうこれ以上教えることはありません。なので、今後はわからないことがあれば、個別に聞いてくださいね。

それと、業務連絡ですが…
【1】授業が終わった直後に、僕が作ったサンプルサイトをみんなデータで持って帰ったと思うのですが、じつはあれからバージョンアップしています。まず杉田さんの質問に答えたリストのボタンで「現在位置」を示すための工夫ですが、これは通常のリスト項目がに装飾のためのCSS（hover含む）にしていますが、現在位置はではありませんね。なので[span]としてマークアップして現在位置の装飾をCSSに書き込んでいます。

【2】コンテンツ領域のdivの設定まで時間が足りませんでしたが、森川は残って7時まで作業してました。最近版のデータは講師用のMacintoshに入っていますので必要なら持って帰ってください。

【3】講師用のMacintoshに入っていたデータなんですが、実は森川はメモリスティックを忘れてしまったので、作った本人が持って帰れませんでした。なので誰か、森川の個人のメアド宛に、今日作ったサイトをそのまま圧縮して送ってくれませんか。

【4】今日作ったサイトのバリエーションを作る予定があるので、それも出来次第MLに送信するか、僕のサイトからダウンロードできるようにします。細かなデザインモジュールなどは、随時追加していきますので。

以上です。公開版までもうすぐですが、まだまだこれからです。あとは実装の精度をあげるだけですね。これからが勝負です。細部のツメでのアドバイスは、なんぼでもしてあげます。質問はこのブログでも受付まっせ！

では、がんばってね！