CSS – プロパティー～機能・性質別

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

CSS3 – list-style-type～マーカー

2020-11-30 / tau / コメントする

概要

ul、olの様々なマーカーを設定する。

書式

list-style-type: [マーカースタイル];

値

none	list
disc	list
circle	list
square	list
decimal	list
decimal-leading-zero	list
lower-roman	list
upper-roman;	list
lower-latin	list
upper-latin	list
lower-alpha	list
upper-alpha	list
lower-greek	list
cjk-ideographic	list
hiragana	list
katakana	list
hiragana-iroha	list
katakana-iroha	list

動作確認

    <h1>ul</h1>
    <p>list-style-type: none;</p>
    <ul style="list-style-type: none">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ul>

    <p>list-style-type: disc;</p>
    <ul style="list-style-type: disc">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ul>

    <p>list-style-type: circle;</p>
    <ul style="list-style-type: circle">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ul>

    <p>list-style-type: square;</p>
    <ul style="list-style-type: square">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ul>

    <p>list-style-type: decimal;</p>
    <ol style="list-style-type: decimal">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: decimal-leading-zero;</p>
    <ol style="list-style-type: decimal-leading-zero">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: lower-roman;</p>
    <ol style="list-style-type: lower-roman">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: upper-roman;</p>
    <ol style="list-style-type: upper-roman">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: lower-latin;</p>
    <ol style="list-style-type: lower-latin">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: upper-latin;</p>
    <ol style="list-style-type: upper-latin">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: lower-alpha;</p>
    <ol style="list-style-type: lower-alpha">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: upper-alpha;</p>
    <ol style="list-style-type: upper-alpha">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: lower-greek;</p>
    <ol style="list-style-type: lower-greek">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: cjk-ideographic;</p>
    <ol style="list-style-type: cjk-ideographic">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: hiragana;</p>
    <ol style="list-style-type: hiragana">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: katakana;</p>
    <ol style="list-style-type: katakana">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: hiragana-iroha;</p>
    <ol style="list-style-type: hiragana-iroha">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

    <p>list-style-type: katakana-iroha;</p>
    <ol style="list-style-type: katakana-iroha">
      <li>ガンダム</li>
      <li>ガンキャノン</li>
      <li>ガンタンク</li>
    </ol>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

<p>list-style-type: none;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ul>

<p>list-style-type: disc;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ul>

<p>list-style-type: circle;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ul>

<p>list-style-type: square;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ul>

<p>list-style-type: decimal;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: decimal-leading-zero;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: lower-roman;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: upper-roman;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: lower-latin;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: upper-latin;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: lower-alpha;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: upper-alpha;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: lower-greek;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: cjk-ideographic;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: hiragana;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: katakana;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: hiragana-iroha;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

<p>list-style-type: katakana-iroha;</p>

<li>ガンキャノン</li>

<li>ガンタンク</li>

</ol>

ul

list-style-type: none;

ガンダム
ガンキャノン
ガンタンク

list-style-type: disc;

ガンダム
ガンキャノン
ガンタンク

list-style-type: circle;

ガンダム
ガンキャノン
ガンタンク

list-style-type: square;

ガンダム
ガンキャノン
ガンタンク

ol

list-style-type: decimal;

ガンダム
ガンキャノン
ガンタンク

list-style-type: decimal-leading-zero;

ガンダム
ガンキャノン
ガンタンク

list-style-type: lower-roman;

ガンダム
ガンキャノン
ガンタンク

list-style-type: upper-roman;

ガンダム
ガンキャノン
ガンタンク

list-style-type: lower-latin;

ガンダム
ガンキャノン
ガンタンク

list-style-type: upper-latin;

ガンダム
ガンキャノン
ガンタンク

list-style-type: lower-alpha;

ガンダム
ガンキャノン
ガンタンク

list-style-type: upper-alpha;

ガンダム
ガンキャノン
ガンタンク

list-style-type: lower-greek;

ガンダム
ガンキャノン
ガンタンク

list-style-type: cjk-ideographic;

ガンダム
ガンキャノン
ガンタンク

list-style-type: hiragana;

ガンダム
ガンキャノン
ガンタンク

list-style-type: katakana;

ガンダム
ガンキャノン
ガンタンク

list-style-type: hiragana-iroha;

ガンダム
ガンキャノン
ガンタンク

list-style-type: katakana-iroha;

ガンダム
ガンキャノン
ガンタンク

CSS3 – marginとpadding

2020-11-30 / tau / コメントする

概要

marginでボックス要素の外側の余白、paddingでボックス要素の内側の余白を設定する。

以下の例は、p要素にmargin=40pxとpadding=20pxを設定していて、親のbody要素からp要素の外側まで40px、p要素の外側からその内容まで20pxの余白がとられている。

　<p style="border: solid; margin: 40px; padding: 20px;">
　　ゴーシュは町の活動写真館でセロを弾く係りでした。
　　けれどもあんまり上手でないという評判でした。
　　上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、
　　いつでも楽長にいじめられるのでした。
　</p>

　　ゴーシュは町の活動写真館でセロを弾く係りでした。

　　けれどもあんまり上手でないという評判でした。

　　上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、

　　いつでも楽長にいじめられるのでした。

　</p>

ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。

書式

margin、paddingはボックス要素の外と内に対する余白で、上下左右の余白量に対する指定の仕方は双方に共通する。

1つのmargin/paddingでまとめて指定

margin/padding [上下左右]: 上下左右全ての余白を同じ値で設定。

margin/padding [上下] [左右]: 上と下、左と右に共通する余白を指定。
margin/padding [上] [左右] [下]: 上、左右共通、下の余白を設定
margin/padding [上] [右] [下] [左]: 上、右、下、左の余白をそれぞれ設定。上から時計回り。

4つの辺のいずれかの余白を個別に設定

margin/paddingに以下を続けて、それぞれの余白を個別に設定。

-top　上
-bottom　下
-left　左
-right　右

たとえばpadding-left: 20px;は左内側の余白を20pxで指定。

Tips – CSSで同じ要素に共通する文字列を付加する

2020-11-30 / tau / コメントする

概要

HTMLで同じタグやクラスの先頭や末尾に共通の文字列を表示させる方法。

たとえばh1要素の先頭に必ず”●”をつけたいときなど。

CSSの書式

[セレクター]:before {content: [文字列];}
[セレクター]:after {content: [文字列];}

動作確認

以下はh1要素の前後に共通の文字列を付加するように指定したCSSを、HTMLのヘッダー部分に書いた例。

これのページを表示させると、h1要素は全てセンタリングされ、先頭に"<<"、末尾に">>"の文字列が付加され、すべてのタグに繰り返し文字を打つ必要がない。

スタイルで記述する場合、<などのエンティティ－で書く必要はない。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Template by content</title>
    <style type="text/css">
      h1:before {content: "<<";}
      h1:after {content: ">>";}
      h1 {text-align: center;}
    </style>
  </head>
  <body>
    <h1>テスト</h1>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Template by content</title>

h1:before {content: "<<";}

h1:after {content: ">>";}

h1 {text-align: center;}

</style>

</head>

<body>

</body>

</html>