リストの装飾

リストの整形

LIST 0 : UL , OL

li のリストマークの色を変える

  • Lorem ipsum dolor sit amet
  • Fuga reprehenderit
  • Excepteur sint occaecat cupidatat
    Excepteur sint occaecat cupidatat
  1. Lorem ipsum dolor sit amet
  2. Fuga reprehenderit
  3. Excepteur sint occaecat cupidatat
    Excepteur sint occaecat cupidatat
ソースはここをクリック

<ul class="colorList">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Fuga reprehenderit </li>
	<li>Excepteur sint occaecat cupidatat<br>Excepteur sint occaecat cupidatat</li>
</ul>

<ol class="colorList2">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Fuga reprehenderit </li>
	<li>Excepteur sint occaecat cupidatat<br>Excepteur sint occaecat cupidatat</li>
</ol>


ul.colorList li {
	list-style-type: square;
	margin-left: 2rem;
	}
.colorList li::marker {
	color: red;
	}

ol.colorList2 {
	list-style: none;
	counter-reset: ol_li;
	padding-left: 2rem;
	}
ol.colorList2 li {
	margin-left: 1em;
	text-indent: -1em;
	}
ol.colorList2 li:before {
	counter-increment: ol_li;
	content: counter(ol_li)".";
	color: red;
	font-weight: bold;
	}

CLOSE

LIST 1 : UL

li に直接 web icon を記述

  • filter_vintage Lorem ipsum dolor sit amet
  • spa Fuga reprehenderit
  • flutter_dash Excepteur sint occaecat cupidatat
    Excepteur sint occaecat cupidatat
ソースはここをクリック

<head> <!-- Google Material Symbols -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>

<ul class="embellishedList-1">
	<li><span class="material-symbols-outlined">filter_vintage</span> Lorem ipsum dolor sit amet</li>
	<li><span class="material-symbols-outlined">spa</span> Fuga reprehenderit </li>
	<li><span class="material-symbols-outlined">flutter_dash</span> Excepteur sint ・・・<br>Excepteur sint ・・・</li>
</ul>


ul.embellishedList-1 li {
	list-style-type: none;
	padding: 1rem 0;
	display: flex;
	align-items: center;
	border-bottom: dotted 1px #999;
	}
ul.embellishedList-1 li:last-child {
	border: none;
	}
ul.embellishedList-1 span.material-symbols-outlined {
	width: 4rem;
	font-size: 35px;
	}

CLOSE

LIST 2 : UL

疑似要素 li::before で List Markにアイコンを表示

  • Lorem ipsum dolor sit amet
  • Fuga reprehenderit
  • Excepteur sint occaecat cupidatat
    Excepteur sint occaecat cupidatat
ソースはここをクリック

<head> <!-- Google Material Symbols -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>

<ul class="embellishedList-2">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Fuga reprehenderit </li>
	<li>Excepteur sint occaecat cupidatat<br>Excepteur sint occaecat cupidatat</li>
</ul>


ul.embellishedList-2 li {
	list-style-type: none;
	padding: 1rem 0;
	display: flex;
	align-items: center;
	border-bottom: dotted 1px #999;
	}
ul.embellishedList-2 li:last-child {
	border: none;
	}
ul.embellishedList-2 li::before {
	font-family: "Material Symbols Outlined";
	content: "\e110";
	font-size: 35px;
	font-weight: 300;
	}
ul.embellishedList-2 li:nth-child(1)::before { color: orange;}
ul.embellishedList-2 li:nth-child(2)::before { color: green;}
ul.embellishedList-2 li:nth-child(3)::before { color: red;}

CLOSE

LIST 3 : OL

リストマークがカラーの番号付きリスト

  1. Lorem ipsum dolor sit amet
  2. Fuga reprehenderit
  3. Excepteur sint occaecat cupidatat
    Excepteur sint occaecat cupidatat
ソースはここをクリック

<ol class="embellishedList-3">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Fuga reprehenderit </li>
	<li>Excepteur sint occaecat cupidatat<br>Excepteur sint occaecat cupidatat</li>
</ol>


ol.embellishedList-3 li {
	position: relative;
	padding: 1rem 0;
	padding-left: 3.5rem;
	list-style: none inside;;
	display: flex;
	align-items: center;
	border-bottom: dotted 1px #999;
	}
ol.embellishedList-3 li::before {
	position: absolute;
	top: .4rem;
	left: .8rem;
	width: 3rem;
	font-size: 2rem;
	font-weight: bold;
	color: #9d50bb;
	}
ol li:nth-child(1):before { content: "1.";}
ol li:nth-child(2):before { content: "2.";}
ol li:nth-child(3):before { content: "3.";}

CLOSE

LIST 4 : DL

定義リストで下線を通す場合は position: absolute; で dt を浮かせる

Lorem ipsum
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Fuga reprehe
Fuga reprehenderit Fuga reprehenderit Fuga reprehenderit
Excepteur sint
Excepteur sint occaecat cupidatat
Excepteur sint occaecat cupidatat
ソースはここをクリック

<dl class="embellishedList-4">
	<dt>Lorem ipsum</dt> <dd>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</dd>
	<dt>Fuga reprehe</dt> <dd>Fuga reprehenderit Fuga reprehenderit Fuga reprehenderit </dd>
	<dt>Excepteur sint</dt> <dd>Excepteur sint occaecat cupidatat<br> Excepteur sint occaecat cupidatat</dd>
</dl>


dl.embellishedList-4 {
	width: 100%;
	position: relative;
	padding: 1rem 2rem;
	}
dl.embellishedList-4 dt {
	width: 9em;
	padding: 1.4rem 1rem;
	position: absolute;
	left: 2rem;
	line-height: 1.1;
	}
dl.embellishedList-4 dd {
	padding: 1rem;
	padding-left: 11em;
	border-bottom: dotted 1px #999;
	}
	dl.embellishedList-4 dd:last-child {
		border: none;
		}

@media screen and (max-width: 767.9px) {
	dl.embellishedList-4 dt {
		width: auto;
		padding-bottom: 0;
		}

	dl.embellishedList-4 dd {
		padding: 4rem 1rem 1rem;
		}
	}

CLOSE

LIST 5 : DL

定義リストで下線が不要であれば display: flex; が簡単。

Lorem ipsum
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Fuga reprehe
Fuga reprehenderit Fuga reprehenderit Fuga reprehenderit
Excepteur sint
Excepteur sint occaecat cupidatat
Excepteur sint occaecat cupidatat
ソースはここをクリック

<dl class="embellishedList-5">
	<dt>Lorem ipsum</dt> <dd>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</dd>
	<dt>Fuga reprehe</dt> <dd>Fuga reprehenderit Fuga reprehenderit Fuga reprehenderit </dd>
	<dt>Excepteur sint</dt> <dd>Excepteur sint occaecat cupidatat<br> Excepteur sint occaecat cupidatat</dd>
</dl>


dl.embellishedList-5 {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	padding: 1rem 2rem;
	}
dl.embellishedList-5 dt {
	width: 9em;
	padding: 1rem 1rem .5rem;
	line-height: 1.1;
	}
dl.embellishedList-5 dd {
	width: calc(100% - 9em);
	padding: .5rem 1rem;
	}
@media screen and (max-width: 767.9px) {
	dl.embellishedList-5 {
		display: block;
		}
	dl.embellishedList-5 dt {
		width: auto;
		padding-bottom: 0;
		}
	dl.embellishedList-5 dd {
		width: 100%;
		}
	}

CLOSE


TOP