« 携帯対応の緊急連絡サイト | トップページ | PHPの学習環境 »

2008年8月30日 (土)

デジハリ080830

デジハリ横浜校、総合ProコースWebデザイナー専攻。第16回目の授業。
+(19時より)PHP講座第1回目

■CSSの4回目。まず前回の演習課題の解説で1時間。

次の演習課題が与えられる。イラストレータで完成画像と仕様が書かれている。

演習課題の仕様書

1時間半ほどで完成するが、IE(左)とFireFox(右)では表示が異なる。
親要素の背景色に設定した白がFFでは表示されていない。

IEでの表示 FFでの表示

ここまでできた者は、「clearfix」を検索して対策しなさいという指示。
何通りかの記述方法があるが、CSSに追加記述、XHTMLで親要素にclieafixのクラスを設定するだけでOK。FFもIEと同じ表示になった。

.clearfix:after {
content: ".";     /* ドットという新しいオブジェクトを作る */
display: block;    /* ブロックレベル要素に変更 */
clear: both;     /* 他のフロートの影響を断ち切る */
height: 0;      /* 高さを0とする */
visibility: hidden; /* 非表示にする */
}

.clearfix {
min-height: 1px;
}

* html .clearfix {
height: 1px;
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}

上から、モダンブラウザ用(IE以外)、IE7以上、IE6以前のブラウザ用。
特に今回はFFでの確認をしたので、一番上のCSSの解説があった。

この現象は、親要素の中に、高さの異なる3つのフロートが入ったために「高さ」が不明確となり、ブラウザが背景色を表示する範囲が確定できなくなっている。つまり、無理やり「高さ」を作ってあげることで、背景色を塗る領域を確定させている。
コードにコメントを書いたように、ドットというオブジェクトをつくり、ブロック要素に変換して、他のフローとの影響を断ち切り、高さを0とし、非表示にする。これによって、構造に手を加えずに他のフロートの存在をクリアーさせている。ということ。

□以上でCSSは終了。次回からFlashという予告。

■16時~18時。不定期に講義形式の授業を行っている。

今回はグループワークで、あるサイトのリニューアル企画を提案することに。サイトは各班で選び、リニューアルにかかる費用や納期、もちろん、効果なども含めたプレゼンを行う。発表は9月30日。
私たちの班では、ターゲットになるサイトを各自が探し、その中から決定。各自が改善点と比較・競合サイトを調べることを宿題にし、来週、作業の絞込みと分担を考えていく。

情報デザインに関わってきたからか、こういうワークショップ的なことが楽しく思えるようになってきた。

■19時~21時。本日から12回のPHP講座が始まった。

過去2回、自力でPHP+MySQLに挑戦したことがあったが、結局身についていない。データベースの概念は分かっているのだが、実用する場がないまま。今回の講座には、職場で使えるものをひとつは作ろうと考えて参加した。

第1回目はAjax講座のような場面もあったが、WebサーバーとPHPの概念の説明。
一応、参考テキストとしてインプレスジャパンの改定新版基礎PHPが配布されるが、授業内では扱わないという。とにかく最初の6回でつまずかないように、と念を押された。

冬休みには何か作りたい。この講座をペースメーカーにして、頑張ってみよう。

|

« 携帯対応の緊急連絡サイト | トップページ | PHPの学習環境 »

コメント

コメントを書く



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


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



トラックバック

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

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

« 携帯対応の緊急連絡サイト | トップページ | PHPの学習環境 »