CSSでulタグのリストをオシャレに！コピペで使えるサンプルデザインまとめ

CSSを使って、おしゃれなリストを作成しているWebサイトがありますよね。

ul要素の基本的なデザインでは、物足りないと感じる方も多いのではないでしょうか？

今回は、普段とは違うリストを作成したいという方のために、コピペで簡単に作れるサンプル
を用意しました。

気に入ったものを利用して、オリジナルのリストを作成してみてください。

オシャレなリストを作る上で必須知識となる、CSSのlist-styleプロパティについても説明しています。

ぜひ、最後まで読んでくださいね。

ul要素を使ったリストの作り方

そもそも、リストとはどのように作成するのでしょうか？

リストにはul要素を使ったものと、ol要素を使ったものがあります。

今回は、ul要素のリストについて紹介していきますね。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

リストは、上記のように、ul要素と子要素のli要素によって構成されます。

ul要素は順序のないリスト作成に使われ、各項目の頭に黒いポチがつきます。

対して、ol要素は順序ありのリスト作成に使用され、各項目の頭には番号が振られます。

ul要素のリストは順番を変えても問題ないものに、ol要素のリストは順番を変えると間違いになるものに、という考えで使い分けましょう。

CSSのlist-styleプロパティについて

CSSのサンプルを紹介する前に、リスト作成で重要となる、CSSのlist-styleプロパティについて紹介します。

list-styleプロパティは、リストの先頭にあるマークについて一括指定することができます。

指定するものは、

の3つですね。

list-style-typeプロパティでは、丸や四角など、リストマークの種類を指定できます。

list-style-imageプロパティでは、指定した画像をマークとして使用できるようになります。

list-style-positionプロパティでマークの位置を指定します。

値は「inside」と「outside」の2つで、insideの場合は要素の中に配置され、outsideの場合は要素の外に配置されます。

これら3つをlist-styleプロパティで、下記のようにまとめて記述できます。

ul {
list-style: square url('/img/sample.png') outside;
}

list-style-imageとlist-style-typeの両方の指定があった場合、画像が優先され、画像が使用できない場合に、list-style-typeが適用されます。

以前には、ul要素にtype属性というものがあり、そこでリストマークの種類が指定できました。

HTML5では、ul要素のtype属性は廃止されていますので、CSSでリストマークの指定を行いましょう。

HTMLとCSSで作るリストのサンプルデザイン

それでは、コピペで使えるリストデザインを紹介していきます。

HTMLは以下の共通コードを使用します。各項目では、CSSを使って説明していきますね。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
</ul>

HTMLとCSSのみで簡単に作れるので、Webサイトのデザインに合わせて、カスタマイズも試してみてください。

シンプルなリスト

最初はシンプルで簡単に作れるリストを紹介します。

リストを枠で囲う

ul {
  background: #ccc;
  padding: 10px 15px;
  border: solid 3px gray;
}
li {
  list-style: square inside;
  padding: 7px 0;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 600;
}

リストマークを四角（square）に指定しました。

また、背景を灰色にして、borderで枠を作っています。

他のデザインを崩さないような落ち着いたリストを作成したいときにおすすめです。

背景色や文字の大きさなどを色々変えて試してみてください。

枠線をドットにしたり、上下のみの線にしたりしても良いですね。

角を丸くして影を付ける

ul {
  background: #ffe2c6;
  padding: 10px 15px;
  border-radius :7px;
  box-shadow :0px 0px 5px #ccc;
}
li {
  list-style: square inside;
  padding: 7px 0;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 600;
}

先ほどのリストの背景色を変え、角を丸くしてみました。

影を付けることで、浮き出て見えますね。

こちらも落ち着いたデザインですが、目を引くようになったのではないでしょうか。

ステッチ風の点線を入れる

ul {
  background: #ffccb3;
  margin: 0 10px;
  padding: 10px 15px;
  box-shadow: 0px 0px 0px 10px #ffccb3;
  border: dashed 2px #ff938a;
  border-radius: 7px;
  color: #555;
}
li {
  list-style: square inside;
  padding: 7px 0;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 600;
}

影を内側の要素と同じ色にし、「border: dashed」で破線を入れることで、内側に縫ったような柄を入れました。

可愛らしい雰囲気のリストを作成したいときに使ってみてください。

項目が分かれているリスト

続いて、ページの目次やメニューに使えそうなリストを紹介します。

リスト項目が1つ1つ分かれているところが特徴です。

2つの丸を重ねてマークに

ul {
  list-style-type: none;
  padding: 7px;
  margin: 0;
}
li {
  position: relative;
  padding: 5px 0 5px 35px;
  margin-bottom:5px;
  border-bottom: solid 1px #ccc;
  color: #555;
  font-size: 16px;
}
li:after, li:before {
  content:'';
  position: absolute;
  border-radius: 50%;
}
li:before {
  top: 50%;
  left: 5px;
  width: 17px;
  height: 17px;
  background: #ff9966;
  transform: translateY(-50%);
}
li:after {
  top: 15px;
  left: 12px;
  width: 14px;
  height: 14px;
  background: #ffbb99;
}

リストマークを削除し、色違いの丸を重ねて配置しました。

シンプルですが、少しおしゃれにできます。好きな色で試してみてください。

左端に線を引いて付箋風に

