Strings of Life

PHP/Phalcon/MySQL/JavaScript/RegExp/Ruby/Perl/ActionScript

タグ:CSS3

1.草案 Working Draft
2.最終草案 Last Call Working Draft
3.勧告候補 Candidate Recommendation
4.勧告案 Proposed Recommendation
5.勧告 Recommendation

出典:大津真『JavaScriptプログラミング入門 第2版』


ちなみに、HTML5は2011/5/25に最終草案が出て、現在は勧告候補の策定中。(最終草案はここで読める)

CSSは、「CSS3」という大枠ではなく、個々の機能別にDraftやRecommendationが出てるみたいなので、ちょっと事情が違う。例えば、CSS3のセレクタ(:last-child等)は、もう勧告が出てる(2011/09/29)。一方で、Grid Layout(テーブルレイアウトのような感覚でdivをレイアウトできる、新しいプロパティ)は、今年の3/22に草案が出たばかり。

個人的には、CSSの草案・勧告が楽しい。「こんなことが出来るようになるのか!」という期待感がある。

・html

<nav class="nav-topicpath">
    <ul>
      <li>a</li>
      <li>b</li>
 (ここに擬似要素が入る)
    </ul>
  </nav>


・CSS

.nav-topicpath ul:after{ ←擬似要素セレクタ「:after」でul要素の終了タグの直前に擬似要素を挿入
  content: ""; ←contentプロパティで擬似要素として""(中身なし)を挿入
  display:block;
  clear:both;
}

なお、擬似要素としては他にも :before があり、要素の開始タグの直後に要素が挿入される。




参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

nav, headerのようなHTML5の新要素をcssで装飾する際は、

header nav{ padding:10px; }

のように要素名をセレクタにするのが普通のやり方だが、これではマークアップするタグを変更する時(nav→div)や、新要素が廃止になってしまった時に、HTMLとCSSの双方を修正する必要がある。

そこで、nav要素にクラスをつけておいて(例:<nav class="nav-topicpath">)、

.nav-topicpath{ padding:10px; }

と指定してやると、nav→divと変更するような時にHTMLを変更するだけで済む。




参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

擬似クラスセレクタでは、「最初の要素」「最後の要素」といった条件によって、自動的に対象の要素を選ぶことができる。

・主な擬似クラスセレクタ(要素名 スタイルが適用される要素)

:first-child 親要素の最初の子要素となる要素
:last-child 親要素の最後の子要素となる要素
:nth-child(n) 親要素のn番目の子要素となる要素
:nth-child(odd) 親要素の奇数番目の要素となる要素
:nth-child(even) 親要素の偶数番目の要素となる要素
:first-of-type 親要素の子要素として最初に出現する要素
:last-of-type 親要素の子要素として最後に出現する要素
:nth-of-type 親要素の子要素としてn番目に出現する要素


例 最後のli要素のmargin-bottomを0にしたい場合

・クラスセレクタを使用

.parent li {
    margin-bottom:16px;
}

.parent li.last {
    margin-bottom:0;
}

・擬似クラスセレクタを使用

.parent li {
    margin-bottom:16px;
}

.parent li:last-child{
    margin-bottom:0;
}




参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

このページのトップヘ