SOICHI BLOG

【CSS】コピペできるliのデザインパターン
HOME > ホームページ制作 > CSS > 【CSS】コピペできるliのデザインパターン

【CSS】コピペできるliのデザインパターン

投稿日： 更新日：
CATEGORY
#

CSSだけで作るliのデザインパターンです。コピペするだけで使用できるのでご活用ください。

マークを丸ではなく四角にする list-style-type:square

リストのマークの前につく記号を丸ではなく四角にします。list-styleプロパティにsquareを指定するだけです。ちなみに何も指定していない初期値の場合はdiscが指定されています。

DEMO

  • ビタミン
  • たんぱく質
  • 糖質

HTML

<ul class="list1">
  <li>ビタミン</li>
  <li>たんぱく質</li>
  <li>糖質</li>
</ul>

CSS

.list1{
  list-style:square;
}

マークを白丸にする list-style-type:circle

これもsquareの時同様、list-styleプロパティにcircleを指定するだけです。

DEMO

  • ビタミン
  • たんぱく質
  • 糖質

HTML

<ul class="list2">
  <li>ビタミン</li>
  <li>たんぱく質</li>
  <li>糖質</li>
</ul>

CSS

.list2{
  list-style: circle;
}

疑似要素を利用して記号を入れる

list-styleはnoneを指定して従来のマークを消して、疑似要素（::before）で好きな文字を入力できます。

DEMO

  • ビタミン
  • たんぱく質
  • 糖質

HTML

<ul class="list3">
  <li>ビタミン</li>
  <li>たんぱく質</li>
  <li>糖質</li>
</ul>

CSS

.list3{
  list-style:none;
}
.list3 li{
  position:relative;
}
.list3 li:before{
  content:"◆";
  display:block;
  position:absolute;
  left:-1em;
  color:#ddd;
}

疑似要素にstyleを充ててオリジナルのデザインにする

前述した疑似要素の活用を更に発展させてCSSでチェックのマークを作りました。

DEMO

  • ビタミン
  • たんぱく質
  • 糖質

HTML

<ul class="list4">
  <li>ビタミン</li>
  <li>たんぱく質</li>
  <li>糖質</li>
</ul>

CSS

.list4{
  list-style:none;
}
.list4 li{
  position:relative;
}
.list4 li:before{
  content:"";
  display:block;
  position:absolute;
  left:-1em;
  top:0.5em;
  color:#ddd;
  width:6px;
  height:8px;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  border-bottom:solid 2px #555;
  border-right:solid 2px #555;
  transform:rotate(45deg);
}

下線を追加してノートの様なデザインにする

マークは削除した上で下線を追加してノート風のデザインにできます。ナビゲーションやカテゴリー一覧などに使用できそうです。

ノーマルな下線

DEMO

  • ビタミン
  • たんぱく質
  • 糖質

HTML

<ul class="list6">
  <li>ビタミン</li>
  <li>たんぱく質</li>
  <li>糖質</li>
</ul>

CSS

.list6{
  list-style:none;
  padding-left:1.5em;
}
.list6 li{
  border-bottom:solid 1px #ddd;
  margin:0.5em 0;
  padding:0.5em 0 0 1em;
}
.list6 li:nth-of-type(1){
  margin-top:0;
}
.list6 li:nth-last-of-type(1){
  margin-bottom:0;
}

点線バージョン

DEMO

  • ビタミン
  • たんぱく質
  • 糖質

HTML

 <ul class="list7">
  <li>ビタミン</li>
  <li>たんぱく質</li>
  <li>糖質</li>
</ul>

CSS

.list7{
  list-style:none;
  padding-left:1.5em;
}
.list7 li{
  border-bottom:dotted 1px #555;
  margin:0.5em 0;
  padding:0.5em 0 0 1em;
}
.list7 li:nth-of-type(1){
  margin-top:0;
}
.list7 li:nth-last-of-type(1){
  margin-bottom:0;
}

まとめ

CSSで作るliのスタイルパターンでした。コピペするだけでも同じデザインになるはず（フォントのサイズやその他余白などは要調整）です。

   

© 2025 - SOICHI BLOG