ボックスをルーズリーフ風デザイン(ノート風デザイン)にする、CSSコードの紹介です。
コードをコピペして、サイトやブログで使っていただいてOKです。

ソースコード
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>タグではなく<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>タグでも利用できます。使いやすい方を利用してください。
お揃いの見出しとリストもあります
お揃いのルーズリーフ風の見出しデザインと、リストデザインもあります。
ぜひお揃いのデザインで使って下さい。
コメント