Loading...

第6回 テキスト関係のプロパティ - ブロガー向けCSS入門

f:id:nasust:20161212143136j:plain


この記事は以下のブロガー対象としています。

  • ブログをカスタマイズしたい
  • 全くCSSの知識が無い

こんにちはnasustです。
今回はCSS Level 1のテキスト関係のプロパティを解説します。

word-spacing

単語の間隔を指定します。日本語では使用する機会は無いと思います。

例:

<span style="word-spacing:1em;">This is a pen</span>
<span style="word-spacing:3em;color:red;">This is a pen</span>

表示例:


This is a pen
This is a pen


letter-spacing

文字間の間隔を指定します。

例:

<span style="letter-spacing:0.1em;">あいうえお</span>
<span style="letter-spacing:0.3em;color:red;">あいうえお</span>

表示例:


あいうえお
あいうえお


text-decoration

テキストを装飾します。値は以下の通りです。

  • none ⋯ 装飾なし
  • underline ⋯ 下線
  • overline ⋯ 上線
  • line-through ⋯ 打ち消し線
  • blink ⋯ テキストが点滅します

underline

例:

<span style="text-decoration:underline;">あいうえお</span>

表示例:


あいうえお


overline

例:

<span style="text-decoration:overline;">あいうえお</span>

表示例:


あいうえお


line-through

例:

<span style="text-decoration:line-through;">あいうえお</span>

表示例:


あいうえお


※現在のブラウザでは点滅しません。

例:

<span style="text-decoration:blink;">あいうえお</span>

表示例:


あいうえお


vertical-align

テキストの縦の位置を指定します。値は以下の通りです。

  • baseline ⋯ ベースラインに揃える
  • middle ⋯ 中央揃え
  • sub ⋯ 下付き文字
  • super ⋯ 上付き文字
  • text-top ⋯ 上端揃え
  • text-bottom ⋯ 下端揃え

baseline

例:

<span style="vertical-align:baseline">Abcdefg</span>  Base Line

表示例:


Abcdefg Base Line

middle

例:

<span style="vertical-align:middle">Abcdefg</span>  Base Line

表示例:


Abcdefg Base Line

sub

例:

<span style="vertical-align:sub">Abcdefg</span>  Base Line

表示例:


Abcdefg Base Line

super

例:

<span style="vertical-align:super">Abcdefg</span>  Base Line

表示例:


Abcdefg Base Line

text-top

例:

<span style="vertical-align:text-top">Abcdefg</span>  Base Line

表示例:


Abcdefg Base Line

text-bottom

例:

<span style="vertical-align:text-bottom">Abcdefg</span>  Base Line

表示例:


Abcdefg Base Line

text-transform

英語などの大文字、小文字を指定します。値は以下の通りです。

  • none ⋯ 記述した通りに表示します
  • capitalize ⋯ 単語の先頭を大文字にします
  • uppercase ⋯ 全て大文字で表示します
  • lowercase ⋯ 全て小文字で表示します

none

例:

<span style="text-transform:none;">This is a pen</span>

表示例:


This is a pen


capitalize

例:

<span style="text-transform:capitalize;">This is a pen</span>

表示例:


This is a pen


uppercase

例:

<span style="text-transform:uppercase;">This is a pen</span>

表示例:


This is a pen


lowercase

例:

<span style="text-transform:lowercase;">This is a pen</span>

表示例:


This is a pen


text-align

テキストの横の位置を指定します。

  • left ⋯ 左
  • center ⋯ 中央
  • right ⋯ 右

left

例:

<div style="text-align:left;">Abcdefg</div>

表示例:


Abcdefg

center

例:

<div style="text-align:center;">Abcdefg</div>

表示例:


Abcdefg

例:

<div style="text-align:right;">Abcdefg</div>

表示例:


Abcdefg

line-height

行間を指定します。%やpmなどの数値を指定します。

<div style="line-height:200%">サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章</div>

表示例:


サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章サンプル文章

ブロガー向けWEBデザイン入門に戻る