🥜
HTML・CSS 個人用備忘録(Vol.3)
背景画像の設定[ background-image ]
- 背景の画像を設定できる。
- background-color よりも上に表示される。
# 記述方法
-
- プロパティ:値;
# プロパティ
- background-image
# 値
- url("画像のパス");
背景画像のサイズ設定[ background-size ]
- 背景画像のサイズを設定できる。
# 記述方法
- プロパティ:値;
# プロパティ
- background-size
# 値
- auto(初期値)
自動的に算出される。 - contain
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する。 - cover
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する。 - px etc...
幅高さを指定できる。 - %
背景領域に対する背景画像の幅・高さのパーセンテージを設定できる。
ボックスサイズの算出方法の設定[ box-sizing ]
- 初期値では、padding, borderの太さは含まれてないボックスサイズの算出方法が使われているので、width: 100%; padding: 20px;とした場合、横幅が 100% + 40px(paddingの左右分)となってしまう。
# プロパティ
- box-sizing
# 値
- content-box(初期値)
paddingとborderを幅と高さに含めない。 - border-box
paddingとborderを幅と高さに含める。 - inherit
親要素の値を継承する。
要素を横並びにする[ float ]
- 指定された要素を包含ブロックの左右どちらかに寄せて配置し、テキストやインライン要素がその周りを回りこめるように設定できる。
# プロパティ
- float
# 値
-
none(初期値)
配置を指定しない場合。 -
left
指定した要素を左に寄せる。
後に続く内容はその右側に回り込む。 -
right
指定した要素を右に寄せる。
後に続く内容はその左側に回り込む。
floatによる回り込み解除[ clear, clearfix, overflow, height ]
- 後に続く内容が回り込むため、意図しない要素の回り込みについては解除する必要がある。
- 回り込み解除の方法は幾つかあり、特性が異なるので注意が必要。
# 方法
- clearfix方式(推奨)
- floatしている要素の直親要素に設定する。
- after領域を占領してしまう。
- deisplay:flow-root;
- floatしている要素の直親要素に設定する。
- IEには非対応。
- overflow:hidden;
- floatしている要素の直親要素に設定する。
- 回り込みは解除できるが、設定した要素からはみ出している場合、その部分は非表示となる。
- height(非推奨)
- floatしている要素の直親要素に設定する。
- 子要素のコンテンツが増減したり、サイズ変更されるような場所では使えない。
- 親要素で指定した高さより、子要素の高さが大きい場合、はみ出した部分に次の要素が重なってしまう。
- clear:both;
- 回り込みをやめさせたい要素自体に設定する。
- float を設定しない要素にclear:both;を設定すると、margin-topが反映されなくなる。
これはclear:both;は上マージンの自動調整を行うことから起こる挙動である。
# 参考URL
フレックスボックス[ display:flex; ]
- CSSのレイアウト技法で、HTMLブロックを横並びにすることができる。
- 従来のfloatよりも柔軟なレイアウトを組むことができる。
- 比較的新しくできたCSSのプロパティのため、古いブラウザはフレックスボックスに対応していなかったり、ベンタープレフィックス(-webkit-xxx など)を付けないと動作しない場合がある。
対策として下記のように合わせて記述することも多い。(その他のフレックスボックス関連プロパティも同様)- display:-webkit-flex;
- display:flex;
- 親要素をフレックスコンテナと呼び、子要素をフレックスアイテムと呼ぶ。
- 垂直方向の位置を指定するvertical-alignは使用できない。
すべてのアイテムに対して垂直方向の位置を指定する場合はフレックスボックスにalign-itemsを、個々のアイテム毎に垂直方向の位置を指定する場合はフレックスアイテムにalign-selfプロパティを指定して設定する。
# 【必須】フレックスコンテナ(親要素)の指定
- display:flex;
# フレックスコンテナ(親要素)に設定できるプロパティ
-
flex-direction
フレックスアイテム(子要素)をどの方向に並べていくかを指定するプロパティflex-directionの値
- row(初期値)
左から右に配置する。 - row-reverse
右から左に配置する。 - column
上から下に配置する。 - column-reverse
下から上に配置する。
- row(初期値)
-
flex-wrap
フレックスアイテム(子要素)を一行に並べるか、複数行に並べるかを指定するプロパティflex-wrapの値
- nowrap(初期値)
レックスアイテムが一行に収まらない時でも1行に収める。
※収まらない場合は、フレックスアイテムにwidthを設定しても効かなかったりはみ出したりする。 - wrap
フレックスアイテムが一行に収まらない時に複数行にする - wrap-reverse
フレックスアイテムが一行に収まらない時に複数行にする
整列順はwrapの逆から整列される。
- nowrap(初期値)
-
justify-content
flex-directionで並べる際に、(主軸に対して)子要素同士をどのような間隔で並べるかを指定する。justify-contentの値
- flex-start(初期値)
主軸の始点に配置する。 - flex-end
主軸の終点に配置する。 - center
主軸の中央に配置する。 - space-between
両端から均等に配置する。 - space-around
主軸に対し均等間隔に配置する。
- flex-start(初期値)
-
align-items
フレックスコンテナは2つの軸を持っており、flex-directionで設定した向きが主軸で、主軸に対して垂直な軸を交差軸という。
このプロパティはフレックスコンテナの交差軸に対して子要素同士をどのような間隔で並べるかを設定することができる。align-itemsの値
- stretch(初期値)
交差軸の始点から終点まで伸縮する。(heightを設定していない場合に限る) - flex-start
交差軸の始点に配置する。 - flex-end
交差軸の終点に配置する。 - center
交差軸の中央に配置する。 - space-baseline
交差軸のベースラインに配置する。
- stretch(初期値)
# フレックスアイテム(子要素)に設定できるプロパティ
- order
フレックスアイテムの並べる順番をどうするか指定する。
値の小さい順に軸の始点から配置される。orderの値
- 数値(... -3, -2 , -1, 0, 1, 2, 3 ...)
※初期値は「0」
- 数値(... -3, -2 , -1, 0, 1, 2, 3 ...)
- flex-grow
フレックスアイテムを他の要素と比べてどのくらい伸ばすか指定する。flex-growの値
- 数値(0, 1, 2, 3 ...)
※初期値は「0」
※整数または小数部分のある数値、マイナスの値は無効
- 数値(0, 1, 2, 3 ...)
- flex-shrink
フレックスアイテムを他の要素と比べてどのくらい縮めるか指定する。flex-shrinkの値
- 数値(0, 1, 2, 3 ...)
※初期値は「0」
- 数値(0, 1, 2, 3 ...)
- flex-basis
widthのように幅を指定するプロパティ。
flex-basisとwidthの両方が設定されている場合は、flex-basisが優先される。flex-basisの値
- 数値(px, em, %, etc...)
※初期値は「auto」
- 数値(px, em, %, etc...)
- flex
flex-grow、flex-shrink、flex-basisを１つにまとめて記載できるプロパティflexの値
- 値をどのように記述するかで指定方法が変化する。
※初期値は「auto」
- 値をどのように記述するかで指定方法が変化する。
- align-self
垂直方向の位置を指定するプロパティ。
フレックスコンテナ(親要素)に余白がなければ、どれを指定しても表示は変わらない。
フレックスコンテナ(親要素)でalign-itemsを指定していた場合は[align-self]のプロパティが優先される。algn-selfの値
- auto(初期値)
- 親要素のフレックスコンテナのalign-itemsプロパティの値を継承する。
親要素のalign-itemsの値を使用。 - flex-start
上揃えで配置。 - flex-end
下揃えで配置。 - center
中央揃えで配置。 - baseline
ベースラインに合わせて配置。 - stretch
親要素の上下の余白を埋めるように配置。
Discussion