CSSのTips

ここは、自分がCSSのレイアウトを勉強していて知らなかったことのメモです。随時追加していきます。

 

margin: auto の効果

  • 参考:marginの正しい理解
  • marginに対して、autoを設定した場合は数値は0になる。
  • 横幅(width)を指定した状態で、marginの左右のどちらかにautoを指定すると、指定した方に数値を自動で算出する。

 

position: relative の効果

  • 参考:position:relativeの使いドコロ
  • 本来は、『position: static;』で指定した際に配置される場所からどれだけズラすかを、top, leftなどのプロパティと合わせて指定して使う。
  • 単に『position: relative;』のみを指定すると意味がないように見えるが、子要素に『position: absolute;』を持つものがいる場合、『position: relative;』を指定された親要素は、その子要素にとっての絶対位置の基準になる。
  • 正確には、『position: absolute;』を指定した要素の親要素に、positionプロパティの値がrelative, absolute, fixedのものがあればそのうち最も近い階層の親要素が、relative, absolute, fixedのものがなければbody要素が絶対配置の基準となる。
  • 子要素が『position: relative;』『left: XX%;』を持っている時の『left: XX%;』の算出基準も、親要素が『position: relative;』を持っているときは、その親要素が実際に確保している幅を基準に計算される。

 

position:relative; と left: 50%; としたときの移動距離の算出方法

 

floatで横に並べたリスト(<ul><li>)をセンタリングする方法

  • 参考1:floatで並べたリストのセンタリング
  • 参考2:cssのfloat横並びリストの左右中央揃えいろいろ
  • ポイントになるのは、各li要素の『position: relative;』『left: -50%;』の算出方法。『left: -50%;』の算出基準は、ul要素で確保されている幅。その幅の長さの1/2だけ、各要素が元々のfloat位置から左に移動するので、結果的にul要素全体が、自身に確保されている長さの半分だけ左に移動することになり、センタリングされる。ul要素で確保されている幅は、Google ChromeやFirefoxのディベロッパーツールで要素を調査してみるとわかりやすい。

 

display: block の効果

  • 参考:ナビなどにおけるCSSの指定で使うdisplay:blockとdisplay:inlineの効果について
  • ブロックレベル要素:ひとかたまりのブロックと認識されるもので、幅や高さをもつと考えるもの。また、タグの前後で改行が行われる。基本的なイメージでいうと、複数行になるようなもの 例)div、p、formなど
  • インライン要素:主としてブロックレベル要素内で使われ、幅や高さをもたないと考えるもの。基本的なイメージでいうと、1行で書かれるもの 例)a、img、em、strong、input、labelなど
  • ブロックレベル要素をインライン化すると、幅や高さの指定が無効となり、タグ前後で自動で行われていた改行も無効となる。
  • インライン要素をブロック化すると、幅や高さの指定が有効となり、タグの前後で自動で改行が行われるようになる。

 

font-sizeの単位(em, rem)

 

リストにしたリンクの当たり判定の拡大

  • a要素に対して、CSSでdisplay: blockを指定する。

 

疑似クラスnth-child()の使い方

  • 引数にoddを入れると奇数、evenを入れると偶数が指定される。
  • an+b表記も可(nは0以上の整数を表し、aとbには任意の整数を指定可能)。
  • 要素の数え方は、1, 2, 3, …であり、0, 1, 2, … ではない。

 

padding-border-margin

  • 内側から、padding, border, margin。
  • margin領域には、要素に指定した背景色や背景画像は適用されず、常に透明。