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

Update:

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

cssでlistのナンバリングはカスタマイズできる!
前口上太郎くんはNPO団体のWEBサイトを作成しています。定款に長い長い原稿を貰いました。ただの数字ではなく「第○章」や「（○）」のリストだったので、list-style:none;で通常のナンバリングを消しテキストの形で全て流し込みました。後日修正指示が入り、一項目削除されたり追加されたりしました。修正箇所は一箇所でも、連なる他の番号もそれに合わせて変更しなければなりません。地味だけどミスが発生しやすい嫌〜な作業です。太郎くんが余計にかけてしまった工数は何hでしょう？counter-incrementとcontent:counter();を使えば、...

aタグを親要素のサイズに合わせるやり方と、aタグをbutton状にする調整法まとめ
初歩的なことなのですが毎回忘れてググるので、ちゃんとメモとしてアウトプットします。aタグについておさらいaタグはデフォルトの状態ではinline要素であるHTML5からはaタグでdivやpといったblock要素を囲んでもOK（※）XHTML時代にaタグでdivを囲んで、温厚なコーダーチームのリーダーを「囲むなって言いましたよね！！😡 」とキレさせてしまったのも遠い昔、もう囲んでも怒られないんですね。ちなみに、aタグでaタグを囲む（入れ子）、aタグでformを囲むのはNGです。aタグでdivやpなどブロック要素を囲む場合は、aタグをinline要素の...

注意書きなどで使うぶら下がりインデント、CSSでの実装方法まとめ
たとえば※注意事項ダミーテキスト注意事項ダミーテキスト注意事項ダミーテキスト注意事項ダミーテキスト注意事項ダミーテキストQ: 質問事項ダミーテキスト質問事項ダミーテキスト質問事項ダミーテキスト質問事項ダミーテキスト質問事項ダミーテキストなど、テキストをそのまま流し込んで実装すると（例えデザインの通りだとしても!）、チェックバック時に「頭揃えて」と修正指示をされ『やっぱりか…』となりがちな、ぶら下がりインデント。2行目以降の頭揃えの実装方法ですが、複数あるので（ケースバイケースでもあるんですが）メモと...

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

デフォルトのul

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

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

注意事項

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

arrange01: 冒頭の丸を大きく

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

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

HTMLはulに付加したclass以外、前述と同様です。
liにpadding-left、text-indent、li:beforeに新しいマーカーとなる擬似要素のサイズとmargin-rightで頭揃えの調整をします。

ul.arrange-list-01 {
  list-style-type: none;
  padding-left: 0;
}
ul.arrange-list-01 li {
  padding-left: 1.3em;
  text-indent: -1.3em;
  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を使って擬似要素の位置調整をしました。
text-indent等の調整をする必要がないので、こちらのやり方の方が個人的に好きですね。

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

上記の例はリストが複数行になっても冒頭1文字にのみborderが付く仕様ですが、場合によってはリストの高さ100%で実装することもあるかもしれません。

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

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

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

Font Awesomeの使い方② | Font Awesome v5をWEBフォントとして使用する
第二回目はFont Awesome v5の使い方です。使い方が増えたらしいけど、この記事はWEBフォントでの使用に限定にします。v4から使い方が変わって戸惑った人も多いのでは。追記2022.10.05: v6も公開されたことでサイトの使い勝手が変わっていたので、記事も修正しました。Font Awesome v5をWEBフォントとして使用するCDNを入手するv4まではWEBフォントとして使用するのが基本的でしたが、v5以降は複数の使い方ができるようになり、またアカウント登録が必要になります。個人使用では無料プランで十分だと思います。フォームからメールアド...

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-incrementとcontent:counter();を使って「01」「02」……と連番リストにしてみます。

cssでlistのナンバリングはカスタマイズできる!
前口上太郎くんはNPO団体のWEBサイトを作成しています。定款に長い長い原稿を貰いました。ただの数字ではなく「第○章」や「（○）」のリストだったので、list-style:none;で通常のナンバリングを消しテキストの形で全て流し込みました。後日修正指示が入り、一項目削除されたり追加されたりしました。修正箇所は一箇所でも、連なる他の番号もそれに合わせて変更しなければなりません。地味だけどミスが発生しやすい嫌〜な作業です。太郎くんが余計にかけてしまった工数は何hでしょう？counter-incrementとcontent:counter();を使えば、...

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があやしくなってしまいましたが、アレンジ&調整前提のメモとして。

関連記事: