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

2018.6.9

自己紹介

1984年生まれの40歳、オンラインビジネスの仕事をしている河島靖です。
以前までWEB制作・イベント制作業などの受託ビジネスをしてきましたが、仕事も時間も自分でコントロールできないことが大きな悩みでした。
現在は自分でコントロールできるオリジナルコンテンツでのビジネスをメインにし、現在も絶賛チャレンジ中です。
事業としてはブログアフィリエイト・Amazonでの輸入販売・AmazonでのオリジナルOEM商品販売・Kindle書籍出版・ファンクラブ運営などを行っています。
今後はSEOに頼らないオンラインでの教育コース開発やマーケティングファネルを使ったビジネスを構築したく活動しています。メルマガでも情報発信しています。

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

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

本記事の目次

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とか小数点つけて調整してみてください。