【CSSカスタマイズ】ルーズリーフ風（ノート風）箇条書きリスト

リスト（箇条書き）を、ルーズリーフ風（ノート風）に表示するCSSカスタマイズです。

コードをコピペして、サイトやブログで使っていただいてOKです。

ソースコード
1. HTML
2. CSS
CSSコード解説
注意点
お揃いのボックス、見出しデザインもあります！

ソースコード

HTML

<ul class="note">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
</ul>

CSS

.note {
   margin: 0;
   border: solid 2px #999; /*外枠の設定*/
   padding: 0 2em;
   position: relative;
}

/*罫線の設定*/
.note li {
   border-bottom: dashed 1px #ccc; /*罫線の設定*/
   line-height: 1.5;
   padding: 0.5em 0 0.5em 1.5em;
   margin:0;
   list-style-type:none;
}

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

/*ドットの設定*/
.note::before {
   content: "";
   position: absolute;
   border-right: dotted 10px #ddd; /*ドットの設定*/
   height:90%;
   top:0.5em;
   left:0.5em;
}

/*チェックアイコンの設定*/
.note li::after {
   font-family: FontAwesome;
   content: "\f00c"; /*アイコンの設定*/
   color: #fdbf64; /*色の設定*/
   position: absolute;
   left : 2em;
}

CSSコード解説

外枠の設定

.note {
   margin: 0;
   border: solid 2px #999; /*外枠の設定*/
   padding: 0 2em;
   position: relative;
}

border: solid 2px #999;/*外枠の設定*/の部分が外枠の設定です。

solidが線の種類の設定、2pxの部分が線の太さの設定、#999の部分が色の設定です。

罫線の設定

/*罫線の設定*/
.note li {
   border-bottom: dashed 1px #ccc; /*罫線の設定*/
   line-height: 1.5;
   padding: 0.5em 0 0.5em 1.5em;
   margin:0;
   list-style-type:none;
}

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

border-bottom: dashed 1px #ccc;/*罫線の設定*/の部分が罫線の設定です。

dashedが線の種類の設定、1pxの部分が罫線の太さ、#cccの部分が色の設定です。

ドットの設定

/*ドットの設定*/
.note::before {
   content: "";
   position: absolute;
   border-right: dotted 10px #ddd; /*ドットの設定*/
   height:90%;
   top:0.5em;
   left:0.5em;
}

左側のドット（ルーズリーフの穴）の設定です。

border-right: dotted 10px #ddd;/*ドットの設定*/の部分で、ドットの色と大きさを設定しています。

dottedの部分でドットを作っています。ここは値を変えてしまうとルーズリーフっぽくなくなってしまうので、変えないでください。

10pxの部分がドットの大きさの設定、#dddの部分が色の設定です。

チェックアイコンの設定

/*チェックアイコンの設定*/
.note li::after {
   font-family: FontAwesome;
   content: "\f00c"; /*アイコンの設定*/
   color: #fdbf64; /*色の設定*/
   position: absolute;
   left : 2em;
}

チェックアイコンはアイコンフォント「FontAwesome4.7」（旧バージョン）を使用しています。FontAwesomeについては、サルワカさんの記事が参考になります。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

content: “\f00c”; /*アイコンの設定*/でアイコンの種類の設定、color: #fdbf64; /*色の設定*/でアイコンの色の設定をしています。

アイコンを別のものに変えたい場合は、「ものぐさWEBノート」さんの記事からアイコンを探すと楽です。

FontAwesome4.7のアイコンをクリックでコピーできる一覧表【日本語検索対応】

注意点

箇条書きのリスト用です。
環境によって、ドットが四角く表示されます。

記事の目次など、階層があるリストには向きません。表示が崩れます。

iPhone/Safariで表示した場合、画像のようにドット部分が四角く表示されます。

他のブラウザやOSでも、四角く表示されるかもしれません。

お揃いのボックス、見出しデザインもあります！

【CSSカスタマイズ】ルーズリーフ風（ノート風）ボックス

【CSSカスタマイズ】かわいくて個性的な見出し

同じデザインのボックスと、上側にドットが表示される見出しのCSSコードも紹介しています。

ぜひお揃いで使ってください。