コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれに

コピペで使えるul/ol/liのデザイン

今回はul/ol/liを使った箇条書き(リスト)のデザイン例を紹介します。どれも画像は必要なく、CSSだけで作ることができます。メニューリストとして使っても、記事内でポイントをまとめるときに使っても良いでしょう。それぞれCSSコードを載せていますので、コピペしてご自由にお使いください。

予備知識

コピペしたデザインがうまく反映されないときはこちら↓

1. シンプルなリストデザイン

まずは単純な例から紹介していきます。ほとんどがulとliolとliのどちらでも使うことができます。

HTMLコード例

この記事で紹介するリスト例はどれも以下のコードを使っています(番号付きの場合はulをそのままolに置き換えます)。

HTML
<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>Photoshop</li>
	<li>Illustrator</li>
</ul>

1-1.モノクロ

モノクロ

モノクロでシンプルな箇条書きです。デザインを崩さずにさらっと使うことができるかと思います。

CSS
ul, ol {
	background: #fcfcfc;/*背景色*/
	padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
	border: solid 3px gray;/*線の種類 太さ 色*/
}

ul li, ol li {
	line-height: 1.5; /*文の行高*/
	padding: 0.5em 0; /*前後の文との余白*/
}

1-2.爽やか

爽やかなリストデザイン

青の破線で囲み、爽やかな印象を出しました。

CSS
ul, ol{
	color: #668ad8;/*文字色*/
	border: dashed 2px #668ad8;/*破線 太さ 色*/
	background: #f1f8ff; /*背景色*/
	padding: 0.5em 0.5em 0.5em 2em;
}

ul li, ol li {
	line-height: 1.5;
	padding: 0.5em 0;
}

二重線バージョン

二重線

borderdoubleにして線を太めにするとこうなります。

CSS
ul, ol {
	color: #668ad8; 
	border: double 5px #668ad8;/*二重線 太さ 色*/
	background: #f1f8ff; 
	padding: 0.5em 0.5em 0.5em 2em;
}

ul li, ol li {
	line-height: 1.5;
	padding: 0.5em 0;
}

1-3.上下のみボーダー

上下のみborder

左右のborderを取ってみました。少しスマートな印象になりますね。上下の線はもう少し太くしても良いでしょう。

CSS
ul, ol {
	color: #1e366a;
	border-top: solid #1e366a 1px;/*上のボーダー*/
	border-bottom: solid #1e366a 1px;/*下のボーダー*/
	padding: 0.5em 0 0.5em 1.5em;
}

ul li, ol li {
	line-height: 1.5;
	padding: 0.5em 0;
}

1-4.クール

クールなデザイン例

1pxのドット線で囲いました。色は自由に変えましょう。

CSS
ul, ol {
    color: #1e366a;
    border: dotted #1e366a 1px;/*ドット 色 太さ*/
    padding: 0.5em 0.5em 0.5em 2em;
}

ul li, ol li {
    line-height: 1.5;
    padding: 0.5em 0;
}

1-5. シャドウボックス

全体に影をつけました。立体感があり、目を引きやすくなるかもしれませんね。

シャドウを付けた例

CSS
ul, ol {
	background: #fffcf4;
	border-radius :8px;/*角の丸み*/
	box-shadow :0px 0px 5px silver;/*5px=影の広がり具合*/
	padding: 0.5em 0.5em 0.5em 2em;
}
ul li, ol li {
	line-height: 1.5;
	padding: 0.5em 0;
}

背景色を変えた場合

背景(background)を灰色にしてみると以下のようになります。。

背景をグレイにした場合

CSS
ul, ol {
	background: #dadada;/*灰色に*/
	border-radius :8px;
	box-shadow :0px 0px 5px silver;
	padding: 0.5em 0.5em 0.5em 2em;
}
ul li, ol li {
	line-height: 1.5;
	padding: 0.5em 0;
}

1-6.ステッチ風

パッチ風

内側に破線を入れて、ステッチ風にしてみました。かわいい雰囲気のウェブサイトやブログにはマッチするでしょう。

CSS
ul, ol {
	background: #fffde8;
	box-shadow: 0px 0px 0px 10px #fffde8;/*線の外側*/
	border: dashed 2px #ffb03f;/*破線*/
	border-radius: 9px;
	margin-left: 10px;/*はみ出ないように調整*/
	margin-right: 10px;/*はみ出ないように調整*/
	padding: 0.5em 0.5em 0.5em 2em;
}

