CSSのTips

2014年7月13日

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

参考：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;』を持っているときは、その親要素が実際に確保している幅を基準に計算される。

参考１：ポジションCSSプロパティの詳細とデモ
参考２：【CSS】leftプロパティ（左からの距離の指定）
親要素が『position: relative;』を持っているときは、その親要素が実際に確保している幅を基準に計算される。「親要素が実際に確保している幅」については、Google ChromeやFirefoxのディベロッパーツールで要素を調査してみるとわかりやすい。

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

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

参考１：em単位
参考２：[CSS]フォントのサイズ指定はpx？ em？既存の再検討とこれからのテクニック
参考３：【CSS3】フォントサイズの新しい単位「rem」の使い方について
emは親要素のfont-sizeプロパティの値を1とする大きさ。つまり、親要素のフォントの大きさが16pxで、子要素のfont-sizeが1.5emなら、子要素のフォントの大きさは24pxになる。親要素のfont-sizeもem単位で指定されている場合は、掛け算の掛け算になる点に注意。
rem はルート（html要素）のfont-sizeプロパティを1とする大きさ。