TOP ＞ スタイルシートで文字をデザイン ＞ 文章の先頭を字下げする
文章の先頭を字下げする
日本語であれ、英語であれ、文章の段落の先頭は一字分字下げして始めることが一般的です。もちろん実際に、 文章の先頭にスペース文字を入れて表現することも可能ですが、スタイルシートを使ってコントロールすることもできます。
段落の先頭の空白を設定するには『text-indent』 プロパティを使います。
『text-indent』プロパティで指定できる値は「pt」「px」などのような数値です。このとき設定した値はインデントの幅に反映されます。 パーセントで指定することも出来ます。この場合は親要素に対する割合でインデントの幅が決まります
文章の先頭を字下げする
【書き方】
text-indent : [ 数値｜%] ;
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 .c1{text-indent: 10pt; background-color: #99ff99;} .c2{text-indent: 20px; background-color: #ff9999;} .c3{text-indent: 50%; background-color: #9999ff;} 【HTML本文】 <html> <head> <title>文章の先頭を字下げするのサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/220.css" type="text/css"> </head> <body bgcolor="silver"> <p>文章の先頭にスペースをいれて字下げします。</p> <p class="c1">この段落ではインデントを15ptで設定しています。<br />改行するだけでは先頭文字に空白はありません。</p> <p class="c2">この段落ではインデントを20pxで設定しています。<br />この段落でも、改行するだけでは先頭文字に空白はありません。</p> <p class="c3">この段落ではインデントを50％で設定しています。<br />親要素のライン幅の50％分字下げしています。</p> </body> </html> |
[
スタイルシートで文字をデザイン ]
