WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「文字の間隔」

letter-spacing 「文字の間隔」

文字の間隔を指定する場合は「letter-spacing」を使用します。

CSS Ver.適用要素継承
2.1全要素する
広告

letter-spacingの指定方法

構文

letter-spacing : normal | 値;

プロパティ/設定値意味
letter-spacing : normal;
letter-spacing : 10px;
letter-spacing : 2em;
letter-spacing : 30%;
標準の間隔(初期値)
文字の間隔を値で指定。負の値も指定可能。
長さ・大きさの単位参照
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

letter-spacing のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_letter-spacing_normal{
  letter-spacing : normal;
}
.css_letter-spacing_value1{
  letter-spacing : 10px;
}
.css_letter-spacing_value2{
  letter-spacing : 2em;
}
.css_letter-spacing_value3{
  letter-spacing : -1px;
}

<!-- html -->
<div class="common">

  <div class="cssTitle">letter-spacing : normal;</div>
  <div class="css_letter-spacing_normal">
  CSSの「letter-spacing」は、文字の間隔を指定します。CSS "letter-spacing" specifies character spacing.
  </div>

  <div class="cssTitle">letter-spacing : px;</div>
  <div class="css_letter-spacing_value1">
  CSSの「letter-spacing」は、文字の間隔を指定します。CSS "letter-spacing" specifies character spacing.
  </div>

  <div class="cssTitle">letter-spacing : em;</div>
  <div class="css_letter-spacing_value2">
  CSSの「letter-spacing」は、文字の間隔を指定します。CSS "letter-spacing" specifies character spacing.
  </div>

  <div class="cssTitle">letter-spacing : px;(負の値)</div>
  <div class="css_letter-spacing_value3">
  CSSの「letter-spacing」は、文字の間隔を指定します。CSS "letter-spacing" specifies character spacing.
  </div>

</div>
letter-spacing : normal;
CSSの「letter-spacing」は、文字の間隔を指定します。CSS "letter-spacing" specifies character spacing.
負の値も指定可能。
letter-spacing : px;
CSSの「letter-spacing」は、文字の間隔を指定します。CSS "letter-spacing" specifies character spacing.
負の値も指定可能。
letter-spacing : em;
CSSの「letter-spacing」は、文字の間隔を指定します。CSS "letter-spacing" specifies character spacing.
負の値も指定可能。
letter-spacing : px;(負の値)
CSSの「letter-spacing」は、文字の間隔を指定します。CSS "letter-spacing" specifies character spacing.
負の値も指定可能。
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン