■ テキストに関する設定
| プロパティ | 値 | 説明 |
| text-align | left | 左寄せ |
| center | センタリング |
| right | 右寄せ |
| text-decoration | none | 装飾なし(デフォルト) |
| underline | 下線 |
| overline | 上線 |
| line-through | 取消線 |
| text-indent | 単位 | mm,cm,pt,pxなど |
| % | 親要素の指定値に対する割合 |
◆テキストの水平位置を設定する
(css file)
.hidari{ text-align:left; }
.mannaka{ text-align:center; }
.migi{ text-align:right; }
(html file)
<div class="hidari">雨は夜更け過ぎに雪へと変わるだろ〜♪</div>
<div class="mannnaka">彼は夜更け過ぎに月へと帰るだろ〜♪</div>
<div class="migi">ラメは夜更け過ぎにキラキラ光るだろ〜♪</div>
雨は夜更け過ぎに雪へと変わるだろ〜♪
彼は夜更け過ぎに月へと帰るだろ〜♪
ラメは夜更け過ぎにキラキラ光るだろ〜♪
◆テキストの装飾を設定する
<div style="text-decoration:none;">テキストの装飾なし</div>
<div style="text-decoration:underline;">テキストの装飾アンダーライン</div>
<div style="text-decoration:overline;">テキストの装飾オーバーライン</div>
<div style="text-decoration:line-through;">テキストの装飾取り消し</div>
テキストの装飾なし
テキストの装飾アンダーライン
テキストの装飾オーバーライン
テキストの装飾取り消し
◆インデントを設定する
(css file)
div{ text-indent:1em; }
(html file)
<div>
日本語では段落の1行目は1文字空けて書き出します。英語では数文字分空けます。長さの単位 1em は1文字分の長さという意味だから、日本の文章には丁度いい値になりますね。値に%を入れると親要素に対する割合分だけインデント(字下げ)されます。
</div>
日本語では段落の1行目は1文字空けて書き出します。英語では数文字分空けます。長さの単位 1em は1文字分の長さという意味だから、日本の文章には丁度いい値になりますね。値に%を入れると親要素に対する割合分だけインデント(字下げ)されます。
|