ul li, ol li {
	line-height: 1.5;
	padding: 0.5em 0;
}

色を変えてみた場合

青色のステッチ風

青色バージョンだと以下のようになります。

CSS
ul, ol{
	background: #f1f8ff;
	box-shadow: 0px 0px 0px 10px #f1f8ff;/*線の外側*/
	border: dashed 2px #668ad8;/*破線*/
	border-radius: 9px;
	margin-left: 10px;/*はみ出ないように調整*/
	margin-right: 10px;/*はみ出ないように調整*/
	padding: 0.5em 0.5em 0.5em 2em;
}

ul li, ol li {
	line-height: 1.5;
	padding: 0.5em 0;
}

1-7.付箋風

バーのようなデザイン

見出しに使われるようなバーを並べてみました。メニューや目次に使うと良いかもしれないですね。

CSS
ul, ol {
	padding: 0;
	position: relative;
}

ul li, ol li {
	color: #2d8fdd;
	border-left: solid 6px #2d8fdd;/*左側の線*/
	background: #f1f8ff;/*背景色*/
	margin-bottom: 3px;/*下のバーとの余白*/
 	line-height: 1.5;
  	padding: 0.5em;
	list-style-type: none!important;/*ポチ消す*/
}

右端を丸くしてみた場合

右側の端を丸くすると、少しかわいくなります。

右端を角丸に

CSS
ul, ol {
	padding: 0;
	position: relative;
}

ul li, ol li {
	color: black;
	border-left: solid 8px orange;/*左側の線*/
	background: whitesmoke;/*背景色*/
	margin-bottom: 5px;/*下のバーとの余白*/
	line-height: 1.5;
	border-radius: 0 15px 15px 0;/*右側の角だけ丸く*/
	padding: 0.5em;
	list-style-type: none!important;
}

グレイの下線を足してみると…

立体感を出してみた場合

グレイの下線を足して影のようにしました。左側の緑の部分の色はお好みで変えましょう。

CSS
ul {
	padding: 0;
}

ul li, ol li {
	color: #404040;
	border-left: solid 6px #1fa67a;/*左側の線*/
	border-bottom: solid 2px #dadada;/*下に灰色線*/
	background: whitesmoke;
	margin-bottom: 5px;/*下のバーとの余白*/
	line-height: 1.5;
	padding: 0.5em;
	list-style-type: none!important;/*ポチ消す*/
	font-weight: bold;
}

1-8.タグ風

タグ風

白色の円を配置すると穴のようになり、タグに見えますね。これは番号付きの箇条書き(olとli)では使えません。

CSS
ul, ol{
	padding: 0;
}

ul li {
	position: relative;
	list-style-type: none!important;/*ポチ消す*/
	padding: 0.5em 0.5em 0.5em 0.5em;
	margin-bottom: 5px;
	line-height: 1.5;
	background: #dbebf8;
	vertical-align: middle;
	color: #505050;
	border-radius: 15px 0px 0px 15px;/*左側の角丸く*/
}

ul li:before{ /*疑似要素*/
	display:inline-block; 
	vertical-align: middle;
	/*以下白丸つくる*/
	content:'';
	width:1em;
	height: 1em;
	background: #fff;
	border-radius: 50%;
	margin-right: 8px;
}

2.アイコンフォントでulの箇条書きをおしゃれに

Font Awesomeという「簡単にウェブサイト上でアイコンを表示できるサービス」を使えば、よりリストデザインの幅が広がります。FontAwesomeの使い方は以下で解説しています(とっても簡単です)。

サルワカくんの顔(通常)
サルワカくん

FontAwesomeが導入済みの場合は、これから紹介するCSSコードをコピペしてそのまま使うことができます。

【参考】アイコンを黒ポチ代わりに使う方法

ulの黒ポチの代わりにアイコンフォントを使う場合、CSSで以下のような書き方をします。

  1. 黒ポチを消すulに対してlist-style-type: none!importantを指定

  2. liの疑似要素を作るli:beforeでアイコンを表示させる

  3. positionでアイコンの位置調整lirelativeに、li:beforeabsolute

疑似要素というのは、ものすごくざっくり言うと「要素の前後に何かをくっつける」ためのものです。ここではアイコンを前にくっつけます。ちょっとややこしいと思うので、よく分からないという方はCSSコード例をそのままコピペすればOKです。

2-1. シェブロンマーク

シェブロンマークを使った例

