HTML5 – 要素～機能・性質別

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

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

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

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

HTMLファイル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>要素の拡張とセンタリングのテスト</title>
    <link rel="stylesheet" href="expand_centering.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="child_block">block要素</div>
    </div>

    <div class="parent_block">
      <span class="child_inline_block">inline-block要素</span>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>要素の拡張とセンタリングのテスト</title>

</head>

<body>

<div class="child_block">block要素</div>

</div>

<span class="child_inline_block">inline-block要素</span>

</div>

</body>

</html>

CSSファイル

.parent_block {
  display: block;
  border: solid 2px #000000;
  width: 200px;
  height: 100px;
  padding: 0px;
  line-height: 100px;
}

.child_block {
  display: block;
  background-color: #b0e0e6;
  margin: 0px;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

.child_inline_block {
  display: inline-block;
  background-color: #98fb98;
  margin: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

.parent_block {

display: block;

border: solid 2px #000000;

width: 200px;

height: 100px;

padding: 0px;

line-height: 100px;

}

.child_block {

display: block;

background-color: #b0e0e6;

margin: 0px;

height: 100%;

text-align: center;

vertical-align: middle;

}

.child_inline_block {

display: inline-block;

background-color: #98fb98;

margin: 0px;

width: 100%;

height: 100%;

text-align: center;

vertical-align: middle;

}

結果

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

改良

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

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

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

.parent_block {
  --parent-height: 100px;
  display: block;
  border: solid 2px #000000;
  width: 200px;
  height: var(--parent-height);
  padding: 0px;
  line-height: var(--parent-height);
}

.parent_block {

--parent-height: 100px;

display: block;

border: solid 2px #000000;

width: 200px;

height: var(--parent-height);

padding: 0px;

line-height: var(--parent-height);

}

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

2020-12-01 / tau / コメントする

概要

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

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

書式

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

値

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

動作確認

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

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

HTMLファイル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>カスタムプロパティーのテスト</title>
    <link rel="stylesheet" href="css_custom_property.css">
  </head>
  <body>
    <div class="parent">
      親ブロック
      <div class="child">
        親の下の子ブロック
      </div>
    </div>
    <div class="child">
      独立した子ブロック
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>カスタムプロパティーのテスト</title>

</head>

<body>

親ブロック

親の下の子ブロック

</div>

独立した子ブロック

</div>

</body>

</html>

CSSファイル

:root {
  --common-bg-color: #e0ffff;
}

body {
  background-color: var(--common-bg-color)
}

.parent {
  --face-color: #ff00ff;
  width: 300px;
  height: 200px;
  margin: 20px;
  background-color: #f5deb3;
  border: solid 2px #ff0000;
  color: var(--face-color)
}

.child {
  width: 200px;
  margin: 20px;
  color: var(--face-color);
  background-color: var(--common-bg-color);
  border: solid 2px #0000ff
}

:root {

--common-bg-color: #e0ffff;

}

body {

background-color: var(--common-bg-color)

}

.parent {

--face-color: #ff00ff;

width: 300px;

height: 200px;

margin: 20px;

background-color: #f5deb3;

border: solid 2px #ff0000;

color: var(--face-color)

}

.child {

width: 200px;

margin: 20px;

color: var(--face-color);

background-color: var(--common-bg-color);

border: solid 2px #0000ff

}

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

2020-12-01 / tau / コメントする

概要

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

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

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

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

試行結果

概要

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

考え方は共通。

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

HTMLファイル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>要素の拡張テスト</title>
    <link rel="stylesheet" href="expand.css">
  </head>
  <body>
    <div class="parent_block">
      <div class="child_block">block要素</div>
    </div>

    <div class="parent_block">
      <span class="child_inline">inline要素</span>
    </div>

    <div class="parent_block">
      <span class="child_inline_block">inline-block要素</span>
    </div>

    <div class="parent_block">
      <span class="child_table_cell">table-cell要素</span>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>要素の拡張テスト</title>

</head>

<body>

<div class="child_block">block要素</div>

</div>

<span class="child_inline">inline要素</span>

</div>

<span class="child_inline_block">inline-block要素</span>

</div>

<span class="child_table_cell">table-cell要素</span>

</div>

</body>

</html>

CSSファイル

.parent_block {
  display: block;
  border: solid 2px #000000;
  width: 200px;
  height: 100px;
  padding: 0px;
}

.child_block {
  display: block;
  background-color: #b0e0e6;
  margin: 0px;
  height: 100%;
}

.child_inline {
  display: inline;
  background-color: #ffa07a;
  margin: 0px;
  width: 100%;
  height: 100%;
}

.child_inline_block {
  display: inline-block;
  background-color: #98fb98;
  margin: 0px;
  width: 100%;
  height: 100%
}

.child_table_cell {
  display: table-cell;
  background-color: #f0e68c;
  width: 100%;
  height: 100%;
}

.parent_block {

display: block;

border: solid 2px #000000;

width: 200px;

height: 100px;

padding: 0px;

}

.child_block {

display: block;

background-color: #b0e0e6;

margin: 0px;

height: 100%;

}

.child_inline {

display: inline;

background-color: #ffa07a;

margin: 0px;

width: 100%;

height: 100%;

}

.child_inline_block {

display: inline-block;

background-color: #98fb98;

margin: 0px;

width: 100%;

height: 100%

}

.child_table_cell {

display: table-cell;

background-color: #f0e68c;

width: 100%;

height: 100%;

}

結果

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の%が効かなさそうなので、全面貼り付けは困難

TauStation

月別: 2020年12月

HTML5 – 要素～機能・性質別

設定

移動・遷移

表示

入力・選択

HTML5 – 要素～アルファベット順

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

概要

試行結果

概要

HTMLファイル

CSSファイル

結果

改良

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

概要

書式

値

動作確認

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

概要

試行結果

概要

HTMLファイル

CSSファイル

結果

まとめ

子要素がblock要素

子要素がinline要素

子要素がinline-block要素

子要素がtable-cell要素