HTMLの<li>タグの点をずらしてみる - ばろぐ・ほいダウン

行きに雨が降っていたのに、帰りに止んでいると使い道のない傘が手元に残って煩わしいな。
どうも筆者です。

さて、煩わしいと言えばWEBページを作っている時の< li >タグ（Markdown方式の都合上半角スペースを入れてあります）の点だと思います。

何もせずにただ書くとこうなります。

（画像は現在編集中の四葉鉄道ホームページより）

点だけはみ出しているように見えますね。
気にしなければ良いと言われればそれまでですが、できれば整えたいところ。

今回はそこを改善するやり方を書いていこうと思います。

とりあえずのファイル名としてlist.htmlとしておきます。

<ul>
 <li>点を</li>
 <li>ずらし</li>
 <li>たい！</li>
</ul>

このままだと先ほどの画像のようになると思います。

list.htmlに対応させるCSSファイルを作りましょう。
最初のうちはファイル名はlist.cssのようにしてhtmlファイルとの関連がわかりやすいようにすると良いと思います。 CSSは以下のように記述します。

html {
  font-size: 16px;
}

ul li {
  margin-left: 1em;
  text-indent: -0.5em;
}

すると

このように内側にずらすことができました。

まず

html {
  font-size: 16px;
}

ここでフォントサイズを決めます。

次にremを用いて何文字分ずらすのかを決めます。

margin-left: 1em;

ここでリストの左に1文字分領域をずらすことができました。ここで終わっても良いのですが、せっかくなのテキストを点に寄せてみましょう。

text-indent: -0.5em;

これでテキストを0.5文字分右にずらすことができました。 margin-leftとtext-indentの数字を変えるとずれた後の位置も変わってくるので、どのように動くか試してみてください。

先ほど用いたemに似たものにremというものがあります。
emは親要素のフォントサイズを基準に、remはhtml 要素のフォントサイズを基準に考えます。

HTMLではこのように記述

 <main>
    <h1>レッスン</h1>
    <h2>テスト</h2>
 </main>

CSSはこのように記述

html {
  font-size: 16px;
}
 
main {
  font-size: 10px;
}
 
h1 {
   font-size: 2rem;
}

h2 {
  font-size: 2em;
}

この場合h1はhtml要素を基準にするremを用いているため、フォントサイズは32pxになります。
h2は親要素のmainを基準にするemを用いているため、フォントサイズは20pxになります。

思い通りにリストはずらせたでしょうか。
後半で触れたようにフォントサイズに関する指定はいくつかの方法があるため、最初は複雑に感じてしまうかもしれません。
しかし、ページのレイアウトを考えるときに重要になってくるはずです。
上手に活用できるように一緒に頑張りましょう。