Dec. 11th,2020
プロパティについて
概要
| 初期値 | “line-height: normal;” |
| 適用対象 | すべての要素 |
| 継承 | Yes |
| パーセント値 | “1em”を“100%”とする |
| 計算値 | 指定したキーワード、数値、もしくは“<length>”値の算出された値 |
| アニメーション | 離散 |
“line-height”プロパティは要素内の好ましい行の高さを指定するプロパティです。テキストの行間を調整するために使用することができます。
ブロック・コンテナに適用された場合、要素の中の行ボックスの高さの最小値を指定します。非置換インライン要素に適用された場合、その値は行ボックスの高さを決めるレイアウト・バウンドを算出に使用されます。
テキストにすべて同じフォントが使用され、置換要素なども含まれない場合にはテキストのベースラインの間隔が“line-height”プロパティの値と同じになります。
行の高さが“font-size”プロパティで指定されたフォント・サイズよりも小さいと文字が重なって表示される場合があります。
“line-height”プロパティの値を“<length>”値か“<percentage>”値で指定した場合、子孫要素へ継承される値は算出された絶対距離の“<length>”値となるため、子孫要素の方が文字の大きさが大きい場合でも行の高さが変わらず、文字が重なってしまうことがあります。そのため、一般的には子孫要素にもそのまま継承される“<number>”値(もしくは“normal”)での指定が推奨されます。
サンプルコード
p { line-height: 1.5;}
値
| 値 | 説明 |
|---|---|
| キーワード値 | |
| normal | 使用されているフォントをもとに好ましい行の高さを決めます (通常“1.0”~“1.2”と同じです。) |
| “<length-percentage>”値 | |
| <length> | “em”、“px”などで好ましい行の高さを指定します |
| <percentage> | “font-size”プロパティの計算値を“100%”とした“<percentage>”値で好ましい行の高さを指定します (子孫要素に継承される値は“<percentage>”値ではなく“<percentage>”値から算出された“<length>”値です。) |
| 他の値 | |
| <number> | “font-size”プロパティの計算値に“<number>”値を掛けた数が好ましい行の高さになります |
| 共通キーワード | |
使用例
キーワード値で指定する
.p {
font-size: 1em;
line-height: normal;
}
ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
.p {
font-size: 1.5em;
line-height: normal;
}
ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
“<length>”値で指定する
.p {
font-size: 1em;
line-height: 20px;
}
ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
.p {
font-size: 1.5em;
line-height: 20px;
}
ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
“<number>”値で指定する
.p {
font-size: 1em;
line-height: 1.5;
}
ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
.p {
font-size: 1.5em;
line-height: 1.5;
}
ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
“<percentage>”値で指定する
.p {
font-size: 1em;
line-height: 150%;
}
ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
.p {
font-size: 1.5em;
line-height: 150%;
}
ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。
