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

ボックスをルーズリーフ風デザイン（ノート風デザイン）にする、CSSコードの紹介です。

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

ソースコード
補足と注意点
<p>タグではなく<div>タグで使いたい場合
お揃いの見出しとリストもあります

ソースコード

HTML

<div class="note-box">
  <p>文章をここにいれます。</p>
  <p>文章をここにいれます。</p>
  <p>文章をここにいれます。</p>
</div>

CSS

/***　ルーズリーフ風ボックス　***/
/*外枠の設定*/
.note-box {
   border: solid 2px #999; /*外枠の線*/
   padding: 0 1em 0 2em; /*内側の余白*/
   position: relative;
}

/*文字、罫線の設定*/
.note-box p {
   border-bottom: dashed 1px #ccc; /*罫線*/
   line-height: 1.5; /*行の高さ*/
   padding: 0.5em 0 0.5em 0.5em; /*文字の位置*/
   margin:0;
}
.note-box p:last-of-type {
   border-bottom: none;
}

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

コード解説

外枠の設定

/*外枠の設定*/
.note-box {
   border: solid 2px #999; /*外枠の線*/
   padding: 0 1em 0 2em; /*内側の余白*/
   position: relative;
}

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

solid：線の種類
2px：太さ
#999：色

罫線の設定

/*文字、罫線の設定*/
.note-box p {
   border-bottom: dashed 1px #ccc; /*罫線*/
   line-height: 1.5; /*行の高さ*/
   padding: 0.5em 0 0.5em 0.5em; /*文字の位置*/
   margin:0;
}
.note-box p:last-of-type {
   border-bottom: none;
}

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

dashed：線の種類
1px：太さ
#ccc：色

ドットの設定

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

dottedの部分でドットを作っています。ここを変えるとルーズリーフの特徴である、穴がなくなってしまいます。

#dddの色は、背景に合わせて色を変えてください。

dotted：線の種類（ルーズリーフのドットを表現）
10px：ドットの大きさ
#ddd：色

top:0.5em;とleft:0.5em;でドットの位置を調整できます。

補足と注意点

環境によって、ドットが四角く表示されます。

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

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

<p>タグで罫線を表示しています。

ボックス内に入れる文章は<p>で囲って下さい。<p>タグを使わないと罫線が表示されません。

<p>タグではなく<div>タグで使いたい場合

<div>タグ用のコードを表示

<div class="note-box">
  <div>文章をここにいれます。</div>
  <div>文章をここにいれます。</div>
  <div>文章をここにいれます。</div>
</div>

/***　ルーズリーフ風ボックス　***/
/*外枠の設定*/
.note-box {
   border: solid 2px #999; /*外枠の線*/
   padding: 0 1em 0 2em; /*内側の余白*/
   position: relative;
}

/*文字、罫線の設定*/
.note-box div {
   border-bottom: dashed 1px #ccc; /*罫線*/
   line-height: 1.5; /*行の高さ*/
   padding: 0.5em 0 0.5em 0.5em; /*文字の位置*/
   margin:0;
}
.note-box div:last-of-type {
   border-bottom: none;
}

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

罫線は段落（<p>タグ）で表示していますが、<div>タグでも利用できます。使いやすい方を利用してください。

お揃いの見出しとリストもあります

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

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

お揃いのルーズリーフ風の見出しデザインと、リストデザインもあります。

ぜひお揃いのデザインで使って下さい。