ホームページのネタ帳

テキストの2行目以降をインデントさせる方法

2012年1月23日

テキストの見出しを目立たせるために、2行目以降のテキストをインデントさせる方法をご紹介します。

↑このように2行目以降のテキストがインデントすることによって、見出しが強調され見やすくなります。

【html】

<p class=”test”>見出し テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>

【css】

.test {
text-indent: -50px;
margin-left: 50px;
}

マイナスの値のtext-indentで一行目を左方向にずらして、margin-leftで全体を右に寄せます。そうすることで、一行目だ けが元の位置にもどり、二行目以降が指定した値の分だけインデントされます。

※注意:text-indentとmargin-leftは、同じ値を入力してください。

 

↑他にも、※印を使う場合や箇条書きする場合に便利です。


カテゴリー関連記事

お問い合わせはこちら

ご質問などございましたら、お気軽にご連絡ください。

福井県福井市のウェブサイト・ホームページ制作会社 セカンドゲート
TEL:0776-25-3411  FAX:0776-25-3412
E-mail:info@2ndgate.jp