ul {
  padding: 0;
  margin: 0;
  color: #555;
  font-size: 16px;
  font-weight: 600;
}
li {
  list-style-type: none;
  width:340px;
  border-left: solid 8px #1fa67a;
  border-bottom: solid 2px #ddd;
  padding: 7px;
  margin-bottom: 5px;
  background: #eee;
  border-radius: 3px;
}

こちらもリストマークを削除しています。

各項目の左端に緑色の線を入れて付箋のようなデザインにしました。

項目の下には灰色の線を入れて立体的にしています。

左端に白丸を置いてタグ風に

ul {
  padding: 0;
  margin: 0;
}
li {
  position: relative;
  list-style-type: none;
  width: 340px;
  height: 36px;
  padding-left: 35px;
  margin-bottom: 5px;
  background: #ff9966;
  line-height: 36px;
  font-size: 16px;
  font-weight: 600;
  color: #555;
  border-radius: 12px 0 0 12px;
  transition: 0.3s
}
li:before {
  position: absolute;
  top: 9px;
  left: 7px;
  content: '';
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
}
li:hover{
  background: #66ccff;
}

リストマークを削除し、白丸を作成して先頭につけました。

白丸を入れるための余白を「padding-left: 35px;」で挿入しています。

最後にマウスをホバーさせたときに背景色が変わるように設定しました。

リストの中身がリンクになっているときなどに利用できるかと思います。

「Font Awesome」アイコンを使ったリスト

リストマークの代わりにアイコンを使ってリストを作成する方法を紹介します。

「Font Awesome」というWebサービスを利用することで、簡単にページ内にアイコンを入れることができます。

「Font Awesome」の導入の仕方は、以下の記事が分かりやすいです。

2021年最新版、Font Awesome アイコンの使い方と便利な機能のまとめ

リストマークを三角のアイコンに

ul {
  list-style-type: none;
  width:340px;
  padding: 10px 15px;
  border-radius :7px;
  box-shadow :0px 0px 5px #ccc;
  background: #fafafa;
}
li {
  position: relative;
  padding: 5px 0 5px 25px;
  line-height: 1.5;
  font-size: 16px;
  font-weight: 600;
}
li:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
  color: #808080;
  left : 7px;
}

リストの先頭のマークを削除し、三角のアイコンを加えました。

それ以外はシンプルな作りのリストです。

落ち着いたデザインのサイトに使用してみてください。

アイコンの背景を塗りつぶす

ul {
  list-style-type: none;
  width:340px;
  padding: 0;
  margin: 0;
  color: #555;
  line-height: 1.5;
  font-size: 16px;
  font-weight: 600;
}
li {
  position: relative;
  background: #ffccb3;
  padding: 5px 10px;
  margin-bottom: 5px;
  border-left : solid 35px #ff9966;
  border-radius: 3px;
}
li:before {
  position: absolute;
  top: 0px;
  left : -35px;
  padding: 5px 10px;
  font-family: "Font Awesome 5 Free";
  content: "\f1b0";
  color: #fff;
}

アイコンの背景を濃い色で塗りつぶして、分かりやすくしています。

目的にあったアイコンを探してみてくださいね。

見出し付きのリストデザイン1

ul {
  position: relative;
  width:340px;
  padding: 0 10px;
  margin-top: 25px;
  line-height: 1.5;
  background: #fff;
  font-size: 16px;
  font-weight: 600;
  border: solid 3px #5c9ee7;
  border-radius: 0 7px 7px 7px;
  list-style-type: none;
}
ul:before {
  display: block;
  position: absolute;
  top: -24px;
  left: -3px;
  padding: 1px 10px;
  background: #5c9ee7;
  content: "LIST";
  color: #fff;
  font-size: 14px;
  border-radius: 7px 7px 0 0;
}
li {
  padding: 5px 0 5px 25px;
  border-bottom: dashed 1px #ccc;
}
li:last-of-type {
  border-bottom: none;
}
li:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f138";
  color: #5c9ee7;
  font-weight: bold;
  left : 7px;
}

ボックスのリストの上に、「LIST」の見出しを付けました。

箇条書きのリストにタイトルを付けたいときなどに使えますね。

項目ごとの区切りを分かりやすくするために、間には破線を付けています。

見出し付きのリストデザイン2

ul {
  position: relative;
  list-style-type: none;
  width:340px;
  padding: 15px 10px;
  background: #fff;
  line-height: 1.5;
  font-size: 16px;
  font-weight: 600;
  border-radius: 7px;
  border: solid 3px #52ccc6;
  color: #48b5b0;
}
ul:before {
  display: block;
  position: absolute;
  padding: 0 10px;
  font-family: "Font Awesome 5 Free";
  content: "\f0eb  POINT";
  top: -15px;
  left: 20px;
  background: #fff;
}
li {
  position: relative;
  padding: 5px 0 5px 35px;
}
li:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  color: #48b5b0;
  font-weight: bold;
  left : 7px;
}

周囲の枠に「POINT」という見出しが被さるようなデザインにしました。

リストの先頭だけでなく、見出しの横にもアイコンがついています。

アイコンや枠線の色を変えて、色々と試してみてください。

まとめ：普段と違うリストに挑戦してみよう

今回の記事では、コピペで簡単に作れるリストのサンプルコードを紹介してきました。

サンプルをそのまま使うだけでなく、配置や色を変えて、自分だけのリスト作成に挑戦してみても良いかもしれませんね。

実際に手を動かしてみることで、CSSをより深く理解できるようになるはずです。

いつもと違うリストを作成したいときなどに、今回の記事が参考になれば幸いです。