• Facebook
  • Twitter
  • RSS

月別

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

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

投稿者アイコン

2018/07/02

書いた人:
rurippa!
カテゴリ:
ネタ
309 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行目以降がインデントされた状態になります。)


    <!-- CSS -->
    ul li {
      text-indent: -1em;
    }
    
  • ※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ごとを右へ寄せます。

これで完成です!


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

    ul li{
      margin-left: 1em;
    }

    
  • ※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>

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

    ul li:before {
      content: "★";
    }

    
  • 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の仕組みがわかれば、使える場面もたくさんありますのでぜひ使ってみてください(^^)


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

<