More than 1 year has passed since last update.

2行目から字頭をずらしたい時のHTML、CSSの書き方（インデント）

Last updated at 2022-04-16Posted at 2022-04-16

はじめに

※コード上のインデントではなく、ブラウザ上で表現されている時のインデントの方法です。

※ この文章はダミーですこの文章はダミーです
　この文章はダミーですこの文章はダミーです
　この文章はダミーですこの文章はダミーです

以上の書き方をしたい場合。

<p class="txt">※ この文章はダミーですこの文章はダミーです<br>
この文章はダミーですこの文章はダミーです<br>
この文章はダミーですこの文章はダミーです</p>

.txt{
    text-indent: -15px; 
    padding-left: 15px;
}

以上の書き方をすると2行目から※の分字下げをされた状態で文が書き込まれていきます。

text-indentの値を減らすと一番上の文が左にずれていきます。
左にずれた分だけ、padding-leftで文全体を右にずらしてあげると他の文とも字頭が合うようになります。
（改行タグをとっても2行目からインデントがされます）

開発者ツールのコンソールなどを使い調整してみてください。

初めての投稿でした。
お役に立てれば幸いです。