2行目以降の頭の余白を揃えるCSSの簡単な方法【li,pタグに便利】

記事内に広告が含まれる場合があります。
お知らせ
河島

【制作費無料】のホームページ制作行っております。
少しでもご興味のある方はお気軽にお問い合わせください。

※この文章のように長い一文を折り返したときにコメマークの下から二行目が始まってしまうのを防ぐのが今回のブログのテーマです。

↑こうなってしまう方へ!(私も数ヶ月前にやり方わかりましたので共有します笑)

目次

\ お買い物忘れにご注意!/

indentとpaddingを使って解決

p {
   text-indent: -1em;
   padding-left: 1em;
}

こちらのコードを冒頭の赤字の一文に貼ってみましょう

See the Pen GGNwPe by kawashima (@kawashima) on CodePen.

そうすると、今回の場合の「※」一文字分(1em)が最初の行以外すべてにインデントされました。

これは、文の最初の1文字分のインデントをマイナスにする(text-indent: -1em;)ことで、文の開始1文字が左に移動します。
このままでは画面からはみ出るので、この文全体(今回はpタグ)のpadding-leftを1em追加します。
そうすることで文全体が右に1文字移動したので2行目以降が1文字インデントしたように表現できます。

これは<li>タグでもよく使われますね。

「※」は1emですが、「① はじめに」など、スペースが入る場合ははtext-indent、padding-leftともに1.2emとか小数点つけて調整してみてください。

お知らせ
河島

【制作費無料】のホームページ制作行っております。
少しでもご興味のある方はお気軽にお問い合わせください。

参考になったらシェアお願いします!

この記事を書いた人

■自己紹介
MEDIARCS ディレクター 河島 靖
1984年5月生まれの39歳

■趣味
銭湯・サウナ行くこと(サウナ・スパ健康アドバイザー)
筋トレ(懸垂をよりできるようになりたい)
音楽鑑賞(Nujabes、NewJeansなど)
ヴィンテージもの、レザーグッズが好き

コメントはこちらよりお願いします

コメントする

目次