![ニャンコ](https://web-create-kokusyo.com/wp-content/uploads/2023/02/11111-300x212.png)
ニャンコ
2行目以降を字下げする方法が分からないよ~
2行目以降を字下げすることで、文章が読みやすくなるよ
特にスマホ画面なんかは、可読性が読みやすくなるからやり方を覚えようね。
![ワンコ](https://web-create-kokusyo.com/wp-content/uploads/2023/12/1496195-300x225.png)
ワンコ
インデントってどういう時に使うの?
インデントがどういう時に必要なのかですが、下記の画像をご覧ください。
![htmlで字下げを行うサンプル](https://web-create-kokusyo.com/wp-content/uploads/2022/12/Web-キャプチャ_24-12-2022_233634_content.local_.jpeg)
ソースはこんな感じです。
連番については、CSSカウンターを使用していますが、今回はインデントについてなので割愛します。
<ul class="kome-list">
<li>htmlを勉強して案件を獲得しよう</li>
<li>Wordpressって奥が深いよね。まだまだ覚えることがたくさんあります。</li>
<li>デザインも覚えたいですよね。デザインってどうやって勉強すればいいんでしょうね</li>
<li>vue.jsって覚えたら面白いですね。コンポーネント化して遊んでます。</li>
</ul>
<ul class="num-list">
<li>htmlを勉強して案件を獲得しよう</li>
<li>Wordpressって奥が深いよね。まだまだ覚えることがたくさんあります。</li>
<li>デザインも覚えたいですよね。デザインってどうやって勉強すればいいんでしょうね</li>
<li>vue.jsって覚えたら面白いですね。コンポーネント化して遊んでます。</li>
</ul>
.kome-list li {
font-size: 15px;
}
.kome-list li::before {
content: "※";
}
こういう時見づらくなるよね
こういった※印を使った注意書きや、連番を使用したリストなど、コーディングを行っているときによく見ると思います。
これで何が問題なの? と思われるかもしれませんが、↓の画像をご覧ください。
![htmlで字下げを行うサンプルスマホ版](https://web-create-kokusyo.com/wp-content/uploads/2022/12/Web-キャプチャ_24-12-2022_23504_content.local_.jpeg)
これは先ほどの画面をスマホサイズにしたものです。
画面が狭くなって、テキストが折り返してるよ。
それによって、※印や数字の下にテキストが来て読みづらいよ。
![ワンコ](https://web-create-kokusyo.com/wp-content/uploads/2023/12/1496195-300x225.png)
ワンコ
「text-indent」プロパティで字下げを行う
「text-indent」プロパティは字下げを行うプロパティです。
マイナスの値も設定でき、字上げも行えます。
では、早速設定してみましょう。
text-indent: -1em; //1文字分字下げ
padding-left: 1em; //字下げした分スペースを入れる
![](https://web-create-kokusyo.com/wp-content/uploads/2022/12/Mask-group-1.png)
![](https://web-create-kokusyo.com/wp-content/uploads/2022/12/Web-キャプチャ_25-12-2022_0129_content.local_.jpeg)
きれいに2行目以降がインデントされたことで、それぞれの項目が見やすくなりましたね。
様々なところで使えて、しかも簡単に設定できるので、コーディングする際は、積極的に使用していきたいですね。