複数行になっても崩れないlistのCSSアレンジメモ

CSSでlistの冒頭の●をデザイン変更したい。そして当然(!)テキストが複数行になっても●の位置がズレたりしないでレスポンシブ対応しててほしい。
過去記事で近い内容がありますが、記事のフォーカスがちょっと違いますね。




今回の記事ではCSSでデザインアレンジをするlistを順序なしリストulにフォーカスして進めたいと思います。

デフォルトのul

まずはデフォルトのulです。
冒頭に黒い中黒点、改行があっても冒頭(行の左端)はきれいに揃っています。

<ul>
  <li>おかしなはがきが、ある土曜日の夕がた、一郎のうちにきました。</li>
  <li>かねた一郎さま 九月十九日</br>
  あなたは、ごきげんよろしいほで、けっこです。</br>
  あした、めんどなさいばんしますから、おいで</br>
  んなさい。とびどぐもたないでくなさい。</br>
  山ねこ 拝</li>
  <li>こんなのです。字はまるでへたで、墨もがさがさして指につくくらいでした。けれども一郎はうれしくてうれしくてたまりませんでした。はがきをそっと学校のかばんにしまって、うちじゅうとんだりはねたりしました。</li>
</ul>
Demo
  • おかしなはがきが、ある土曜日の夕がた、一郎のうちにきました。
  • かねた一郎さま 九月十九日
    あなたは、ごきげんよろしいほで、けっこです。
    あした、めんどなさいばんしますから、おいで
    んなさい。とびどぐもたないでくなさい。
    山ねこ 拝
  • こんなのです。字はまるでへたで、墨もがさがさして指につくくらいでした。けれども一郎はうれしくてうれしくてたまりませんでした。はがきをそっと学校のかばんにしまって、うちじゅうとんだりはねたりしました。

注意事項

上記のHTMLをベースにして、CSSでアレンジしていきます。
text-indentpaddingmarginpositionの位置指定など、状況によって調整が必要です。あらかじめご了承ください。

arrange01: 冒頭の丸を大きく

list冒頭の黒い中黒点を大きな丸にして色を付けて、もっと目立たせたい。
CSSでデザインアレンジするとき、一番オーソドオックスなアレンジですね。

擬似要素をwidth: 1em; height: 1em; border-radius: 50%;にすることで、文字サイズと同じ大きさの丸が描写されます。あまり丸が大きくても野暮ったいので、少し小さくしてみましょう。

HTMLはulに付加したclass以外、前述と同様です。

ul.arrange-list-01 {
  list-style-type: none;
  padding-left: 0;
}
ul.arrange-list-01 li {
  padding-left: 1.5em;
  text-indent: -1.5em;
  margin-bottom: 10px;
}
ul.arrange-list-01 li:before {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  background: #EECE34;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.5em;
}
Demo
  • おかしなはがきが、ある土曜日の夕がた、一郎のうちにきました。
  • かねた一郎さま 九月十九日
    あなたは、ごきげんよろしいほで、けっこです。
    あした、めんどなさいばんしますから、おいで
    んなさい。とびどぐもたないでくなさい。
    山ねこ 拝
  • こんなのです。字はまるでへたで、墨もがさがさして指につくくらいでした。けれども一郎はうれしくてうれしくてたまりませんでした。はがきをそっと学校のかばんにしまって、うちじゅうとんだりはねたりしました。

arrange02: 冒頭の印を三角に

せっかくなんでCSSで三角を作ってみましょう。ジェネレーターを活用すると時短できます。
Triangle generator

ここではpositionを使って擬似要素の位置調整をしました。

ul.arrange-list-02 {
  list-style-type: none;
  padding-left: 0;
}
ul.arrange-list-02 li {
  position: relative;
  padding-left: 1em;
  margin-bottom: 10px;
}
ul.arrange-list-02 li:before {
  position: absolute;
  top: 0.6em; /* 要素によって要調整 */
  left: 0;
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #EECE34;
}
Demo
  • おかしなはがきが、ある土曜日の夕がた、一郎のうちにきました。
  • かねた一郎さま 九月十九日
    あなたは、ごきげんよろしいほで、けっこです。
    あした、めんどなさいばんしますから、おいで
    んなさい。とびどぐもたないでくなさい。
    山ねこ 拝
  • こんなのです。字はまるでへたで、墨もがさがさして指につくくらいでした。けれども一郎はうれしくてうれしくてたまりませんでした。はがきをそっと学校のかばんにしまって、うちじゅうとんだりはねたりしました。

arrange03: 冒頭の印をborderっぽく

