« デジハリ070609 | トップページ | DTP活用:実技試験 »

2007年6月10日 (日)

デジハリ070610

19時よりデジハリ「XHTML+CSS講座(9)」

昨晩は復習と今日の予習で不眠のため、結構辛かった。
■授業の様子がデジハリ横浜校のブログで紹介されている。私は右の列の一番後ろ(写真では手前)。こんな雰囲気で集中している。TA2名が巡回しているが全く暇している。

前回の宿題の答え合わせ。宿題はプレーンなHTML(下図左)からCSSを組み、出来る人は左のナビの部分の背景を白くするところまで、という内容。
私は下図(右)のように、IEではOKだが、FFでは背景の設定ができなかった。もちろん、これが狙いで出された課題である。

070610_00 070610_01_2

授業では、最初から丁寧に解説しながらCSSを組む。逐次、IEとFFで確認を取って、DreamWeaverのプレビュー画面と、ブラウザIEとFFの違いを体験しながら作業を進める。最終的には、上図右の形まで全員が完成し、ここからが今日の授業の本題となる。
これは、表示内容を包んだDIVの高さを「自動」で設定してあるために起こる現象。この状態で背景色を設定しても、FFは適用しないという仕様。そこで、clearfixハックという方法で、解決することを学んだ。
具体的には、CSSの末尾に15行程度のソースを書きこむだけでよい。ブラウザのバグ(仕様)をついて、IE以外のブラウザ用とIE7用、IE6以前用に、それぞれ別のCSSコードに振り分ける。

070610_jikaiyokokuこれは次回の予告に使ったイラレデータ。
いよいよ本格的なWebデザインに入る。左図のようにページのデザインをイラレで描画してある。ワークフローは、ここから仕様書を起こし、テキストを記述して基本タグを設定。さらにCSSを組んでいくことになる。
つまり、実際にはページデザインをイラレで描くことがスタートということになる。確かに一昔前も、これがスタートであり、Fireworksでスライスしてテーブルを組んだり、ビヘイビアでJavaScriptを設定したりしてHTMLを書き出していた。最終的にはタグ打ちが勝負だが、ツールを有効に使うことで、メンテナンスがしやすく、作業効率のよいWeb制作が可能になるのだろう。
宿題が無いのでホッとした。次はワクワクする内容だが、レベルがさらに上がりそうだ。

#■部分、デジハリ横浜校のブログを見て翌日追記

|

« デジハリ070609 | トップページ | DTP活用:実技試験 »

コメント

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: デジハリ070610:

« デジハリ070609 | トップページ | DTP活用:実技試験 »