text-indent/字下げ

text-indentプロパティを使うと字下げが出来ます。

説明

 text-indentプロパティを使うと段落の先頭行に対して1文字空ける等の字下げが設定出来ます。

text-indent例

構文

 text-indentプロパティの構文は以下の通りです。

text-indent: 字下げ幅;

 字下げ幅は以下の設定が出来ます。

【字下げ幅】
指定 説明
px ピクセル
em 文字数
% 横幅に対する割合

 デフォルトは字下げなしです。

利用例

 text-indentの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

p {
text-indent: 20px;
}

<p>字下げとして20px指定しています。字下げはtext-indentで指定出来ます。</p>

 上記を表示すると以下になります。尚、分かり易いように、点線の枠の横幅をwidthで200pxに指定しています。

字下げとして20px指定しています。字下げはtext-indentで指定出来ます。

 次はemで1文字を指定した時の表示例です。

p {
text-indent: 1em;
}

<p>字下げとして1em指定しています。字下げはtext-indentで指定出来ます。</p>

 上記を表示すると以下になります。

字下げとして1em指定しています。字下げはtext-indentで指定出来ます。

 次は30%を指定した時の表示例です。

p {
text-indent: 30%;
}

<p>字下げとして30%指定しています。字下げはtext-indentで指定出来ます。</p>

 上記を表示すると以下になります。

字下げとして30%指定しています。字下げはtext-indentで指定出来ます。

関連ページ

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)