【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カスタマイズ】ルーズリーフ風（ノート風）箇条書きリスト

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

ぜひお揃いのデザインでブログなどで使って下さい。

カスタマイズしたブログを紹介させてください！

さる子

紹介しているカスタマイズを使ったら、ぜひ教えてください！

当ブログで紹介しているカスタマイズを行ったブログや記事を、当ブログで紹介させて下さい。カスタマイズ記事からリンクさせていただきます。

当ブログで紹介しているカスタマイズを参考にしたことが分かるようにしてください。カスタマイズを行ったページやブログ案内のページなどから、当ブログのカスタマイズ記事かブログトップページへリンクを貼って下さい。

コメント欄やツイッターのリプライ、問い合わせから、カスタマイズしたページのURLをお知らせ下さい。

年齢関係なく誰でもアクセスできるWEBページという性質上、年齢制限があるサイトへのリンクを控えさせていただきます。ご了承下さい。

その他、ブログの内容によってはリンクを控えさせていただく可能性があります。（レンタルサーバーなどの規約違反をしているブログなど。）

パスワードなどが必要な閲覧制限があるサイトもご遠慮ください。一部ページのみ閲覧制限ありで、カスタマイズした箇所が誰でも見れる場合はOKです。