【CSS】リストの改行位置を揃える(リセットCSSを使用している場合)

きのこさん
リセットCSSを使うとリストがなんか変になるのですがー
きのこさん
簡単にスタイルを整えてあげましょうー

ulの場合

簡単に。

See the Pen
【CSS】リストの改行位置を揃える(リセットCSSの場合)、ulの場合
by 125naroom (@125naroom)
on CodePen.

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の場合

簡単に。

See the Pen
【CSS】リストの改行位置を揃える(リセットCSSの場合)、olの場合
by 125naroom (@125naroom)
on CodePen.

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;
}

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

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

See the Pen
【CSS】リストの改行位置を揃える(リセットCSSの場合)、見やすくカスタマイズしてみる
by 125naroom (@125naroom)
on CodePen.

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
}

さいごに

きのこさん
あ、できましたー
きのこさん
シンプルイズベストですねー
デザインのこと - Web design gallery
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

アンカー市川|みんなで作る自分の居場所
アンカー市川|みんなで作る自分の居場所
あったらいいなと思うもの/窓の家と生活
『未来のミライ』、何度も見てしまう