• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

CSSで2行目以降にインデント(字下げ)をする方法

投稿者アイコン
2018/07/02
書いた人:
rurippa!
カテゴリ:
ネタ
27,550 views

よくある注意事項や箇条書きリストなど、2行目以降にインデント(字下げ)してみます。

CSSで2行目以降にインデント(字下げ)をする方法

デフォルトではインデント設定されているのですが、CSSリセットした場合や、何かしら設定を変えている場合は、ul , dl , olに対して、再設定しないといけません。
今回は、text-indentを使ったやり方を解説します。

目次

text-indentについて

CSSで「text-indent: 1em;」を設定すると、先頭にスペースができます。

indent_img01

インデント(字下げ)をやってみよう

はじめに

ベースのソースコードになります。


    <ul>
      <li>※The European languages are members of the same family. Their separate existence …</li>
      <li>※The European languages are members of the same family. Their separate existence …</li>
    </ul>

    
  • ※The European languages are members of the same family. Their separate existence …
  • ※The European languages are members of the same family. Their separate existence …

インデントしてみる

「li」に対して、「text-indent: -1em;」とマイナスを使うことで、1行目だけ左へ寄せます。
(※つまり、2行目以降がインデントされた状態になります。)

        <style>
          ul li {
            text-indent: -1em;
          }
        </style>
        
  • ※The European languages are members of the same family. Their separate existence …
  • ※The European languages are members of the same family. Their separate existence …

元の位置へ戻す(右へ寄せる)

左へ寄せるために負の値を使ってしまったので、グレーの枠(コンテンツ幅)よりはみ出ていますよね。
それを元に戻すために、「margin-left: 1em;」を指定し、indentした幅と同じ分だけ ulごとを右へ寄せます。

これで完成です!

        <style>
          ul{
            text-indent: -1em;
          }

          ul li{
            margin-left: 1em;
          }
        </style>
        
  • ※The European languages are members of the same family. Their separate existence …
  • ※The European languages are members of the same family. Their separate existence …

応用編

擬似要素を使うことで、リストマーカー(先頭についてる※などの部分)を一括で指定できます。

好きな記号や特別文字なども一括で設定できますので、ぜひ試してみてくださいね♪

        <ul>
          <li>The European languages are members of the same family. Their separate existence …</li>
          <li>The European languages are members of the same family. Their separate existence …</li>
        </ul>

        <style>
          ul {
            text-indent: -1em;
            margin-left: 1em;
          }

          ul li:before {
            content: "★";
          }
        </style>
        
  • The European languages are members of the same family. Their separate existence …
  • The European languages are members of the same family. Their separate existence …

まとめ

うまくできましたか?
text-indentの仕組みがわかれば、使える場面もたくさんありますのでぜひ使ってみてください(^^)


この記事を読んだ人はこんな記事も読んでいます