-
line-height
行の高さを設定するnormal
30px
5px
100%
200%
2em
-
1.5
詳しく
-
CSSの正式名称は、Cascading StyleSheetsと言い、カスケーディング・スタイル・シートと読みます。
-
CSSの正式名称は、Cascading StyleSheetsと言い、カスケーディング・スタイル・シートと読みます。
-
CSSの正式名称は、Cascading StyleSheetsと言い、カスケーディング・スタイル・シートと読みます。
-
CSSの正式名称は、Cascading StyleSheetsと言い、カスケーディング・スタイル・シートと読みます。
-
CSSの正式名称は、Cascading StyleSheetsと言い、カスケーディング・スタイル・シートと読みます。
-
CSSの正式名称は、Cascading StyleSheetsと言い、カスケーディング・スタイル・シートと読みます。
-
CSSの正式名称は、Cascading StyleSheetsと言い、カスケーディング・スタイル・シートと読みます。
-
HTML
<div> <p> CSSの正式名称は、Cascading StyleSheetsと言い、カスケーディング・スタイル・シートと読みます。 </p> </div>
CSS
div {
border-radius: 10px;
line-height: normal;
background: #f4d81f;
} -
HTML
<div> <p> CSSの正式名称は、Cascading StyleSheetsと言い、カスケーディング・スタイル・シートと読みます。 </p> </div>
CSS
div {
border-radius: 10px;
line-height: 30px;
background: #f4d81f;
} -
HTML
<div> <p> CSSの正式名称は、Cascading StyleSheetsと言い、カスケーディング・スタイル・シートと読みます。 </p> </div>
CSS
div {
border-radius: 10px;
line-height: 5px;
background: #f4d81f;
}line-heightが文字の大きさより小さい値なので、文字が重なって表示されています。
-
HTML
<div> <p> CSSの正式名称は、Cascading StyleSheetsと言い、カスケーディング・スタイル・シートと読みます。 </p> </div>
CSS
div {
border-radius: 10px;
line-height: 100%;
background: #f4d81f;
} -
HTML
<div> <p> CSSの正式名称は、Cascading StyleSheetsと言い、カスケーディング・スタイル・シートと読みます。 </p> </div>
CSS
div {
border-radius: 10px;
line-height: 200%;
background: #f4d81f;
} -
HTML
<div> <p> CSSの正式名称は、Cascading StyleSheetsと言い、カスケーディング・スタイル・シートと読みます。 </p> </div>
CSS
div {
border-radius: 10px;
line-height: 2em;
background: #f4d81f;
} -
HTML
<div> <p> CSSの正式名称は、Cascading StyleSheetsと言い、カスケーディング・スタイル・シートと読みます。 </p> </div>
CSS
div {
border-radius: 10px;
line-height: 1.5;
background: #f4d81f;
}
line-height
line-height(ライン-ハイト)は、行の高さを設定するプロパティです。指定した数値が文字の上下に均等に行間として表示されますが、フォントサイズより小さい値を指定すると、文字が重なって表示されてしまいます。
値
-
normal
初期値。ブラウザによって自動的に調節される。
-
px
絶対値。
-
em
相対値。1em=指定した
フォントサイズと同じ数値。 -
%
相対値。100%=指定したフォントサイズと同じ数値。
-
その他
-
color
文字色の設定#739b2f
blue
rgba
(204,46,46,.5)hsla
(30,80%,50%,.3)
詳しく
-
みどり
-
あお
-
あか
-
オレンジ
-
HTML
<div> <p> みどり </p> </div>
CSS
div {
border-radius: 50%;
color: #739b2f;
background: #efeae4;
} -
HTML
<div> <p> あお </p> </div>
CSS
div {
border-radius: 50%;
color: blue;
background: #efeae4;
} -
HTML
<div> <p> あか </p> </div>
CSS
div {
border-radius: 50%;
color: rgba(204,46,46,.8);
background: #efeae4;
}透明度は0が透明で1が不透明です。
-
HTML
<div> <p> オレンジ </p> </div>
CSS
div {
border-radius: 50%;
color: hsla(30,80%,50%,.3);
background: #efeae4;
}透明度は0が透明で1が不透明です。
color
color(カラー)は、文字の色を変更するプロパティです。文字色は、背景色に対して前景色とも呼ばれます。初期値は一般的には黒色です。
値
-
カラー
コード16進数で表記する、色指定。#000000(黒)、#ffffff(白)など。
-
カラー
ネームRed、blueなどのカラーの名前。
-
rgba
Red、green、blue、alpha(透明度)を混ぜて色を表現する。
-
hsla
色相、彩度、輝度、透明度で表現する。