タグ

ブックマーク / weboook.blog22.fc2.com (2)

  • 「nth-child」と「nth-of-type」の使い方と違い

    CSS3セレクタの中でも特に使い勝手がいいと個人的に思う「nth-child」と「nth-of-type」の使い方を紹介します。似ているようで若干違いますので正しく理解しましょう。 基的な使い方 まず、「nth-child」と「nth-of-type」の基的な使い方を説明します。 nth-childの説明 一般的に「E:nth-child(n)」という風に表されていて、親要素のn番目の子要素であるE要素ということになります。 具体的には以下のように使います。

    「nth-child」と「nth-of-type」の使い方と違い
    takaoman
    takaoman 2014/05/09
    4n+1のnは0からスタートする。初期値は1。だから1行目から、と。
  • CSS(スタイルシート)の基本、小技、テクニック総まとめ

    CSSの基や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集|Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番

    CSS(スタイルシート)の基本、小技、テクニック総まとめ
  • 1