字下げリストの作り方(html,css)

今回は、
字下げリストの作り方
をご紹介します。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

リスト作成

完成予想とhtml、css

完成予想

字下げ画像06

html

字下げ画像07

css

字下げ画像08
<html>

<ul>
<li class="indent-box01">
<h2>①CSSとはなにか?</h2>
<ul class="indent02">
<li class="indent03">
・実はcss とはCSSによって<br>
行われるCSSである<br>
とも言える<br>
</li>
</ul>

</li>
<li class="indent-box01">
<h2>②CSSとは本当に何か?</h2>
<ul class="indent02">
<li class="indent03">
・CSSとは本当に<br>
cssでできており、<br>
css以外の何者でもありません
<br>
</li>
</ul>
</li>
</ul>
<css>

.indent-box01 {
display: block;
width: 20%;
padding: 5px;
margin: 5px;
border: solid 1px black;
}

.indent02 {
font-size: 16px;
padding-left: 1em;
}

.indent03 {
padding-left: 1em;
text-indent: -1em;
}

左1文字分スペース

文章のところを見てください。

このままでは、
左に詰まっていて
読みにくいですね。

なので、
左側を一文字分空けます。

字下げ画像17
字下げ画像18
<css>

.indent02 {
font-size: 16px;
padding-left: 1em;
}

ここから、文章がずっと続いたとしても、
段差ができて
読みやすくなります。

次に、
文章に2行目以降字下げを入れて行きます。

字下げ画像10
<css>

.indent03 {
padding-left: 1em;
text-indent: -1em;
}

これで字下げは完成です。

そして、
この字下げが入っていると、
行数が増えても
形はくずれません。

字下げ画像11

まとめ

padding-left: 1em;

text-indent: -1em;
を上手く使ってリストを完成させよう。

以上、
字下げリストの作り方(html,css)
の話でした。

ありがとうございました。

タイトルとURLをコピーしました