CSSを使ってリスト(箇条書き)をデザインしてみた!

自分の勉強も兼ねて箇条書きリスト(ul、ol)のリストデザインをやってみようと思います。
シンプルなリストデザイン
HTML
<ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
</ul>
ulリストすべてに適用されるようにしてあります。一部のリストに適用したい場合は「ul」にクラス名をつけてください。(例⇒ <ul class="list">)
ブロックエディタのリストブロックにも適用されます。ブロックエディタのリストブロックの使い方は以下をご覧下さい。
CSS
リストデザインのサンプルとCSSです。
CSSはWordPressの場合、[外観]⇒[カスタマイズ]⇒1番下にある「追加CSS」などにコピーしてください。
※クラス名を付けた場合は「ul」(すべて)の後に「.クラス名」を追加してください。(例⇒ ul.list)
背景色付きリスト
リスト全体に背景色を付けたシンプルなリスト
- 1番目のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
/*--------------------
リストデザイン
-------------------*/
ul{
margin:2em 1em; /*外側の余白(上下 左右)*/
padding:0.5em 0.5em 0.5em 2em; /*余白(上 右 下 左)*/
background:lightpink; /*背景色*/
color:#000; /*文字色*/
}
背景色+枠線つ付きリスト
上のデザインに枠線を付けたリストデザイン
- 1番目のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
/*--------------------
リストデザイン
-------------------*/
ul{
margin:2em 1em; /*外側の余白(上下 左右)*/
padding:0.5em 0.5em 0.5em 2em; /*余白(上 右 下 左)*/
background:lightpink; /*背景色*/
color:#000; /*文字色*/
border:2px solid deeppink; /*枠線(太さ 線種 色)*/
}
付箋風なリスト
付箋(ふせん)のようなリストデザイン
- 1番目のリスト
- 2番目ののリスト
- 3番目のリスト
- 4番目のリスト
/*--------------------
リストデザイン
-------------------*/
ul{
margin:2em 1em; /*外側の余白(上下 左右)*/
list-style:none; /*黒ポチを消す*/
}
ul li{
margin-top:4px; /*行の間の余白*/
padding:3px 7px;
background:lightpink; /*背景色*/
color:#a61919; /*文字色*/
}
付箋風+行(奇数行と偶数行)の背景色を分けたリスト
奇数行(1、3、5…)と偶数行(2、4、6…)で背景色を変えたリストデザイン
- 1番目のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
サンプルは奇数行を白にしているので解りづらいですがき奇数行の背景色を変えると付箋風になります。
/*--------------------
リストデザイン
-------------------*/
ul{
margin:2em 1em; /*外側の余白(上下 左右)*/
list-style:none; /*黒ポチを消す*/
}
ul li{
margin-top:4px;
padding:0 7px;
background:#fff; /*背景色*/
color:#000; /*文字色*/
}
/*偶数行の設定*/
ul li:nth-child(even){
background:lightpink; /*偶数行の背景色*/
color:#a11; /*偶数行の文字色*/
}
補足
奇数行の背景色を変える場合は、12行目のbackground、文字色は13行目を変更してください。
四角マーカーリスト
マーカー(デフォルトでは黒ポチ)を四角にしたリストです。
- 1番目のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
/*--------------------
リストデザイン
-------------------*/
ul{
margin:2em 1em; /*外側の余白(上下 左右)*/
list-style:none; /*黒ポチを消す*/
}
ul li{
line-height:1.5;
color:#000; /*文字色*/
}
/*四角マーカー*/
ul li:before{
display:inline-block;
vertical-align:middle;
content:'';
width1em;
height:1em;
background:#f00; /*マーカーの色*/
margin-right:7px; /*マーカー右側の余白*/
}
丸いマーカー
上の四角マーカーのCSSに「border-radius:50%;」を追加して丸いマーカーにしたリストです。
- 1番目のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
/*--------------------
リストデザイン
-------------------*/
ul{
margin:2em 1em; /*外側の余白(上下 左右)*/
list-style:none; /*黒ポチを消す*/
}
ul li{
line-height:1.5;
color:#000; /*文字色*/
}
/*丸いマーカー*/
ul li:before{
display:inline-block;
vertical-align:middle;
content:'';
width1em;
height:1em;
background:#f00; /*マーカーの色*/
border-radius:50%; /*丸にする*/
margin-right:7px; /*マーカー右側の余白*/
}
さらに
「四角マーカー」「丸いマーカー」のCSSに以下を追加すると偶数行のマーカーの色を変えることができます。
/*偶数行のまマーカーの色*/
ul li:nth-child(even):before{
background:#f69;
}
- 1番目のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
メモ風のリスト
罫線入りのメモ風なリストデザインです。
- 1番目のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
/*--------------------
リストデザイン
-------------------*/
ul{
margin:2em 1em; /*外側の余白(上下 左右)*/
padding:1em;
border:2px solid #f00; /*枠線の太さ 線種 色*/
list-style:none; /*黒ポチを消す*/
}
ul li{
padding:5px 7px;
color:#000; /*文字色*/
border-bottom:1px dashed #555; /*下線(罫線)の太さ 線種 色*/
line-height:1.5;
}
/*四角マーカー*/
ul li:before{
display:inline-block;
vertical-align:middle;
content:'';
width1em;
height:1em;
background:#f00; /*マーカーの色*/
margin-right:7px; /*マーカー右側の余白*/
}
行を枠線で囲って付箋風なリスト
- 1番目のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
/*--------------------
リストデザイン
-------------------*/
ul{
margin:2em 1em; /*外側の余白(上下 左右)*/
list-style:none; /*黒ポチを消す*/
}
ul li{
margin-top:4px; /*行の間の余白*/
padding:8px 7px;
color:#000; /*文字色*/
background:#fff; /*行の背景色*/
border:1px solid #555; /*枠線の太さ 線種 色*/
line-height:1.5;
}
/*四角マーカー*/
ul li:before{
display:inline-block;
vertical-align:middle;
content:'';
width1em;
height:1em;
background:#f00; /*マーカーの色*/
margin-right:7px; /*マーカー右側の余白*/
}
アイコンを使ったリストデザイン
ここからは『Font Awesome』のアイコンを使用します。Font Awesomeの導入方法、使い方は以下の記事を参考にしてください。
HTML
<ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
</ul>
こちらのHTMLも上と同じです。特定のリストのみCSSを適用させる場合はulにクラス名を付けてください。
CSS
- 1番目のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
/*--------------------
リストデザイン
-------------------*/
ul{
margin:2em 1em;
list-style:none; /*黒ポチを消す*/
}
ul > li:before{
font-family:"Font Awesome 5 Free";
content:"\f00c"; /*アイコンのコード*/
font-weight:900; /*ソリッド:900 / レギュラー:400*/
color:deeppink; /*アイコンの色*/
margin-right:7px; /*アイコン右側の余白*/
}
アイコンコード(合わせてfont-weight(種類))を変更すれば他のアイコンにすることもできます(*^^*)
付箋っぽいリスト
- 1番目のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
/*--------------------
リストデザイン
-------------------*/
ul{
margin:2em 1em;
list-style:none;
}
ul li{
margin-top:6px;
padding:0 7px 0 0;
line-height:2;
background:#fff; /*行の背景色*/
border-top:1px dotted #f00; /*行の上の線(太さ 線種 色)*/
border-bottom:1px dotted #f00; /*行の下の線(太さ 線種 色)*/
}
/*アイコン部分*/
ul li:before{
font-family:"Font Awesome 5 Free";
content:"\f15c"; /*アイコンのコード*/
font-weight:400; /*ソリッド:900/ レギュラー: 400*/
font-size:1.2em; /*アイコンのサイズ*/
color:#fff; /*アイコンの色*/
width:2em;
height:2em;
background:#f00;
display:inline-block;
text-align:center;
margin-right:7px; /*アイコン部分の右側の余白*/
}
丸の中にアイコンを入れたリスト
- 1番目のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
/*--------------------
リストデザイン
-------------------*/
ul{
margin:2em 1em;
list-style:none;
}
ul li{
margin-top:6px;
padding:0 7px 0 0;
background:#fff; /*行の背景色*/
}
/*アイコン部分*/
ul li:before{
font-family:"Font Awesome 5 Free";
content:"\f15c"; /*アイコンのコード*/
font-weight:400; /*ソリッド:900/ レギュラー: 400*/
font-size:1.2em; /*アイコンのサイズ*/
color:#fff; /*アイコンの色*/
width:2em;
height:2em;
background:#f00;
border-radius:50%;
display:inline-block;
text-align:center;
line-height:2em;
margin-right:7px; /*アイコン部分の右側の余白*/
}
黒板風リスト(チェックアイコン付き)
- 1番目のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
<ul class="list-blackboard">
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
</ul>
※こちらのデザインについてはクラス名入りで掲載しておきます。HTMLは上記の通りです。
/*--------------------
リストデザイン(黒板風)
-------------------*/
ul.list-blackboard{
margin:2em 1em;
padding:1em;
list-style:none; /*黒ポチを消す*/
background:#0B614B; !/*背景色*/
color:#fff; /*文字色*/
border:8px ridge chocolate; /*枠線(太さ 線種 色)*/
}
ul.list-blackboard li{
padding:3px 7px;
line-height:1.8; /*行の高さ*/
}
/*アイコン*/
ul.list-blackboard li:before{
font-family:"Font Awesome 5 Free";
content:"\f14a"; /*アイコンのコード*/
font-weight:400; /*ソリッド:900/ レギュラー:400*/
font-size:1em; /*アイコンのサイズ*/
color:#fff; !/*アイコンの色*/
margin-right:7px; /*アイコン右側の余白*/
}
ステッチっぽいリスト(肉球)
- 1番目のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
<ul class="list-stitch-pad">
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
</ul>
※こちらもクラス名付きで載せておきます。HTMLは上記の通りです。
/*--------------------
リストデザイン(ステッチ風)
-------------------*/
ul.list-stitch-pad{
margin:2em 1em;
padding:1em;
list-style:none; /*黒ポチを消す*/
color:#800; /*文字色*/
background:#fc6; /*背景色*/
border-top:2px dashed #fff; /*縫い目に見える上の線*/
border-bottom:2px dashed #fff; /*縫い目に見える下の線*/
box-shadow:0 0 0 5px orange; /*外側の部分*/
}
ul.list-stitch-pad li{
padding:3px 7px;
line-height:1.8; /*行の高さ*/
}
/*アイコン*/
ul.list-stitch-pad li:before{
font-family:"Font Awesome 5 Free";
content:"\f1b0"; /*アイコンのコード*/
font-weight:900; /*ソリッド:900 / レギュラー:400*/
font-size:1em; /*アイコンのサイズ*/
color:#800; /*アイコンの色*/
margin-right:7px; /*アイコン右側の余白*/
}
数字のリスト
数字のリストを作ってみようと思います。
HTML
<ol>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
</ol>
数字のリストはulでもできますが、今回はolを使おうと思います。
CSS
丸数字
- 1番目のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
/*--------------------
丸数字のリスト
--------------------*/
ol{
margin:2em 1em;
list-style:none;
counter-reset:count;
}
ol li{
counter-increment:count;
}
ol li:before{
content:counter(count);
margin-right:7px; /*丸数字右側の余白*/
/*以下 丸の設定*/
display:inline-block;
width:22px;
height: 22px;
height:22px;
background:#f69; /*丸の色*/
color:white; /*数字の色*/
border-radius:50%;
line-height:22px; /*行の高さ(heightと同じにしてください)*/
text-align:center;
}
四角数字
- 1番目のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
上記の「丸数字」のCSS 23行目のborder-radiusを削除すると丸が四角になります。
ふ付箋っぽいリスト
- 1番目のリスト
- 2番目のリスト
- 3番目のリスト
- 4番目のリスト
/*--------------------
リストデザイン
-------------------*/
ol {
margin:2em 1em;
list-style:none;
counter-reset:count;
}
o li{
margin-top:6px;
padding:0 7px 0 0;
counter-increment:count;
background:#fff; /*行の背景色*/
border-top:1px dotted #f00; /*行の上の線(太さ 線種 色)*/
border-bottom:1px dotted #f00; /*行の下の線(太さ 線種 色)*/
}
ol li:before{
content:counter(count);
font-size:1.2em; /*数字のサイズ*/
color:#fff; /*数字の色*/
width:2em;
height:2em;
background:#f00;
display:inline-block;
line-height:2em;
text-align:center;
margin-right:7px; /*数字部分の右側の余白*/
}
最後に
今回はリスト(ul、ol)のデザインに挑戦してみました。
なかなか思うようにできずたいしtたものはないかmしれません(^^;)
mも私的にはとても勉強んなりました。
何か気に入ったものがあればコピペして使ってください。
またお思いついたら、増やしてみようと思います。
最後まで読んでくださりありがとうございました。
ディスカッション
コメント一覧
ランキングからきました。
色々デザインできるんですね。
勉強になりました。有難うございました。
> ゆうさん
こんばんは。
コメントありがとうございます。
CSSを使えばいろいろできますね。やってみて私も大変勉強になりました。
まだまだ未熟者なので簡単なものしか出来ませんが、もっと勉強して素敵なデザインができるように頑張ります(*^^*)w