text関連プロパティの値(CSS)

スポンサーリンク
Photo by Jantine Doornbos on Unsplash
Photo by Jantine Doornbos on Unsplash
スポンサーリンク

text関連プロパティの値(CSS)

text-align

値(パラメータ)内容
left左に寄せる
center中央揃えにする
right右に寄せる
入力例text-align: center;
表示例
左に寄せる
中央揃えにする
右に寄せる

上記表示例のサンプルコード(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

値(パラメータ)内容
baseline親要素のベースラインに揃える(初期値)
top行の上端に揃える
middle親要素のx文字の中心に揃える
bottom行の下端に揃える
入力例vertical-align: bottom;

サンプルコード(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別記) の表示

行の上端に揃える 親要素のx文字の中心に揃える 行の下端に揃える

line-height

値(パラメータ)内容
normal標準(初期値)

<数値+単位指定(相対単位)> 0の時のみ単位を省略できます)

値(パラメータ)内容
任意の数値+px1px(ピクセル)は画面上の表示の最小単位
任意の数値+em1emは1文字分の大きさ

<数値+単位(絶対単位)> 0の時のみ単位を省略できます)

値(パラメータ)内容
任意の数値+mmミリメートル
任意の数値+cmセンチメートル
任意の数値+inインチ(1インチは約2.54cm)(1インチは72pt)
任意の数値+ptポイント(1pt≒0.35mm)(10.5ptは3.70mm)
入力例line-height: 14px;
表示例
これがnormal
これが20px
これが2em
これが9.8mm(28pt)
これが1cm
これが0.5in(1.27cm)
これが72pt(1in・25.4mm)

上記表示例のサンプルコード(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

値(パラメータ)内容
none装飾不要(初期値)
underline下線を引く
overline上線を引く
line-through取り消し線を引く
入力例text-decoration: underline;
表示例
これが下線
これが取り消し線

上記表示例のサンプルコード(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の時のみ単位を省略できます)

値(パラメータ)内容
任意の数値+px1px(ピクセル)は画面上の表示の最小単位
任意の数値+em1emは1文字分の大きさ
入力例text-indent: 14px;
表示例
これが字下げなし
これが20px
これが1em
これが2em

上記表示例のサンプルコード(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別記) の表示

これが字下げなしです
これが20pxです
これが1emです
これが2emです

<数値+単位(絶対単位)> 0の時のみ単位を省略できます)

値(パラメータ)内容
任意の数値+mmミリメートル
任意の数値+cmセンチメートル
任意の数値+inインチ(1インチは約2.54cm)(1インチは72pt)
任意の数値+ptポイント(1pt≒0.35mm)(10.5ptは3.70mm)
入力例font-size: 10.5pt;
表示例
これが字下げなし
これが4.90mm(14pt)
これが1cm
これが0.5in(1.27cm)
これが10.5pt(3.70mm)

上記表示例のサンプルコード(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別記) の表示

これが字下げなしです
これが4.90mm(14pt)です
これが1cmです
これが0.5in(1.27cm)です
これが10.5pt(3.70mm)です

text-transform

値(パラメータ)内容
none変換しません(初期値)
capitalize単語の先頭を大文字にします
uppercaseすべての文字を大文字にします
lowercaseすべての文字を小文字にします
入力例text-transform: capitalize;
表示例
noneだとhelloはhelloのまま
capitalizeだとhelloはhelloになる
uppercaseだとhelloはhelloになる
lowercaseだとHELLOはHELLOになる

上記表示例のサンプルコード(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別記)の表示

noneだとhelloはhelloのままです
capitalizeだとhelloはhelloになります
uppercaseだとhelloはhelloになります
lowercaseだとHELLOHELLOになります

letter-spacing

値(パラメータ)内容
normal標準(初期値)

<数値+単位指定(相対単位)> 0の時のみ単位を省略できます)

値(パラメータ)内容
任意の数値+px1px(ピクセル)は画面上の表示の最小単位
任意の数値+em1emは1文字分の大きさ

<数値+単位(絶対単位)> 0の時のみ単位を省略できます)

値(パラメータ)内容
任意の数値+mmミリメートル
任意の数値+cmセンチメートル
任意の数値+inインチ(1インチは約2.54cm)(1インチは72pt)
任意の数値+ptポイント(1pt≒0.35mm)(10.5ptは3.70mm)
入力例letter-spacing: 14px;
表示例
これがnormal
これが5px
これが1em
これが4.9mm(14pt)
これが0.5cm
これが0.25in
これが18pt(0.25in)

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

<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別記)

/*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>

サンプルコード(CSS別記)の表示

これがnormal
これが5px
これが1em
これが4.9mm(14pt)
これが0.5cm
これが0.25in
これが18pt(0.25in)

word-spacing

値(パラメータ)内容
normal標準(初期値)

<数値+単位指定(相対単位)> 0の時のみ単位を省略できます)

値(パラメータ)内容
任意の数値+px1px(ピクセル)は画面上の表示の最小単位
任意の数値+em1emは1文字分の大きさ

<数値+単位(絶対単位)> 0の時のみ単位を省略できます)

値(パラメータ)内容
任意の数値+mmミリメートル
任意の数値+cmセンチメートル
任意の数値+inインチ(1インチは約2.54cm)(1インチは72pt)
任意の数値+ptポイント(1pt≒0.35mm)(10.5ptは3.70mm)
入力例word-spacing: 14px;
表示例
これがnormal:normal normal normal
これが 5px:helllo helllo helllo
これが1em:helllo helllo helllo
これが4.9mm:helllo helllo helllo
これが0.5cm:helllo helllo helllo
これが0.25in:helllo helllo helllo
これが18pt:helllo helllo helllo

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

<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別記)

/*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>

サンプルコード(CSS別記)の表示

これがnormal:normal normal normal
これが 5px:helllo helllo helllo
これが1em:helllo helllo helllo
これが4.9mm:helllo helllo helllo
これが0.5cm:helllo helllo helllo
これが0.25in:helllo helllo helllo
これが18pt:helllo helllo helllo

white-space

値(パラメータ)内容
normal連続する空白類を一つの半角にまとめる
さらに、自動的な折り返しを行う(初期値)
nowrap連続する空白類を一つの半角にまとめる
自動的な折り返しは行わない
pre連続する空白類をそのまま表示する
自動的な折り返しは行わない
入力例white-space: normal;
表示例(normal)
「あ い」あといの間に4個の半角スペースを入れていますがひとつの半角スペースになっています。自動的に折り返します。

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

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

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

<div style="white-space: nowrap;">「あ    い」あといの間に4個の半角スペースを入れていますがひとつの半角スペースになっています。また、折り返しされません。</div>
入力例white-space: pre;
表示例(pre)
記述した通りに表示されます。 /*CSSコード*/ .white-space-normal { white-space: normal; } .white-space-nowrap; { white-space: nowrap; } .white-space-pre; { white-space: pre; }

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

<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>

タイトルとURLをコピーしました