blog | SevenStyleWeb

前回のエントリーにも書いたけど、サイバーガーデンさんの「ハイレベルCSS実践講座」ってもんに参加してきた。
結論を先に申しますと、「すんごいためになった」ということ。益子さんの話をみっちり聞こうと、一番前の席を確保。

しかし、益子さんは人にモノを教えるのがすんごいうまいなーと思った。というかプレゼン能力、コミュニケーション能力に長けている感がヒシヒシと伝わってきた。

１０時から１９時までの長丁場だったけど、それを感じさせないくらいのすんごい充実感。

その時のことをダイジェストでメモ。あくまでメモなので、適当な具合はあしからず。感じたことも交えて・・・。


・CSSハックは使わないほうがいいのがいいんだけど、使わないと無理なことがあるから、結局使わなきゃね。

・ブラウザには「実装不備」と「実装差異」が存在する。
　「実装不備」はAcid2 Testをクリアするブラウザが増えていることで、少なくなってきている。
　「実装差異」はもともとのブラウザの仕様に基づくもの、
　つまりブラウザの個性の部分なので、ここは今後もなくならない。
　⇒ということで、CSSハックは必然的になくならない。

・ブラウザというのは、そのページを見る人によるから、サイトのターゲットユーザによって利用バランスはマチマチ。

・IE5への対応に関しては、「ほどほど対応」がベストかな？IE7への移行手続きも自動アップデートで始まることだし・・・。
　⇒「ほどほど対応」：レイアウトが大幅に崩れない程度に。細かいことは気にしない。

・リセットスタイルの適用を。今ユニバーサルセレクタ方式のリセットは少なくなってきている。
　⇒【理由】
　　　一部のブラウザでのフォームパーツのくずれ
　　　ブラウザのデフォルトスタイルのよい部分を失う
　　　ページの表示速度が遅くなる。

・CSSでのフォント指定は、「和、英」で表記するとSafariでいきる

・DDTT、エラスティックレイアウトはテキストの見切れを防ぐことが一番の目的⇒ボックスしていに"em"をつかう

・文書構造上必要なものをデザインの都合上非表示にするなど、合理的な非表示はスパムではない
　⇒ただ、非表示にする際には、オフレフトか、overflow:hiddenがベスト。
　　display:none、vidsibility:hiddenは読み上げソフトでも読み上げられない。

・エラスティックレイアウトの限界をきちんと知ること。
　⇒無限のフォントサイズに対応できるわけではない。アップサイジングは3倍～4倍を目安。
　　画像は大きくなりましぇん。（将来的にはベクター画像の埋め込みになるかもめ）
　　グラデーション画像には注意が必要。⇒約３倍のものをつくるべし。

・CSSハックを使うときは、ブラウザごとに別ファイルにしましょうね。

・CSSハックを使うときは個別性での上書きなので、きちんとセレクタを書きましょうね。

・プリント用のCSSは、リンク名を表記してあげるのが、すんごく気が利いている。
　a:after{
       content:attr('href');
  }

・スクリーンの表記をそのままプリントに出すのは、ほぼ不可能とクライアントにはわかってもらうことが大事。
　⇒だってブラウザごとに違うんだもん。

・モバイルの見栄えはOperaを使うといいよ。スモールスクリーンモードがあって、便利。

・携帯はキャリアごとにCSSの対応が違う。iモードは外部のCSSを読んでくれない

・iPhoneやiPodTouchはHandheldではなく、スクリーンと考えるのがいい

・aタグには、疑似クラスfocusも指定するのが気が利いている。（マウスで操作するばかりじゃないよ）

・js系のマウスイベントは、対で考えておくべきものがある。
　⇒onclickとonkeypress、onmousedownとonkeydown、onmouseupとonkeyup
 

こんな感じ。
８時間あってこれだけ？って感じをもった貴兄。よく聞けい。全部紹介したら、ぼくが自腹で払ったお金の意味がないじゃん。ということで。

しかし、このノウハウが今の会社で活かすことができるのは、いつになることやら・・・。