text関連プロパティの値（CSS）

text関連プロパティの値（CSS）

text-align

上記表示例のサンプルコード（HTML埋め込み）

<div style="text-align: left;">左に寄せる</div>
<div style="text-align: center;">中央揃えにする</div>
<div style="text-align: right;">右に寄せる</div>

サンプルコード（CSS別記）

/*CSSコード*/
.text-align-left {
  text-align: left;
}
.text-align-center {
 text-align: center;
}
.text-align-right {
  text-align: right;
}

<!--HTMLコード-->
<p class="text-align-left">左に寄せる</p>
<p class="text-align-center">中央揃えにする</p>
<p class="text-align-right">右に寄せる</p>

サンプルコード（CSS別記） の表示

左に寄せる

中央揃えにする

右に寄せる

（ブロックレベル要素に対してこのプロパティを定義すると、その中のインライン要素を左寄せ・中央揃え・右寄せにすることができます）

vertical-align

サンプルコード（CSS別記）

/*CSSコード*/
.vertical-align {
  height: 150px;
}
.vertical-align-top {
  vertical-align: top;
}
.vertical-align-middle {
  vertical-align: middle;
}
.vertical-align-bottom {
  vertical-align: bottom;
}

<!--HTMLコード-->
<table class="vertical-align">
  <tr>
    <td class="vertical-align-top">行の上端に揃える</td>
    <td class="vertical-align-middle">親要素のx文字の中心に揃える</td>
    <td class="vertical-align-bottom">行の下端に揃える</td>
  </tr>
</table>

サンプルコード（CSS別記） の表示

line-height

＜数値+単位指定（相対単位）＞ 0の時のみ単位を省略できます）

＜数値+単位（絶対単位）＞ 0の時のみ単位を省略できます）

上記表示例のサンプルコード（HTML埋め込み）

<div style="line-height: normal;">これがnormal</div>
<div style="line-height: 20px;">これが20px</div>
<div style="line-height: 2em;">これが2em</div>
<div style="line-height: 9.8mm;">これが9.8mm(28pt)</div>
<div style="line-height: 1cm;">これが1cm</div>
<div style="line-height: 0.5in;">これが0.5in（1.27cm）</div>
<div style="line-height: 72pt;">これが72pt（1in・25.4mm）</div>

text-decoration

上記表示例のサンプルコード（HTML埋め込み）

<div style="text-decoration: underline;">これが下線</div>
<div style="text-decoration: line-through;">これが取り消し線</div>

サンプルコード（CSS別記）

/*CSSコード*/
.text-decoration-none {
  text-decoration: none;
}
.text-decoration-underline {
  text-decoration: underline;
}
.text-decoration-overline {
  text-decoration: overline;
}
.text-decoration-line-through {
  text-decoration: line-through;
}

<!--HTMLコード-->
<div>
  <span class="text-decoration-none">これが装飾なしです</span><br>
  <span class="text-decoration-underline">これが下線です</span><br>
  <span class="text-decoration-overline">これが上線です</span><br>
  <span class="text-decoration-line-through">これが取り消し線です</span>
</div>

サンプルコード（CSS別記） の表示

text-indent

＜数値+単位（相対単位）＞ 0の時のみ単位を省略できます）

上記表示例のサンプルコード（HTML埋め込み）

<div style="text-indent: 0;">これが字下げなし</div>
<div style="text-indent: 20px;">これが20px</div>
<div style="text-indent: 1em;">これが1em</div>
<div style="text-indent: 2em;">これが2em</div>

サンプルコード（CSS別記）

/*CSSコード*/
.text-indent-none {
 text-indent: 0;
}
.text-indent-20px {
 text-indent: 20px;
}
.text-indent-1em {
 text-indent: 1em;
}
.text-indent-2em {
 text-indent: 2em;
}

<!--HTMLコード-->
<div class="text-indent-none">これが字下げなしです</div>
<div class="text-indent-20px">これが20pxです</div>
<div class="text-indent-1em">これが1emです</div>
<div class="text-indent-2em">これが2emです</div>

サンプルコード（CSS別記） の表示

＜数値+単位（絶対単位）＞ 0の時のみ単位を省略できます）

上記表示例のサンプルコード（HTML埋め込み）

<div style="text-indent: 0;">これが字下げなし</div>
<div style="text-indent: 4.9mm;">これが4.90mm（14pt）</div>
<div style="text-indent: 1cm;">これが1cm</div>
<div style="text-indent: 0.5in;">これが0.5in（1.27cm）</div>
<div style="text-indent: 10.5pt;">これが10.5pt（3.70mm）</div>

サンプルコード（CSS別記）

/*CSSコード*/
.text-indent-none {
 text-indent: 0;
}
.text-indent-mm {
  text-indent: 4.9mm;
}
.text-indent-cm {
  text-indent: 1cm;
}
.text-indent-in {
  text-indent: 0.5in;
}
.text-indent-pt {
  text-indent: 10.5pt;
}

<!--HTMLコード-->
<div class="text-indent-none">これが字下げなしです</div>
<div class="text-indent-mm">これが4.90mm（14pt）です</div>
<div class="text-indent-cm">これが1cmです</div>
<div class="text-indent-in">これが0.5in（1.27cm）です</div>
<div class="text-indent-pt">これが10.5pt（3.70mm）です</div>

