こんにちは。

もうすぐ梅雨もあけそうですね＾＾

コロナが流行り出してから自転車で通勤しているのですが、真夏が近づくにつれて朝の日差しがきついです・・・(^^;

これからもっと暑くなるんでしょうね(　ﾟдﾟ)

さて、そろそろ本題に入ります！！

インデントについての最新記事です↓（2022年6月追記）

文章の2行目以降を字下げする方法

よく、リストやキャプションなどの文章でこのような形を見かけるのではないでしょうか？

これはCSSでそうなるように記述しないとならなくて、普通に書いただけでは改行されたとき2行目以降に入りこんでしまい、少し見辛いですよね(^^;

インデントを入れるCSSでの記述方法

ではさっそくCSSでどう書くかみていきましょう！

考え方としては、左余白(padding)を1文字分あけて字下げするプロパティを書きます。

そして、そのプロパティとは、「text-indent」です！

実際にコーディングしてみます＾＾

HTMLは「ここにはキャプションが入ります。」という文章をコピペしており、「txt」というクラスをふっています。

    <div id="Contents">
      <div class="inner">

        <p class="txt">※ここにはキャプションが入ります。ここにはキャプションが入ります。ここにはキャプションが入ります。ここにはキャプションが入ります。</p>

      </div>
      <!-- / .inner -->
    </div>
    <!-- / #Contents -->

【text-indent】プロパティを使ってみよう！

では、【text-indent】プロパティを適用させてみましょう！

値は1emとします。

(1emとは1文字分ということです。)

.txt {
  margin: 100px; /*見やすいように*/
  width: 300px; /*見やすいように*/
  background-color: #eee; /*見やすいように*/

  text-indent: 1em;
}

すると、行頭が1文字分あきました＾＾

どうやらこの逆のことをすれば、うまくいきそうな気がします・・・！

【text-indent】の値を「ー1em」にしてみよう！

ということで【text-indent】の値を

「ー1em」にしてみましょう！

すると、形的にはうまくいっていますが、行頭の1文字が領域外に出てしまっています(＞＜)

これでは扱いづらいですね。

さらにpadding-leftをつけてみよう！

そこでpadding-leftの登場です！！

1文字分左側に余白をあけます。

.txt {
  margin: 100px; /*見やすいように*/
  width: 300px; /*見やすいように*/
  background-color: #eee; /*見やすいように*/

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

すると、ちゃんとおさまりました♩

まとめ

字下げすることによって読みやすさが変わりますね！

• padding-left: 1em;
• text-indent: -1em;

この2つを組み合わせることで形作ることができます＾＾

長いキャプションなどにぜひ使おうと思います！

では今日はここまで〜〜