CSS3~覚え書き

文法

セレクタ

  • タグはそのまま記述
  • idの場合は”#”に続けて記述
  • クラスの場合は”.”に続けて記述

入れ子のタグの指定

入れ子の中のタグを指定するときは、親要素と子要素の間に半角スペースを入れる。

一括指定

異なるセレクタに同じ設定を適用する場合は、”,”で区切って列挙。

ベンダー・プレフィックス

 
ブラウザ プレフィックス
FireFox -moz-
Google Chrome, Safari -webkit-
Opera -o-
Internet Explorer -ms-

box-sizing

要素のサイズには、margin、borderの幅、paddingは加味されないため、 サイズ指定が煩雑になり、時に意図しない結果になる。

たとえばHTML5のbodyとnavブロック、sectionブロックの幅を ピクセル単位で指定し、 mavとsectionがbodyの幅にピッタリ納まるようにしたいとき、 各々にmarginなどをを設定していると、 その分だけ意図するサイズから差し引いた値をwidthに設定しなければならない。

HTML5では、box-sizing属性をborder-boxにすることでこれを解消し、 paddingとborderを含めたサイズでwidthを指定できるようになる。以下の例は、 div要素のboxクラスに対して以下の属性を適用し、box-sizing属性を変えた例。

box-sizing:content-boxのとき
box-sizingテスト
box-sizing:border-boxのとき
box-sizingテスト

 

border-sizingをborder-boxにするため、デフォルトで読み込むCSSファイルに 以下を記述。この際、各ベンダーのブラウザに対応させるため、 ベンダー・プレフィックスをつけておく。

calc()ファンクション

CSS3で実装された機能で、動的にブロックの幅などを計算できる。 ブラウザによって実装状況が異なるので、ベンダー・プレフィックスを 付けて列挙するのが安全。

ぶら下げインデント

CSS3ではtext-indent属性にhangingスイッチが定義されているが、 Chromeのバージョン47.0.2526.73 mでは再現できなかった。

paddingとtext-indentを使って同じ効果を得る方法がネット上で紹介されている。 paddingで全体を右へ移動させ、text-indentに負の値を指定することで 先頭のみ元の場所へ戻す。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です