サンプルコード（CSS別記） の表示

text-transform

上記表示例のサンプルコード（HTML埋め込み）

<div>noneだとhelloは<span style="text-transform: none;">hello</span>のまま</div>
<div>capitalizeだとhelloは<span style="text-transform: capitalize;">hello</span>になる</div>
<div>uppercaseだとhelloは<span style="text-transform: uppercase;">hello</span>になる</div>
<div>lowercaseだとHELLOは<span style="text-transform: lowercase;">HELLO</span>になる</div>

サンプルコード（CSS別記）

/*CSSコード*/
.text-transform-none {
  text-transform: none;
}
.text-transform-capitalize {
  text-transform: capitalize;
}
.text-transform-uppercase {
  text-transform: uppercase;
}
.text-transform-lowercase {
  text-transform: lowercase;
}

<!--HTMLコード-->
<div>noneだとhelloは<span class="text-transform-none">hello</span>のままです</div>
<div>capitalizeだとhelloは<span class="text-transform-capitalize">hello</span>になります<div>
<div>uppercaseだとhelloは<span class="text-transform-uppercase">hello</span>になります<div>
<div>lowercaseだとHELLO<span class="text-transform-lowercase">HELLO</span>になります<div>

サンプルコード（CSS別記）の表示

<div style="letter-spacing: normal;">これがnormal</div>
<div style="letter-spacing: 5px;">これが5px</div>
<div style="letter-spacing: 1em;">これが1em</div>
<div style="letter-spacing: 4.9mm;">これが4.9mm(14pt)</div>
<div style="letter-spacing: 0.5cm;">これが0.5cm</div>
<div style="letter-spacing: 0.25in;">これが0.25in</div>
<div style="letter-spacing: 18pt;">これが18pt（0.25in）</div>

/*CSSコード*/
.letter-spacing-normal {
  letter-spacing: normal;
}
.letter-spacing-px {
  letter-spacing: 5px;
}
.letter-spacing-em {
  letter-spacing: 1em;
}
.letter-spacing-mm {
  letter-spacing: 4.9mm;
}
.letter-spacing-cm {
  letter-spacing: 0.5cm;
}
.letter-spacing-in {
  letter-spacing: 0.25in;
}
.letter-spacing-pt {
  letter-spacing: 18pt;
}

<!--HTMLコード-->
<div class="letter-spacing-normal;">これがnormal</div>
<div class="letter-spacing-px">これが5px</div>
<div class="letter-spacing-em">これが1em</div>
<div class="letter-spacing-mm">これが4.9mm(14pt)</div>
<div class="letter-spacing-cm">これが0.5cm</div>
<div class="letter-spacing-in">これが0.25in</div>
<div class="letter-spacing-pt">これが18pt（0.25in）</div>

<div>これがnormal:<span style="word-spacing: normal;">normal normal normal</span></div>
<div>これが 5px:<span style="word-spacing: 5px;">helllo helllo helllo</span></div>
<div>これが1em:<span style="word-spacing: 1em;">helllo helllo helllo</span></div>
<div>これが4.9mm:<span style="word-spacing: 4.9mm;">helllo helllo helllo</span></div>
<div>これが0.5cm:<span style="word-spacing: 0.5cm;">helllo helllo helllo</span></div>
<div>これが0.25in:<span style="word-spacing: 0.25in;">helllo helllo helllo</span></div>
<div>これが18pt:<span style="word-spacing: 18pt;">helllo helllo helllo</span></div>

/*CSSコード*/
.word-spacing-normal {
  word-spacing: normal;
}
.word-spacing-px {
  word-spacing: 5px;
}
.word-spacing-em {
  word-spacing: 1em;
}
.word-spacing-mm {
  word-spacing: 4.9mm;
}
.word-spacing-cm {
  word-spacing: 0.5cm;
}
.word-spacing-in {
  word-spacing: 0.25in;
}
.word-spacing-pt {
  word-spacing: 18pt;
}

<!--HTMLコード-->
<div>これがnormal:<span class="word-spacing-normal">normal normal normal</span></div>
<div>これが 5px:<span class="word-spacing-px">helllo helllo helllo</span></div>
<div>これが1em:<span class="word-spacing-em">helllo helllo helllo</span></div>
<div>これが4.9mm:<span class="word-spacing-mm">helllo helllo helllo</span></div>
<div>これが0.5cm:<span class="word-spacing-cm">helllo helllo helllo</span></div>
<div>これが0.25in:<span class="word-spacing-in">helllo helllo helllo</span></div>
<div>これが18pt:<span class="word-spacing-pt">helllo helllo helllo</span></div>

<div style="white-space: normal;">「あ    い」あといの間に４個の半角スペースを入れていますがひとつの半角スペースになっています。自動的に折り返します。</div>

<div style="white-space: nowrap;">「あ    い」あといの間に４個の半角スペースを入れていますがひとつの半角スペースになっています。また、折り返しされません。</div>

<div style="white-space: pre;">
記述した通りに表示されます。
<code>
/*CSSコード*/
.white-space-normal {
  white-space: normal;
}
.white-space-nowrap; {
  white-space: nowrap;
}
.white-space-pre; {
  white-space: pre;
}
</code>
</div>