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

CSSカスタマイズ ルーズリーフ風ボックスのイメージWEB

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

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

CSSでルーズリーフ風にボックスを表示させています

ソースコード

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; /*位置*/
}

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

  • dotted:線の種類(ルーズリーフのドットを表現)
  • 10px:ドットの大きさ
  • #ddd:色

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

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

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

補足

注意点

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

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

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

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

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

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

罫線は段落(<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; /*位置*/
}

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

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

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

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

さる子
さる子

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

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

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

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

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

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

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

コメント

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