【CSS】ul、olの改行位置を揃える(リセットCSSを使用している場合)
- 2021.1.5
- 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 / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.10.02New
- Aubloom オーブルーム – RAWSILK SHAMPOO ローシルクシャンプー
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.07.31
- 【Google Chrome】ショートカットキーまとめ(Windows or Mac)
- クロームでF5(更新)ってどうするんでしたっけ? あー、Macですか?わかるわかる、な…
- 125naroom / デザインするところ(会社)です。