4-13-11a インデント
文章の段落等を字下げする方法です。text-indentプロパティを利用致します。(下記の見本では 段落を現す「p」タグ部分 を全て一括で指定しております)。
<head> ~ </head> 内に記述して下さい。
<style type="text/css">
<!--
p {
text-indent: 1em; /* 字下げ幅の設定 */
}
-->
</style>
- 字下げしたくない方は記述しないで下さい。
- サイズを指定する方法は
数値+単位、%(パーセント)で指定する2方法あります。
(例:10px、120%) - 数値+単位を利用する場合
単位は出来るだけ相対単位をご利用下さい
[ 関連事項 : HP-TIPS > CSS > CSSにおける長さの単位 ]
[ 関連事項 : HP-TIPS > CSS > 外部スタイルシートの記述方法 ]
4-13-11b 具体的な見本
インデントの見本をclass属性 を利用して表示しております。
CSS
<head> ~ </head> 内に記述して下さい。<!--
.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 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の作り方 > 用語集 > プロパティ ]