超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ テキストに関する設定

プロパティ説明
text-alignleft左寄せ
centerセンタリング
right右寄せ
text-decorationnone装飾なし(デフォルト)
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文字分の長さという意味だから、日本の文章には丁度いい値になりますね。値に%を入れると親要素に対する割合分だけインデント(字下げ)されます。