黒ポチ代わりにシェブロンマーク()を使います。シンプルでどんなデザインにも馴染むかと思います。自分の好きな色を変えて使うと良いでしょう。

CSS
ul {
	border: solid 2px skyblue;
	border-radius: 5px;
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
}

ul li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;
}

ul li:before {/*疑似要素*/
  font-family: FontAwesome;
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: skyblue;/*アイコン色*/
}

2-2.ふきだしアイコン

ふきだしを黒ポチ代わりに使った例

ポチ代わりに吹き出しアイコンを使ってみました。多用すると少しくどく見えてしまうかもしれませんが、目は引きそうです。

CSS
ul {
	border: solid 2px skyblue;/*線の設定*/
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
}

ul li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;
}

ul li:before {/*疑似要素*/
	font-family: FontAwesome;
	content: "\f075";/*アイコンの種類*/
	position: absolute;
	left : 1em; /*左端からのアイコンまで*/
	color: skyblue; /*アイコン色*/
}

2-3.チェックリスト

チェックマークの箇条書き例

チェックマークにしても良いでしょう。個人的にはこのくらいが見やすくて好きです。

CSS
ul {
	border: solid 2px #ffb03f;
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
}

ul li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;/*ポチ消す*/
}

ul li:before {/*疑似要素*/
	font-family: FontAwesome;
	content: "\f00c";
	position: absolute;
	left : 1em; /*左端からのアイコンまで*/
	color: #ffb03f; /*アイコン色*/
}

2-4.指差し

指差しにしてみた例

指差しマークかつ枠を二重線にしてみました。

CSS
ul {
	border: double 4px #21b384;
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
}
ul li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;/*ポチ消す*/
}
ul li:before {
	font-family: FontAwesome;
	content: "\f0a4";
	position: absolute;
	left : 1em; /*左端からのアイコンまで*/
	color: #21b384; /*アイコン色*/
}

2-5.肉球

肉球をポチ代わりにしてみた例

ペットブログなら肉球アイコンを使わない手はないでしょう。せっかくなので色もかわいらしいものにしてみました。

CSS
ul {
	border: solid 2px #ff938b;
	background: #fffaf1;
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
}

ul li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;/*ポチ消す*/
}

ul li:before {
	font-family: FontAwesome;
	content: "\f1b0";/*アイコン種類*/
	position: absolute;
	left : 1em; /*左端からのアイコンまで*/
	color: #ff938b; /*アイコン色*/
}

2-6.ひかえめ

控えめなリストアイデア例

三角マークを使ってみました。周辺にはうっすらと影をつけて少し目立つようにしてみてはどうでしょうか。

CSS
ul {
	box-shadow :0px 0px 3px silver;
	border: solid 1px whitesmoke;
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
	background: #fafafa;
}

ul li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;
}

ul li:before {
	font-family: FontAwesome;
	content: "\f0da";
	position: absolute;
	left : 1em; /*左端からのアイコンまで*/
	color: gray; /*アイコン色*/
}

2-7.立体的なバー

内側に影をつけて立体感を出してみた例

立体感を出してみました。記事内で使うにはあまり向いていません。主にメニュー用ですね。

CSS
ul {
	padding: 0;
	position: relative;
}

