4-13-11a インデント

文章の段落等を字下げする方法です。text-indentプロパティを利用致します。(下記の見本では 段落を現す「p」タグ部分 を全て一括で指定しております)。

<head> ~ </head> 内に記述して下さい。

<style type="text/css">
<!--
p {
text-indent: 1em; /* 字下げ幅の設定 */
}
-->
</style>

[ 関連事項 : HP-TIPS > CSS > CSSにおける長さの単位 ]
[ 関連事項 : HP-TIPS > CSS > 外部スタイルシートの記述方法 ]

4-13-11b 具体的な見本

インデントの見本をclass属性 を利用して表示しております。

CSS

<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--

.sample-1e { text-indent: 10px; }
.sample-2e { text-indent: 10pt; }
.sample-3e { text-indent: 1em; }
.sample-4e { text-indent: 2em; }
.sample-5e { text-indent: -10px; }
.sample-6e { text-indent: 100%; }

-->
</style>

HTML

<body> ~ </body> 内に記述して下さい。
<p>この文章はインデント無しの見本です。</p>
<p class="sample-1e">この文章は「インデント10px」の見本です。</p>
<p class="sample-2e">この文章は「インデント10pt」の見本です。</p>
<p class="sample-3e">この文章は「インデント1em」の見本です。</p>
<p class="sample-4e">この文章は「インデント2em」の見本です。</p>
<p class="sample-5e">この文章は「インデント-10px」の見本です。</p>
<p class="sample-6e">この文章は「インデント50%」の見本です。</p>

表示結果

この文章はインデント無しの見本です。

この文章は「インデント10px」の見本です。

この文章は「インデント10pt」の見本です。

この文章は「インデント1em」の見本です。

この文章は「インデント2em」の見本です。

この文章は「インデント-10px」の見本です。

この文章は「インデント50%」の見本です。

その他、特定のセレクタ(例:「body」、「p」等)に複数のプロパティ(「color」、「font-size」等)を設定する見本は 『4-9 見出しを修飾する』 をご覧下さい。

[ 関連事項 : HP-TIPS > HPの作り方 > 用語集 > セレクタ ]
[ 関連事項 : HP-TIPS > HPの作り方 > 用語集 > プロパティ ]