OfficeExcelゲームゲームのお話ホームウェブ制作HTML・CSS文章の2行目以降をCSSで字下げ(インデント)する方法2020年1月13日SHAREツイートシェアはてブLINEPocketサイトの文章を作成するときに、先頭に「・」「※」というような記号をつけることがあると思います。通常の状態で改行した場合、下のように2行目以降の文字が記号の下に来てしまいます。・改行するとこうなる。(「・」の下に「こ」がきてしまいます。)このままでもいいっちゃいいのですが、2行目以降を字下げして記号の部分だけ飛び出している状態を作ってあげると、文章の可読性が上がります。補足まとめHTMLまずはHTMLです。適当に文章を用意し、pタグで括ります。今回は記号「・」の1文字分だけ字下げするので、1文字あけますよという意味で「indent_1」というclass名をpタグにつけてあげます。class="indent_1">・2行目以降の文章は、<br>記号の分を1字下げて表示します。</p>通常はこのように見えますちなみに今のままだと、下のように改行時に記号の下に文字がまわります。記号の分を1字下げて表示します。CSS記号の下に文章がいかないようにcssを書いていきます。先ほどpタグにつけた「indent_1」というclassに下記のCSSを書いていきます。1rem;}解説padding-leftでテキストの左側に1remの余白を作ります。このままだとボックス全体に左側の余白を追加してしまうので、テキストの始まり位置を移動できるtext-indentを-1remとし、マイナス方向に1文字分移動します。単位は「rem」を使用しますが、こうすることでルート要素のフォントサイズ分の数字が指定されます。「indent_1」というclassでインデントを管理しているので、同じように1文字分ずらしたい箇所ができた場合にはclass名を付与してあげるだけです。p自体にfont-sizeをしている場合もし、このp自体にfont-sizeをしている場合、上記のように「rem」という単位で指定すると、左にあけるサイズと文字サイズにずれが生じてしまい、改行時の上の段と下の段が揃わなくなってしまいます。この場合、下記のように「em」という単位をしてあげましょう。することで指定したfont-sizeが基準となるため、改行しても文字が揃います。0.5emといった指定をしてあげましょう。1.5emで全角1文字+半角文字1文字分ですね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト前の記事パッケージ版のゲームソフトを全部売ってダウンロード版に買い直し...ヒロキWebデザイナーしています。