文字の間隔を指定する場合は「letter-spacing」を使用します。
CSS Ver. | 適用要素 | 継承 |
---|---|---|
2.1 | 全要素 | する |
構文 | |
---|---|
letter-spacing : normal | 値; |
|
プロパティ/設定値 | 意味 |
letter-spacing : normal; letter-spacing : 10px; letter-spacing : 2em; letter-spacing : 30%; |
標準の間隔(初期値) 文字の間隔を値で指定。負の値も指定可能。 「長さ・大きさの単位」参照 デフォルト:「タグ毎のスタイル初期値」を参照 |
<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>
関連するCSS(STYLE) | |
---|---|
hyphens | ハイフネーション(単語途中の改行指定)の利用 |
white-space | 改行コード・タブ・スペースの表示 |
word-break | 自動改行のルール |
word-spacing | 単語の間隔 |
word-wrap | 長い単語の改行ルール |