« デジハリ070428 | トップページ | 部活+情報部会研究大会準備 »

2007年4月29日 (日)

デジハリ070429

■テニス部の公式戦(ダブルス)の引率

インターハイにつながる試合で、GWをまたいで、シングルス・ダブルス・団体戦と続く。5月13日の団体戦(勝ち進めば延長)が3年次生の引退試合となる。神奈川は全国レベルの強豪校が揃っているので、本戦に進むことすら厳しい。それでも悔いが残らないように、6日には団体戦の練習試合も組んでいる。

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

2週休みが続いたが、4月8日のボックス構造とフロートの実習を発展させていく。

●前半1時間の実習
070429_01s
元のソースには、hタグとpタグしかない。DreamWeaverでフロート担当のDIVタグとデザイン担当のDIVタグを挿入したところ。前回の実習内容に少し装飾を加えて作りあげたものを、FF1.5(上)とIE6(下)で表示して比べる。
070429_02
クリックすると原寸表示します。この2つの表示に違いに気が付きますか?
(画面下のメモ帳は、授業中のもの。「同じ表示」と書いてしまったが・・・)

このようにCSSはブラウザとバージョンによって、解釈が異なっているのが現状。家ではSafari(Mac)/IE6/IE7/FF2.0/Opera9.2という環境でブラウジングしているが、後の2つではYahoo関連を含めて多くのサイトでレイアウトが崩れてしまう。一般に普及しているIE6/IE7を基準に作られており、さらに新しいブラウザには対応できていないのだ。
これらを克服してどの環境でも同じレイアウトで見せるために、Web技術者は四苦八苦している。ブラウザのバグをついて対応するCSSを読ませる技術を「CSSハック」という。今までのCSSハックは古いブラウザを研究すればよかったが、常に最新のブラウザに対応していくとなると、更新作業を想像すると恐ろしい。

校内イントラのようにブラウザが一致している環境ならば、CSSでデザインすることは大変に楽だし効率がよい。早くCSSの統一が実現してもらいたいものだ。

●後半1時間の実習
さらに進んで、実際のサイトの形まで発展させていく。
これがCSSを設定する前の状態。見出しと段落の他、画像やリストのリンクが用意されている。
070429_03s
h1の見出し「Digital Hollywood」はSEO対策のため、ソースとして存在するが非表示になる様に工夫。またここには背景画像として、デジハリのロゴが入った大きな画像を配置していく。
さらに、続くメインのコンテンツを右にフロート、その後に続くナビの部分を左にフロート。ソースがこの順に記述されるのは、上から読み上げていく音声ブラウザ対策である。
070429_04s
上のブラウザ表示が完成見本。下に見えているのがDreamWeaverで授業中に作成した本日の最終形。フッター部分の設定は時間切れでできなかった。リンクのボタン配置と文字装飾と合わせて、次回完成することになる。
GWなどでまた2回の授業が空く。授業自体は反復練習をしながら定着を図る形式だが、ここしばらくの空きは嬉しくない。

●授業の雰囲気
毎回全員が出席しているだろう。授業が始まると完全に無言。メモを取りながら作業に集中する。TAも2人いるが全く出番がないのは、佐藤先生のコーディネートが上手いからだと思う。
教え方に学ぶことが多い。

○2番目の画像での違い。IEとFFでは、ボックスどうしの隙間が微妙に異なっている!
授業ではこの表示を揃える実験もしたが、そこまでは書かない。書けない。

|

« デジハリ070428 | トップページ | 部活+情報部会研究大会準備 »

コメント

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

トラックバック


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

« デジハリ070428 | トップページ | 部活+情報部会研究大会準備 »