Tips – 親要素全面に子要素を張り付けて縦センタリング

概要

たとえば、アンカー要素を親のブロック要素に張り付けたり、ブロック化したリストアイテムに張り付けるような場合を想定。

親要素全面への貼り付けは、ブロック要素かインラインブロック要素がよさそうなので、それらで縦センタリングを試してみる。

試行結果

概要

以下の試行では、ブロックの親要素に対してブロック、インラインブロックの子要素を前面に貼り付けて、そのテキストを横方向と縦方向にセンタリングしている。

考え方は以下の通り。

  • 親要素で
    • widthとheightを指定
    • heightと同じ値でline-heightを指定
  • 子要素で
    • widthとheightを100%として親要素の全面に貼り付け
    • text-align: center;で水平方向にセンタリング
    • vertical-align: middle;で垂直方向にセンタリング

親要素でline-heightを設定する意味は以下の通り。

  • デフォルトでは、親要素がブロックでもその中の行については行の高さが設定されている
  • 子要素が親要素のwidthとheightに合わせて展開しても、その中の行の高さは追随して変わらない
  • 親要素の行の高さを要素の高さと同じにすることで、子要素の行の高さも広がり、その中で縦センタリングされるようになる。

なお、子要素でline-height: 100%;としてもうまくいかない。これは、line-heightプロパティーが継承する値が親要素の行高さであって、親要素自体の高さではないためと思われる。

HTMLファイル

CSSファイル

結果

Chromeで表示させた結果、block、inline-blockとも縦横両方向でセンタリングされている。

改良

これまでの方法では、親要素でline-heightを設定するために、親要素の高さと同じ値を2度CSSに書かなければならなかった。これはメンテナンス上煩雑で、ミスも生じやすい。

カスタムプロパティーを使うと、変数に値を代入して使うように、同じ値を再利用できる。

以下は、上で使ったのCSSのparent_blockの部分で、heightとline-heightに同じカスタムプロパティーを参照させている。

 

CSS3 – カスタムプロパティー

概要

CSSを書くとき、サイズ指定や色指定で同じ値を何度も打ち直すことがある。このように同じ値を常にコードとして打ち込むのは手間・ミスの素であり、メンテナンス上もよろしくない。

こういうとき、カスタムプロパティーを使うと、値を変数のように定義しておいて、何度も再利用できる。

書式

--[カスタムプロパティー名]: [値];

再利用するための値で、数値、色コードなど、プロパティーの値で指定可能なもの。

動作確認

以下のことを確認している。

  • CSS内全域で共通のカスタムプロパティーを定義
    • –common-bg-color
  • parentクラスでカスタムプロパティーを定義
    • –face-color
  • –common-bg-colorはbody要素、childクラスの要素のいずれにも反映
  • –face-colorはparentクラスの要素と、その子であるchildクラスの要素には反映されるが、parentクラスの要素から独立したchildクラスの要素には反映されない

HTMLファイル

CSSファイル

 

Tips – 親要素全面に子要素を貼り付ける

概要

たとえば以下のような場合を想定

  • ブロック要素にアンカー要素をいっぱいに広げてバナーのように使いたい
  • ブロック化したリストアイテムの中にアンカー要素を広げて張り付けて、領域のどこをクリックしても反応するようにしたい

結論としては、貼り付けたい要素をブロック要素かインラインブロック要素とするのがよさそう。

以下、親要素をブロック要素とする。

試行結果

概要

以下の試行結果は、ブロックの親要素に対して、子要素をブロック、インライン、インラインブロック、テーブル要素と様々なタイプにして、親要素全面への貼り付けを試してみたもの。

考え方は共通。

  • 親要素でwidth/heightを指定
  • 子要素でwidth and/or heightを100%で設定

HTMLファイル

CSSファイル

結果

Chromeで表示させた結果。

  • inline要素はpxなどの固定値でもwidth/heightは設定できない
  • table-cell要素はpxなどの固定値ならwidth/heightは変化するが、%では親要素に追随しなかった

まとめ

子要素がblock要素

  • margin: 0;、height: 100%;を指定して全面貼り付け可能
  • widthはデフォルトで100%になっていることが多いが、念のために指定した方がいいか

子要素がinline要素

  • widthやheightが指定できないので、全面貼り付けは困難

子要素がinline-block要素

  • margin: 0;、width: 100%、height: 100%;を指定して全面貼り付け可能
  • widthとheightがデフォルトではインラインと同じ挙動だが、設定することで固定できる

子要素がtable-cell要素

  • widthやheightの%が効かなさそうなので、全面貼り付けは困難