WDEのEricMayer氏ワークショップのメモ

11/8にEricMayer氏のワークショップに参加してきました。
「効率よく最適化するためのCSS上流講座」というと講座名でした。基本的にはCSSレイアウトを作成する際に必要な開発環境、CSSの個別性やセレクタの優先度・その操作、floatプロパティとpositionプロパティについての理解と高度なレイアウトテクニックなどなど。。。。

基本的にはCSSレイアウトを普段からやっている人だったらある程度分かる講習内容でした。復習半分とアイディアの伝授半分と言った所でしょうか（私はそう感じたんですが…）

以下、講習中にGoogleDocsでとったメモ。若干寝不足で記憶が飛んでいる所もあると思いますが、その辺はご容赦を…。

• CSSレイアウト開発で重宝するFirefoxアドオン（機能拡張）の紹介
  • Web Developer
  • Firebug
  • why slow

  firefoxのアドオン（機能拡張）を有効に使うことで作業環境を整える事で作業を効率よくこなす事が出来る。（だからって動作確認はfirefoxだけじゃダメだけど）

• CSSのカスケード（継承）について
  • CSSのセレクタには個別性と優先度がある
    [example]
    <style type=”text/css” media=”all”>
        body h1{　　　　/*0,0,0,2*/
        color:red;
        }
        html h1{　　　　/*0,0,0,2*/
        color:red;
        }
    </style>
    では、html〜の方が優先される。

    しかし、

    <style type=”text/css” media=”all”>
        body.mine h1{       /*0,0,1,2*/
        color:red;
        }
        html h1{              /*0,0,0,2*/
        color:red;
        }
    </style>

    ではbody.mineの方が優先される。
    赤文字の部分はセレクタ要素、class名、id名、インラインの数を表している。

    しかしinlineでスタイルを指定する事はWEB標準の「表現」と「構造」分離に反する事なのであまり推奨しない。出来る限り避ける。

    もし、個別性の優先度をコントロールしたいときは、一番優先させたいプロパティ指定の横に「!important;」を挿入して操作する事が出来る。
    しかし、プロパティの指定が重複した場合、従来のCSSの特徴（優先度と個別性）に従って、指定が優先される。

  • リンク要素の疑似要素
    a:link
    a:visited
    a:hover
    a:active
    の順は決まっている。
    もしこの「lvha」のルールを崩してしまうと正常に表示されない。
  • CSSの継承
    指定されたセレクタに内包されているセレクタには、その外側に指定されているスタイルが適用される事。
    しかし、個別性によってidやclassが指定されている場合、そちらが優先される。
  • フォントサイズの相対的指定について
    フォントサイズを相対的単位で指定するとその小要素に継承される。
    例えば。

        ol{font-size:125%}

    と指定すると、そのol要素に内包されているol要素も親のolに対して125％拡大されレンダリングされる事になる。
    それを回避する方法として、

        ol ol{font-size:100%;}

    として指定する事で親のolに対して、100%の文字サイズでレンダリングを指定する事で回避できる。

• floatプロパティについて
  そもそもfloatプロパティはレイアウト目的に作られたプロパティではない。本来は画像の回り込みに使うのが目的のもの。
  float:の回り込みの解除にはclear:を使うが、これを使うと回り込みを解除したブロックにmarginは無視される。
  clearfix
  最近はclearfixはあまり使わない。
  その代わりにカラムを内包している親要素にfloat:leftを指定する方法やoverflow:hiddenを指定する事で、背景を下の方まで引き延ばす事が出来る。
  display:block;をかけても良い。
• 属性セレクタ
  a（アンカー）要素
  :link,:visited,:hover,:active
  または
  a[href](a[要素内の属性名])※IE6では未サポート
  
  a[href="hoge.html"]{border:1px solid #ff0000;}
      hrefにhoge.htmlが指定されている部分を指定
      []の中の文字はそっくり同じものでは反映されない。
  
  a[href~="hoge"]{border:1px solid #ff0000;}
      リンクのURLに「hoge」が入っているものに指定する
  
  a[class*="hoge"]{border:1px solid #ff0000;}
      class名にhogeが入っているものに対して指定する
  
  a[class^="hoge"]{border:1px solid #ff0000;}
      class名にhogeが入っているものに対して指定する
  
  p+p{border:2px solid purple;}
      pに隣接しているpに指定している
  
  body > * {margin:2em;}
      左辺に内包されている小要素に指定する
  
  CSSは要素をあまり気にしていない。
  *（アスタリスク・全称セレクタ）をつけるとすべての要素に対してCSSが適用される。
• 属性セレクタの問題点
  属性セレクタはCSS2.1で勧告はされているが、
  IE6がサポートしていないので、現在ではあまり使う機会が少ない。IE７からはサポートしているが動作が一部不安定との意見もある。IE8では振るサ
  ポートされているので、IE8のシェアが高くなれば使う機会も増えることが予想される。
  • tableの先進的な使い方
  • 比較表の棒グラフ
  • 年歴表
  • 会議の出席率の地図データ

  tableはdisplay:blockのようでdispaly:blockではないから、CSSで強制的にblockにする。

• レイアウト目的でのdiv要素の使用について
  本当に不要であれば、使わないほうがいい。しかしデザイナーが提示してきたデザイン上の問題で、挿入することはやむ得ない。したがって、そういった場合はclass・id属性値に意味のある値を与えることで、無意味な要素の挿入でなくすることが必要だと思われる。

以上がメモです。意識朦朧としている中でメモを取っていたので、なんだかちゃんと合っているか分からないんですが。後日他の参加者さんのメモとかも参考にしようと思います。

あとMayer氏と直接お話しする機会もすこしあったのですが、私は普段はデザインの仕事もしているけど、デザイナーもちゃんとXHTMLとCSSは理解していた方がいいと考えるんだけど、というようなことを話したんですが（英語喋れる方に通訳してもらったんですが…）、「それはもちろんそうだと思うよ。絵を描く人だって道具の事を良く知っていた方がより良い作品が描けるのと同じで、WEBの制作者もセンスはもちろん必要だけど、同時に知識も必要だと思う」と言ってくれて、個人的にいろいろ思う事があって悩んでいたんですが、Mayer氏の言葉を聞いてなんか悩みが吹っ切れました（苦笑）。なんか感極まって泣いちゃったし……。

しかしやっぱり英語は必要ですね〜。なんかもっとちゃんと勉強しておけば良かったと悔やまれます。次回までにはもう少し話せるようになろうと思います。