MIIcode | CSS

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
  
  色相、彩度、輝度、透明度で表現する。

line-height

line-height

color

color