single.php

list-style-position: inside;

投稿日: 2025年6月20日

更新日: 2025年6月21日

カテゴリー:CSS

タグ: FAQ li デザイン初心者

目次

HTMLのliタグを使用するとデフォルトの状態ではliの「・」が左側に出てしまいます。list-style-position: outside;がデフォルトで適応されているからです。list-style-position: inside;を指定すると他の要素と揃えることができます。

こちらは「技術スタック」ページのコードです。

page-developer.php

   <h3>開発言語</h3>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>PHP</li>
      <li>Git</li>
    </ul>

page.css

ul {
  list-style: square;
  list-style-position: inside;
  margin-bottom: 10px;
}