リストの装飾

リストの整形 ul / ol リストの整形 dl

リストの整形

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
ソースはここをクリック

<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
ソースはここをクリック

<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
ソースはここをクリック

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


ol.embellishedList-3 li::before {
	width: 3rem;
	font-size: 20px;
	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 . ";}
ol li:nth-child(4):before { content: "4 . ";}
ol li:nth-child(5):before { content: "5 . ";}
ol li:nth-child(6):before { content: "6 . ";}
ol li:nth-child(7):before { content: "7 . ";}

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: center;
	padding: 1rem 2rem;
	}

dl.embellishedList-5 dt {
	width: 9em;
	padding: 1rem;
	}
dl.embellishedList-5 dd {
	width: calc(100% - 9em);
	padding: 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