【CSS】ul、olの改行位置を揃える（リセットCSSを使用している場合）

リセットCSSを使うとリストがなんか変になるのですがー

簡単にスタイルを整えてあげましょうー

ulの場合

簡単に。

HTMLとCSSはこちら

HTML

<ul>
  <li>赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。青というよりも優しいブルー。男の口調は柔らかい、女は小さく笑う。少し雨が降ってきた。近くのスーパーで雨宿りをすることにした。飴でも買おうかと男が言った。女は「うん」と言った。
    <ul>
      <li>赤い服を着てる人
        <ul>
          <li>人見知りである。</li>
          <li>色白である。</li>
          <li>何かを探している。</li>
        </ul></li>
      <li>青い服を着てる人
        <ul>
          <li>パーマではなく天然パーマである。</li>
          <li>口調は柔らかい。</li>
          <li>昨日は豆腐を食べた。</li>
        </ul></li>
</ul></li>
  <li>明日は図書館に行こうと決めていた。あ、月曜日は休館日だったっけ。インターネットで調べてみた。「第2・4月曜日は開館」、よしよし、と思った。ひさしぶりの自転車は少し埃がかぶっていた。館内をぐるぐるまわり5冊の本を借りると外は雨が降っていた。帰ることにした僕たちは、よしよし、と思った。</li>
  <li>部屋の居心地が良過ぎる今冬、レスポンシブにした。いろいろ良いなと思うけど改行が難しいよねって思う。ということで改行を控えめにしようと思う。デザインは少しポップにしようと始めたけどどんどんシンプルになっていく。で結局白黒グレーな空間になる。いろんなサイズでの確認、タブレットそろそろ買おうかな。普通。普通って何？最近の口癖。レスポンシブな日常。</li>
  <li>引越してきて1年が経った。ペンキ塗りから始めたから次の月まで住める状態じゃなかった。雪が結構降った。あー、引っ越すんじゃなかったなって思った。屋上に行ってみた。寒かったけど寝転がった。来年のことを思った。雪が降った翌日は空が綺麗だった。カメラを買おうと思った。</li>
</ul>

CSS

ul {
  padding-left: 1.5em;
}
ul li {
  list-style: disc;
}

olの場合

簡単に。

HTMLとCSSはこちら

HTML

<ol>
  <li>赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。青というよりも優しいブルー。男の口調は柔らかい、女は小さく笑う。少し雨が降ってきた。近くのスーパーで雨宿りをすることにした。飴でも買おうかと男が言った。女は「うん」と言った。
    <ol>
      <li>赤い服を着てる人
        <ol>
          <li>人見知りである。</li>
          <li>色白である。</li>
          <li>何かを探している。</li>
        </ol></li>
      <li>青い服を着てる人
        <ol>
          <li>パーマではなく天然パーマである。</li>
          <li>口調は柔らかい。</li>
          <li>昨日は豆腐を食べた。</li>
        </ol></li>
    </ol></li>
  <li>明日は図書館に行こうと決めていた。あ、月曜日は休館日だったっけ。インターネットで調べてみた。「第2・4月曜日は開館」、よしよし、と思った。ひさしぶりの自転車は少し埃がかぶっていた。館内をぐるぐるまわり5冊の本を借りると外は雨が降っていた。帰ることにした僕たちは、よしよし、と思った。</li>
  <li>部屋の居心地が良過ぎる今冬、レスポンシブにした。いろいろ良いなと思うけど改行が難しいよねって思う。ということで改行を控えめにしようと思う。デザインは少しポップにしようと始めたけどどんどんシンプルになっていく。で結局白黒グレーな空間になる。いろんなサイズでの確認、タブレットそろそろ買おうかな。普通。普通って何？最近の口癖。レスポンシブな日常。</li>
  <li>引越してきて1年が経った。ペンキ塗りから始めたから次の月まで住める状態じゃなかった。雪が結構降った。あー、引っ越すんじゃなかったなって思った。屋上に行ってみた。寒かったけど寝転がった。来年のことを思った。雪が降った翌日は空が綺麗だった。カメラを買おうと思った。</li>
</ol>

CSS

ol {
  padding-left: 1.5em;
}
ol li {
  list-style: decimal;
}

見やすくカスタマイズしてみる

余白をしっかりつけてみました。

HTMLとCSSはこちら

HTML

<ol>
  <li>赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。青というよりも優しいブルー。男の口調は柔らかい、女は小さく笑う。少し雨が降ってきた。近くのスーパーで雨宿りをすることにした。飴でも買おうかと男が言った。女は「うん」と言った。
    <ul>
      <li>赤い服を着てる人
        <ul>
          <li>人見知りである。</li>
          <li>色白である。</li>
          <li>何かを探している。</li>
        </ul></li>
      <li>青い服を着てる人
        <ul>
          <li>パーマではなく天然パーマである。</li>
          <li>口調は柔らかい。</li>
          <li>昨日は豆腐を食べた。</li>
        </ul></li>
    </ul></li>
  <li>明日は図書館に行こうと決めていた。あ、月曜日は休館日だったっけ。インターネットで調べてみた。「第2・4月曜日は開館」、よしよし、と思った。ひさしぶりの自転車は少し埃がかぶっていた。館内をぐるぐるまわり5冊の本を借りると外は雨が降っていた。帰ることにした僕たちは、よしよし、と思った。</li>
  <li>部屋の居心地が良過ぎる今冬、レスポンシブにした。いろいろ良いなと思うけど改行が難しいよねって思う。ということで改行を控えめにしようと思う。デザインは少しポップにしようと始めたけどどんどんシンプルになっていく。で結局白黒グレーな空間になる。いろんなサイズでの確認、タブレットそろそろ買おうかな。普通。普通って何？最近の口癖。レスポンシブな日常。</li>
  <li>引越してきて1年が経った。ペンキ塗りから始めたから次の月まで住める状態じゃなかった。雪が結構降った。あー、引っ越すんじゃなかったなって思った。屋上に行ってみた。寒かったけど寝転がった。来年のことを思った。雪が降った翌日は空が綺麗だった。カメラを買おうと思った。</li>
</ol>

CSS

ol, ul {
  padding-left: 1.5em;
  margin: 1.0em 0;
}
ol li {
  list-style: decimal;
  margin-bottom: 1.0em;
}
ol li:last-child, ul li:last-child {
  margin-bottom: 0;
}
ul li {
  list-style: disc;
  margin-bottom: 1.0em;
}
ul ul li {
  list-style: circle;
}

今回使ったリセットCSSは、

こちらのリセットCSSです。

https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css

リセットCSSを整形すると

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}
body {
    line-height: 1
}
ol, ul {
    list-style: none
}
blockquote, q {
    quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none
}
table {
    border-collapse: collapse;
    border-spacing: 0
}