こんにちは！
今回は、ウェブサイトやブログに簡単に追加できるノート風デザインのボックスを紹介します。
テープで貼り付けたようなデザインや、方眼紙風の背景を使ったデザインが簡単に実装できます。
コピペでOK！ ですので、ぜひお試しください。

目次

  1. テープ風デザインのボックス
  2. テープ風デザインのコード
    1. HTML
    2. CSS
  3. 方眼紙風デザインのボックス
  4. 方眼紙風デザインのコード
    1. HTML
    2. CSS

デザインの特徴

テープ風デザインのボックス

このデザインは、テープで貼り付けたような見た目が特徴です。立体的で可愛らしい雰囲気があり、注目を集めること間違いなしです。

テープ風デザインの例
メモ

このボックスは、テープで貼り付けたようなデザインです。立体的な効果により、視覚的に目立つ要素として利用できます。可愛らしい雰囲気が特徴です。

コードの紹介

テープ風デザインのコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テープ風デザインの例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="tape">
    <span>メモ</span>
    <p>このボックスは、テープで貼り付けたようなデザインです。立体的な効果により、視覚的に目立つ要素として利用できます。可愛らしい雰囲気が特徴です。</p>
</div>

</body>
</html>

CSS

.tape {
    position: relative;
    max-width: 400px;
    margin: 1.5em auto;
    padding: 2.5em 1.5em 1.5em;
    box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
    background-color: #e0efff;
    color: #333333;
}

.tape span {
    position: absolute;
    top: -15px;
    transform: translateX(-.3em) rotate(-5deg);
    padding: .5em 2em;
    border-right: 2px dotted rgb(0 0 0 / 10%);
    border-left: 2px dotted rgb(0 0 0 / 10%);
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    background-color: rgb(255 255 255 / 40%);
    font-weight: 600;
}

.tape p {
    margin: 0;
}

方眼紙風デザインのボックス

方眼紙風の背景を持つこのデザインは、ノートのような印象を与えます。特にかわいい系のウェブサイトと相性が良く、背景が白以外の箇所で使用するとさらに効果的です。

方眼紙風デザインの例
背景が方眼紙風のボックスです。ノートのようなデザインで、かわいい系のウェブサイトにぴったりです。特に、背景が白以外の場所で使用すると効果的です。

方眼紙風デザインのコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方眼紙風デザインの例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="graph">
    背景が方眼紙風のボックスです。ノートのようなデザインで、かわいい系のウェブサイトにぴったりです。特に、背景が白以外の場所で使用すると効果的です。
</div>

</body>
</html>

CSS

.graph {
    max-width: 400px;
    margin: 0 auto;
    padding: 1em 1.5em;
    box-shadow: 0 4px 4px rgb(0 0 0 / 5%), 0 2px 3px -2px rgb(0 0 0 / 1%);
    background-image: linear-gradient(transparent calc(100% - 1px), #e6edf3 50%, #e6edf3), linear-gradient(90deg, transparent calc(100% - 1px), #e6edf3 50%, #e6edf3);
    background-size: 15px 15px;
    background-repeat: repeat;
    background-color: #ffffff;
    color: #333333;
}

使い方

  1. 上記のHTMLコードをコピーし、あなたのHTMLファイルにペーストします。
  2. 上記のCSSコードをコピーし、あなたのCSSファイルにペーストします。
  3. 必要に応じて内容をカスタマイズします。

以上で、テープ風デザインと方眼紙風デザインのボックスが簡単に実装できます！ぜひ試してみてください。