よくある見出しデザインのような感じを目指します。

ul.arrange-list-03 {
  list-style-type: none;
  padding-left: 0;
}
ul.arrange-list-03 li {
  position: relative;
  padding-left: 0.7em;
  margin-bottom: 10px;
}
ul.arrange-list-03 li:before {
  position: absolute;
  top: 0.325em; /* 要素によって要調整 */
  left: 0;
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.3em;
  background: #EECE34;
}
Demo
  • おかしなはがきが、ある土曜日の夕がた、一郎のうちにきました。
  • かねた一郎さま 九月十九日
    あなたは、ごきげんよろしいほで、けっこです。
    あした、めんどなさいばんしますから、おいで
    んなさい。とびどぐもたないでくなさい。
    山ねこ 拝
  • こんなのです。字はまるでへたで、墨もがさがさして指につくくらいでした。けれども一郎はうれしくてうれしくてたまりませんでした。はがきをそっと学校のかばんにしまって、うちじゅうとんだりはねたりしました。

arrange04: 冒頭の印をFont awesomeのアイコンで

ここではFont awesome4で実装します。Font awesome5だと記述の仕方が変わるので、詳しくは下記記事をご覧ください。

ul.arrange-list-04 {
  list-style-type: none;
  padding-left: 0;
}
ul.arrange-list-04 li {
  padding-left: 1.5em;
  text-indent: -1.5em;
  margin-bottom: 10px;
}
ul.arrange-list-04 li:before {
  content: "\f046";
  color: #877666;
  font-family: FontAwesome;
  margin-right: 0.55em;
}
Demo
  • おかしなはがきが、ある土曜日の夕がた、一郎のうちにきました。
  • かねた一郎さま 九月十九日
    あなたは、ごきげんよろしいほで、けっこです。
    あした、めんどなさいばんしますから、おいで
    んなさい。とびどぐもたないでくなさい。
    山ねこ 拝
  • こんなのです。字はまるでへたで、墨もがさがさして指につくくらいでした。けれども一郎はうれしくてうれしくてたまりませんでした。はがきをそっと学校のかばんにしまって、うちじゅうとんだりはねたりしました。

arrange05: 冒頭の印を画像で

ul.arrange-list-05 { 
  list-style-type: none;
  padding-left: 0;
}
ul.arrange-list-05 li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 10px;
}
ul.arrange-list-05 li:before {
  position: absolute;
  top: 8px;
  left: 0;
  content: '';
  background-image: url("/images/icon-slick-next-brown.svg");
  background-size: cover;
  width: 1em;
  height: 1em;
}
Demo
  • おかしなはがきが、ある土曜日の夕がた、一郎のうちにきました。
  • かねた一郎さま 九月十九日
    あなたは、ごきげんよろしいほで、けっこです。
    あした、めんどなさいばんしますから、おいで
    んなさい。とびどぐもたないでくなさい。
    山ねこ 拝
  • こんなのです。字はまるでへたで、墨もがさがさして指につくくらいでした。けれども一郎はうれしくてうれしくてたまりませんでした。はがきをそっと学校のかばんにしまって、うちじゅうとんだりはねたりしました。

arrange06: 冒頭の印をolだけど連番で

今ちょっと具体的な状況をあげられませんが、そんな実装をしたいときってありますよね。
下記記事を参考に、counter-incrementcontent:counter();を使って「01」「02」……と連番リストにしてみます。

ul.arrange-list-06 { 
  list-style-type: none;
  padding-left: 0;
}
ul.arrange-list-06 li {
  counter-increment: count-list06;
  position: relative;
  padding-left: 2.2em;
  margin-bottom: 10px;
}
ul.arrange-list-06 li::before {
  position: absolute;
  top: 5px;
  left: 0;
  content: "0"counter(count-list06);
  display: inline-block;
  color: #EECE34;
  font-size: 1.25em;
  font-weight: bold;
  line-height: 1;
}
Demo
  • おかしなはがきが、ある土曜日の夕がた、一郎のうちにきました。
  • かねた一郎さま 九月十九日
    あなたは、ごきげんよろしいほで、けっこです。
    あした、めんどなさいばんしますから、おいで
    んなさい。とびどぐもたないでくなさい。
    山ねこ 拝
  • こんなのです。字はまるでへたで、墨もがさがさして指につくくらいでした。けれども一郎はうれしくてうれしくてたまりませんでした。はがきをそっと学校のかばんにしまって、うちじゅうとんだりはねたりしました。

だいぶCSSがあやしくなってしまいましたが、アレンジ&調整前提のメモとして。

back to top