« 全国大会:大会の様子 | トップページ | 全国大会:私の発表 »

2008年8月23日 (土)

デジハリ080823

デジハリ横浜校、総合ProコースWebデザイナー専攻。第15回目の授業。

CSSの第3回目。まず、前回残っていた3番目の例題を完成する。
XHTMLソースでは、メニューの外部リンクの情報を、音声ブラウザ対策で、最後においてある。これをフロートを使って、整形していく。

CSS例題3

この例題で学んだ、2つの重要ポイントをメモ。リンクのテクニックは応用が利く。

■3つの画像を等間隔に並べる
フロートはブロック要素(必ず改行される)にしかかけられない。インライン要素にはフロートがかけられず、横にならぶ。画像は、通常横にならぶが、このブロック要素とインライン要素の中間の性質で、フロートをかけられる。
周囲の隙間と左のフロートをクラスで設定し、3つの画像に適用する。

■サイドナビのボタンとなる画像
リストで作ったテキストのリンクに対し、CSSで背景画像を設定。さらにブレット表示をなし、リンクのアンダーラインをなし、テキストを非表示にする。
これだけでは、マウスカーソルが反応する領域は、(非表示の)テキストの部分だけ。画像のサイズにヒット領域を広げる必要がある。
テキスト部分はインライン要素なので、幅や高さの概念がない。そこで、インライン要素のaタグを、ブロック要素に変えて、ボックスの幅と高さを画像と一致させる。

午後は演習課題。HTMLにDIVタグを追加し、CSSを設定して指定された形に仕上げる。

CSS設定前

タグの再定義でいくか、IDと子孫セレクタでいくか、クラスでいくか。考えながら、DIVタグを設定。

演習の途中過程

ボーダーの幅をボックスの幅と高さから減じて設定して完成。

演習の完成

授業後、16時より中間課題発表会。
昨日までの全国大会の準備と、やはり昨日まで3週間のインターンシップ受入れのため、構想していた課題を作成することができなかった。みなが頑張っているのに、水を差して申し訳ない。校内Webで作成したものを発表会後に紹介させていただいた。

|

« 全国大会:大会の様子 | トップページ | 全国大会:私の発表 »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/178689/23210357

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

« 全国大会:大会の様子 | トップページ | 全国大会:私の発表 »