２時限目 「CSS完全攻略！３ブラウザ対応のWebサイトのつくり方」
http://www.macromedia.com/jp/macromedia/zemi/report/c2.html
MMCP忘年会でお会いしてからmixi経由でいろいろと動向を拝見している神森さん。
期待を裏切らないセミナー内容でした。
上記URLで実際のプレゼン資料がダウンロードできますが
一応ながーい要約を以下に書きます。
CSSにする理由
web標準→正しいHTML文章に→構造化されたHTML
→標準に準拠＝品質保証
問題点
・デザイン、表示でブラウザ間で違いがある
・HTML,CSS記述にスキル差がある
アンカーテクノロジーではどうしているか？
・Ver4系
> フルCSSは厳しい
> 対応必須なら→テーブルレイアウト
> CSSなし状態を考慮してつくる
* N4は外部スタイルシートを読み込むとき
media属性にscreen,printなど二つ入れるとそのCSSは読まない
* IE4は@importを使って読み込むとそのCSSは読まない
・winIE5, 5.5
> ボックス解釈の違いがある→widthをつかうならpaddingでなくmarginで余白制御
> コメント条件を使って対応→
・モダンブラウザ（ie6,N7,safari,opera7）
> CSSバグリスト、辞典スレッドを参考に http://cssbug.at.infoseek.co.jp/
> MacIE→float、clearでレイアウト制御
> IE6を基準に制作するとfirefoxやsafariで変になることも
> ハックを使って対応
* winIE6 _ アンダーバーハック
* macIE5 /*\*/ 〜 /**/ コメントハック
・ブラウザチェック
こうゆうチェックサイトを使うのがベター http://www.browsercam.com/
フルCSSコーディングの手順
１．レイアウトデザインを情報構造ごとの領域に分けて名前を決めておく
２．見出しレベルを確認
３．DWにテキストをコピペ。その都度 段落にしていく
４．２で決めた見出しをつけていく
５．ナビゲーション系をリストにする
６．Divで領域を設定して、１で決めた名前（ID）を付けていく
（文字反転させて ツールバー「レイアウト」のDivタグ挿入）
７．CSSを記述していく
A. firefox,safariを基準につくり→表示チェック
B. IEハックを使って修正を加える→表示チェック
（「タグインスペクタ」の関連CSSを使うと作業し易い）
チームコーディング時のテクニック
・グリッド設計、パーツ設計、CSSは原則一人
（スキル差があると中身がぐちゃぐちゃになるから）
・サイトで使用されるレイアウトパターンを小さくモジュール化して
コードをスニペットで共有
スニペットを使う事でHTML初心者やDW初心者でも
一定の品質が保たれたコーディングが可能、作業効率UP。
Contributeなどへの転用も。
トラックバック(0)
このブログ記事を参照しているブログ一覧: ２時限目 「CSS完全攻略！３ブラウザ対応のWebサイトのつくり方」
このブログ記事に対するトラックバックURL: http://shakehand.jp/cgi-bin/mt4/mt-tb.cgi/61
書き込みは初めてです。時々覗きに来てますのでよろしくお願いします。
思うに、IE6はモダンブラウザではないような気がします。というか、私的には絶対認めたくありません。（笑）
CSSで作り込んでしまうとFirefoxでは美しくプレビュー出来ても、IEでは絶対に崩れますし。かと言ってスクリプトでブラウザ分けしたり、技を駆使して同じように見せるのも設計に時間があればOKですが、そうでないとかなり辛いです。
ちょっと無理難題なスケジューリングで現在苦しんでいる真っ最中なので・・・IEのばか〜！とかぼやきながらやってます。（苦笑）
現在はハイブリッドで作成中。
こちらの授業も出てみたかったです。
モトヒロさん、こんにちは。
セミナー部活では、じゃんけんに勝てず留学を逃してしまいましたねぇ。
CSSとXHTMLでのコーディングは主流になりつつありますので
しっかりと勉強しないとと、思っております。
ブラウザが一つだととっても楽なんですけどねぇ。。。