ul li {
	line-height: 1.5;
	padding: 0.5em 0.5em 0.5em 1.7em;
	list-style-type: none!important;
	background: -webkit-linear-gradient(top, #whitesmoke 0%, whitesmoke 100%);/*グラデーション*/
	background: linear-gradient(to bottom, whitesmoke 0%, #dadada 100%);/*グラデーション*/
	text-shadow: 1px 1px 1px whitesmoke;/*文字を立体的に*/
	color: black;
}

ul li:before { /*疑似要素*/
	font-family: FontAwesome;
	content: "\f138";
	position: absolute;
	left : 0.5em; /*左端からのアイコンまでの距離*/
	color: orange; /*アイコン色*/
}

青色バージョン

青色にしてみた場合

青色に変えてみました。さわやかな印象が出ますね。

CSS
ul {
	padding: 0;
	position: relative;
}
ul li {
	line-height: 1.5;
	padding: 0.5em 0.5em 0.5em 1.7em;
	list-style-type: none!important;
	background: -webkit-linear-gradient(top, skyblue 0%, #5aade6 100%);/*グラデーション*/
	background: linear-gradient(to bottom, skyblue 0%, #5aade6 100%);/*グラデーション*/
	color: #fff;
}

ul li:before {/*疑似要素*/
	font-family: FontAwesome;
	content: "\f138";
	position: absolute;
	left : 0.5em;
	color: white;
}

2-8.区切り線付き

点線でくぎってみた場合

liの下に区切り線をつけることで文同士の境目がハッキリとして見やすくなります。

CSS
ul {
	border: solid 2px #ffb03f;
	padding: 0 0.5em;
	position: relative;
}

ul li {
	line-height: 1.5;
	padding: 0.5em 0 0.5em 1.4em;
	border-bottom: dashed 1px silver;
	list-style-type: none!important;
}

ul li:before {
	font-family: FontAwesome;
	content: "\f138";/*アイコン種類*/
	position: absolute;
	left : 0.5em; /*左端からのアイコンまで*/
	color: #ffb03f; /*アイコン色*/
}

ul li:last-of-type{
	border-bottom: none;
}

白線で区切ってみた場合

白線区切りの場合

背景に色がついている場合は白色の実線や点線で区切っても良いでしょう。

CSS
ul {
	background: whitesmoke;
	padding: 0 0.5em;
	position: relative;
}

ul li {
	line-height: 1.5;
	padding: 0.5em 0 0.5em 1.5em;
	border-bottom: 2px solid white;
	list-style-type: none!important;
}

ul li:before {
	font-family: FontAwesome;
	content: "\f00c";/*アイコン種類*/
	position: absolute;
	left : 0.5em; /*左端からのアイコンまで*/
	color: #668ad8; /*アイコン色*/
}

ul li:last-of-type{
	border-bottom: none;/*最後の線だけ消す*/
}

2-9.フラット

フラットなデザイン例

フラットデザイン用です。淡い色を使うとフラットデザインらしく可愛くなります。また、太字と合わせると良いですね。

CSS
ul {
	padding: 0;
	position: relative;
}

ul li {
	color: white;
	background: #81d0cb;
	line-height: 1.5;
	padding: 0.5em 0.5em 0.5em 2em;
	border-bottom: 2px solid white;
	list-style-type: none!important;
	font-weight: bold; /*好みで太字に*/
}

ul li:before {/*疑似要素*/
	font-family: FontAwesome;
	content: "\f14a";
	position: absolute;
	left : 0.5em; /*左端からのアイコンまでの距離*/
	color: white; /*アイコン色*/
}

青×破線区切りの場合

破線で区切った場合

青の背景で区切り線を破線にしてみました。少しシャープな印象になりました。

CSS
ul {
	padding: 0;
	position: relative;
}
ul li {
	color: white;
	background: #2d8fdd;
	line-height: 1.5;
	padding: 0.5em 0.5em 0.5em 2em;
	border-bottom: 1px dashed white;
	list-style-type: none!important;
}
ul li:before {/*疑似要素*/
	font-family: FontAwesome;
	content: "\f040";
	position: absolute;
	left : 0.5em/*左端からのアイコンまでの距離*/;
	color: white;/*アイコン色*/
}
ul li:last-of-type{
	border-bottom: none;/*最後のliの線だけ消す*/
}

アイコンの背景を四角く塗りつぶした場合

アイコンの背景を青で塗った例

アイコンの裏だけ濃いめの色で塗りつぶしてみました。アイコン種類は自由に置き換えましょう。

CSS
ul {
	padding: 0;
}

ul li {
	color: black;
	position:relative;
	background: #f1f8ff;/*バーの色*/
	line-height: 1.5;
	padding: 0.5em;
	margin-bottom: 4px;
	border-left : solid 35px #5c9ee7;/*先の色=アイコン裏の色*/
	list-style-type: none!important;
}

ul li:before {
	font-family: FontAwesome;
	content: "\f040";
	position: absolute;
	display: block;
	padding: 0.5em;
	width: 1.2em;
	color: white; /*アイコン色*/
	font-weight: normal;/*アイコンは太字にしない*/
	text-align: center;
	left : -35px; /*左端からのアイコンまでの距離*/
  /*以下 上下中央寄せのため*/
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

3.オシャレなolリストのデザイン

番号付きのリストもオシャレにしてみましょう。参考までに数字のデザインを変えるCSSの書き方は以下のようになります。

  1. 数字を一旦消すlist-style-type:noneを使う
  2. カウンタを新しく作るcounter-increment:好きなカウンタ名
  3. カウンタを一旦リセットcounter-reset:カウンタ名
  4. カウンタを表示content:counter(カウンタ名)

なお以下の例ではカウンタ名をnumberとしています。

3-1.円で番号を囲う

おしゃれなolのリストデザイン例

数字を丸で囲んでみました。これだけでかなり華やかな雰囲気が出ますね。

CSS
ol{
	counter-reset:number; /*数字をリセット*/
	list-style-type: none!important; /*数字を一旦消す*/
	padding:0.5em;
	background: #f5faff;
}
ol li{
	position: relative;
	padding-left: 30px;
	line-height: 1.5em;
	padding: 0.5em 0.5em 0.5em 30px;
}

ol li:before{
  /* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
  /*以下数字のデザイン変える*/
	display:inline-block;
	background: #5c9ee7;
	color: white;
	font-family: 'Avenir','Arial Black','Arial',sans-serif;
	font-weight:bold;
	font-size: 15px;
	border-radius: 50%;
	left: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align:center;
  /*以下 上下中央寄せのため*/
	top: 50%;
	-moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);

}

liの下に破線をつけた場合

番号を円で囲った場合

下線を足すとさらに見やすくなるでしょう。ただし多用すると くどく感じられてしまうかもしれません。

CSS
ol{
	counter-reset:number; /*数字をリセット*/
	list-style-type: none!important; /*数字を一旦消す*/
	padding: 0.3em 0.8em;
	border: solid 2px #ffb107;
}
ol li{
	border-bottom: dashed 1px orange;
	position: relative;
	padding: 0.5em 0.5em 0.5em 30px;
	line-height: 1.5em;
}
ol li:before{
  /* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
  /*数字のデザイン変える*/
	display:inline-block;
	background: #ffb107;
	color: white;
	font-family: 'Avenir','Arial Black','Arial',sans-serif;
	font-weight:bold;
	font-size: 15px;
	border-radius: 50%;
	left: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align:center;
  /*以下 上下中央寄せのため*/
	top: 50%;
	-moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}
ol li:last-of-type{
	border-bottom: none; /*最後のliの線だけ消す*/
}

3-2.番号をブロックに

番号を四角で囲ったサンプル

四角バージョンです。破線で囲ってみましたが、実線を使っても、背景色を塗りつぶしても良いかもしれませんね。

CSS
ol{
	counter-reset:number; /*数字をリセット*/
	list-style-type: none!important; /*数字を一旦消す*/
	padding:0.5em;
	border: dashed 1px gray;
}

ol li{
	position: relative;
	line-height: 1.5em;
	padding: 0.5em 0.5em 0.5em 30px;
}

ol li:before{
  /* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
  /*数字のデザイン変える*/
	display:inline-block;
	background: #74c2f8;
	color: white;
	font-family: 'Avenir','Arial Black','Arial',sans-serif;
	font-weight:bold;
	font-size: 15px;
	left: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align:center;
  /*以下上下中央寄せのため*/
	top: 50%;
	-moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

番号を四角で塗りつぶしたサンプル

番号を四角で塗りつぶしたサンプル

番号の背後だけを青く塗りつぶしました。目次に使うと良いかもしれませんね

CSS
ol{
	counter-reset:number; /*数字をリセット*/
	list-style-type: none!important; /*数字を一旦消す*/
	padding:0;
}
ol li{
	position: relative;
	padding: 0.5em;
	line-height: 1.5em;
	background: #f1f8ff;
	border-left : solid 35px #5c9ee7;
	margin-bottom: 5px;
}
ol li:before{
  /* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
  /*数字のデザイン変える*/
	display:inline-block;
	color: white;
	font-family: 'Avenir','Arial Black','Arial',sans-serif;
	font-weight:bold;
	font-size: 15px;
	top: 50%;
	-moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
	left: -35px;
	width: 35px;
	height: 1em;
	line-height: 1;
	text-align:center;
}

3-3.手書き風

olの数字を手書き風に

数字を手書き風に変えてもユニークに見えますね。ここではWindows、Mac、iPhoneそれぞれで対応している手書きフォントを使っていますが、各環境で表示が異なります。また、Androidには対応していません。実際に使うときにはGoogle Fontを使うのが良いでしょう。ちなみに各環境の標準フォントは以下のツールで確認できます。

CSS
ol{
	counter-reset:number; /*数字をリセット*/
	list-style-type: none!important; /*数字を一旦消す*/
	padding:0;
	border-top: solid 2px black;
	border-bottom: solid 2px black;
}
ol li{
	padding: 0.5em 0;
	position: relative;
	padding-left: 1.4em;
	line-height: 1.5em;
}
ol li:before{
	counter-increment: number;
	content: counter(number) ".";
	position: absolute;
	left: 0;
	font-family: 'Bradley Hand','Segoe Script','Segoe Print',sans-serif;/*手書き風のフォント*/
	font-size: 1.3em;/*フォントサイズ*/
}

3-4.番号をふきだしに

olの数字を吹き出しにする

番号を吹き出し風にすればユニークで目をひくデザインになりますね。こちらも数字のデザインが重要になります。可能であればGoogle Fontを使うのがオススメです。

CSS
ol{
	counter-reset:number; /*数字をリセット*/
	list-style-type: none!important; /*数字を一旦消す*/
	padding:0.5em;
	border: solid 2px #5c9ee7;
}
ol li{
	position: relative;
	padding: 0.5em 0.5em 0.5em 35px;
	line-height: 1.5em;
}
ol li:before{
  /* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
  /*数字のデザイン変える*/
	display:inline-block;
	background: #5c9ee7;
	color: white;
	font-family: 'Avenir','Arial Black','Arial',sans-serif;
	font-weight:bold;
	font-size: 15px;
	border-radius: 50%;/*円にする*/
	left: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align:center;
  /*以下 上下中央寄せのため*/
	top: 50%;
	-moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}
ol li:after {/*吹き出しのちょこんと出た部分*/
	content: '';
	display: block;
	position: absolute;
	left: 20px;/*左からの位置*/
	height: 0;
	width: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 12px solid #5c9ee7;
  /*以下 上下中央寄せのため*/
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

4.リストにタイトルタブをつける

リストにタイトルタグをつけるサンプル

ボックスの上にタブのように文字をつけることができます。下のコードの”POINT”の文字を書きかえて使いましょう。「ポイント」や「まとめ」、「重要」「コラム」などの文字をつけると良いですね。

CSS
ul {
    border: solid 2px #ffb03f;
    padding: 0.5em;
	position: relative;
	margin-top: 2em;
}
ul li {
    line-height: 1.5;
    padding: 0.5em 0 0.5em 1.4em;
	border-bottom: dashed 1px silver;
	list-style-type: none!important;
}
ul li:last-of-type{
	border-bottom: none;
}
ul li:before {/*リスト内のアイコン*/
  	font-family: FontAwesome;
  	content: "\f138";/*アイコン種類*/
  	position: absolute;
  	left : 0.5em; /*左端からのアイコンまで*/
  	color: #ffb03f; /*アイコン色*/
}
ul li:after {/*タイトルタブ*/
  	background: #ffb03f;
  	color: #fff;
  	font-weight: bold;
  	position: absolute;
  	left: -2px;
  	bottom: 100%;
  	padding: 1px 7px;
  	content: "POINT";/*タブの文字*/
  	letter-spacing: 0.05em;/*字間*/
  }

この例ではulを使っていますが、olでも同じように作ることができます。

タグにアイコンを入れた場合

リストにタイトルタグをつける

合わせ技でタグ内にアイコンフォントを入れることもできます。content:'\f0a7 Check';\f0a7の部分がアイコン種類を表しています。詳しい書き方は「Font AwesomeをCSSで使う方法」をご覧ください。

CSS
ul {
	border: solid 2px #ffb03f;
	padding: 0.5em 1em 0.5em 2.3em;
	position: relative;
	margin-top: 2em;
}
ul li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;
}
ul li:before {/*リストのアイコン*/
	font-family: FontAwesome;
	content: "\f00c";
	position: absolute;
	left : 1em; /*左端からのアイコンまでの距離*/
	color: #ffb03f; /*アイコン色*/
}
ul li:after {/*タブ*/
	background: #ffb03f;
	color: #fff;
	font-family: FontAwesome,'Avenir','Arial',sans-serif;
	position: absolute;
	left: -2px;
	bottom: 100%;
	padding: 1px 7px;
	content: '\f0a7  Check';/*アイコンコード+文字*/
	letter-spacing: 0.05em;/*字間*/
  }

5. 余白や文字の太さを調整する

ここまで紹介してきた例では、リスト外の余白を考慮していません。リスト内外の余白を調整したいときは、こちらの記事を参考にすると良いかと思います。

また、文字は好みで太字にすると良いでしょう。


サルワカ