【CSSカスタマイズ】ルーズリーフ風リスト(箇条書き)

CSSカスタマイズ ルーズリーフ風リストWEB

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

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

サンプル画像

ソースコード

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については、サルワカさんの記事が参考になります。

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

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

注意点

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

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

iPhone/Safariのスクリーンショット

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

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

お揃いの見出しデザインもあります。

上側にドットが表示される、お揃いの見出しデザインのCSSを、こちらの記事で紹介しています。

コメント

タイトルとURLをコピーしました