段落の1行目にインデントを付けるtext-indentプロパティ
text-indent

 段落の1行目にインデントを指定できます。ちなみに、インデントとはいわゆる字下げのことです。このインデントの値には、プラスの値はもちろん、マイナスの値も指定可能ですが、インデントの効果があるのは1行目だけで、2行目以降は特に効果はなく、通常通り表示されます。

 注意すべき点として、インライン要素には適用できません。そういったときの代替手段としてはmarginプロパティやpaddingプロパティを指定する方法が考えられます。

 また、リンクを画像にする際、テキストを消すために「text-indent:-9999px;」などと指定する方法が使われる場合があります。

基本データ

構文 セレクタ{text-indent:値;}
継承
絶対的なサイズをpx(ピクセル)を使って指定する場合
○○px
相対的なサイズを%(パーセント)、em(イーエム)を使って指定する場合
○○%、○○em
親から継承させる場合
inherit
効果 段落の1行目にインデントを付ける
初期値 none
適用箇所 ブロック要素

ほげほげですね。

p { text-indent: 1em;}

動作Webブラウザ

Internet Explorer 5.5、6.0、7.0、8.0以上
Firefox 全バージョン
Safari全バージョン
Opera全バージョン
Chrome全バージョン
iPhone/iPad全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.textIndent

jQueryを使った参照方法

$('【セレクタ】').css('text-indent','【値】');
$('【セレクタ】').css({'text-indent':'【値】'});

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間