【コピペで完成】手帳デコ用トリコロール素材集！マステ・シール・メモ帳のHTMLコード配布

manao

ねえGemini、手帳ブログのデコレーションに使えるトリコロールカラーの素材が欲しいんだけど、HTMLでパッと使えるものって作れる？

Gemini

もちろんです、manaoさん！フランス国旗のような青・白・赤の配色は清潔感があって素敵ですよね。今回は、コピペしてサイズも自由に変えられる魔法のコード素材を用意しました。

manao

コード素材なら画像がボケないし、読み込みも早くていいよね。マステやシール、背景がトリコロールのメモ帳も作れるかな？

Gemini

お任せください！リアルなちぎり跡を再現したマステや、全部盛りデコのメモ帳まで、スマホ表示も完璧なレスポンシブコードをたっぷり紹介しますね！

こちらが完成したメモ帳のプレビューです。

▼ このコードをコピーして使う

<div class="tricolore-memo-container">
    <div class="tricolore-tape">
        <div class="tape-blue"></div>
        <div class="tape-white"></div>
        <div class="tape-red"></div>
   </div>
    <div class="tricolore-memo-paper">
        <div class="memo-header-slot"></div>
        <div class="tricolore-memo-content">ここに内容を入力</div>
   </div>
</div>

<style>
.tricolore-memo-container { position: relative; width: 100%; max-width: 350px; margin: 20px auto; filter: drop-shadow(0 8px 15px rgba(0,0,0,0.08)); }
.tricolore-tape { position: absolute; top: -15px; left: 50%; transform: translateX(-50%) rotate(-1deg); width: 60%; height: 35px; z-index: 10; display: flex; clip-path: polygon(0% 0%, 100% 0%, 98% 5%, 100% 12%, 97% 18%, 99% 25%, 96% 33%, 100% 40%, 97% 48%, 99% 55%, 96% 62%, 100% 70%, 97% 78%, 99% 85%, 97% 93%, 100% 100%, 0% 100%, 3% 95%, 0% 88%, 3% 82%, 1% 75%, 4% 68%, 0% 60%, 3% 52%, 1% 45%, 4% 38%, 0% 30%, 3% 22%, 1% 15%, 3% 8%); }
.tape-blue { flex: 1; background: rgba(0,85,164,0.8); }
.tape-white { flex: 1; background: rgba(255,255,255,0.9); border: 0.1px solid #eee; }
.tape-red { flex: 1; background: rgba(239,65,53,0.8); }
.tricolore-memo-paper { background: #fff; background-image: radial-gradient(#dee2e6 1.2px, transparent 1.2px); background-size: 20px 20px; padding: 50px 25px 30px; border: 1px solid #eee; border-radius: 4px; }
.memo-header-slot { width: 80px; height: 18px; background: #f8f9fa; border-radius: 3px; margin-bottom: 15px; }
.tricolore-memo-content { color: #444; line-height: 1.6; word-break: break-all; }
</style>

付箋（リボン）のプレビュー

▼ コードをコピーして使う

<div class="tricolore-ribbon">
    <div class="ribbon-b"></div><div class="ribbon-w"></div><div class="ribbon-r"></div>
</div>

<style>
.tricolore-ribbon { display: flex; width: 120px; height: 30px; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.1)); }
.ribbon-b { flex: 1; background: #0055A4; }
.ribbon-w { flex: 1; background: #FFFFFF; border-top: 0.1px solid #eee; border-bottom: 0.1px solid #eee; }
.ribbon-r { flex: 1; background: #EF4135; }
</style>

丸型シールのプレビュー

▼ コードをコピーして使う

<div class="tricolore-sticker">
    <div class="sticker-b"></div><div class="sticker-w"></div><div class="sticker-r"></div>
</div>

<style>
.tricolore-sticker { display: flex; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 1px solid #eee; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.sticker-b { flex: 1; background: #0055A4; }
.sticker-w { flex: 1; background: #FFFFFF; }
.sticker-r { flex: 1; background: #EF4135; }
</style>

薄いトリコロール背景メモ帳のプレビュー

背景に薄く青・白・赤のトリコロールを敷いています。文字が読みやすいよう、淡いトーンで調整されています。

▼ このコードをコピーして使う

<div class="tricolore-bg-memo">
    <div class="tricolore-bg-paper">
        <div class="memo-header-slot"></div>
        <div class="tricolore-memo-content">ここに内容を入力</div>
   </div>
</div>

<style>
.tricolore-bg-memo {
    width: 100%;
    max-width: 350px;
    margin: 20px auto;
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.08));
}
.tricolore-bg-paper {
    /* 薄いトリコロールの背景グラデーション */
    background: linear-gradient(90deg, 
        rgba(0, 85, 164, 0.05) 0%, 
        rgba(0, 85, 164, 0.05) 33.3%, 
        rgba(255, 255, 255, 0.1) 33.3%, 
        rgba(255, 255, 255, 0.1) 66.6%, 
        rgba(239, 65, 53, 0.05) 66.6%, 
        rgba(239, 65, 53, 0.05) 100%
    ), #ffffff;
    padding: 30px 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    min-height: 150px;
}
.memo-header-slot { width: 60px; height: 10px; background: rgba(0,0,0,0.05); margin-bottom: 15px; border-radius: 2px; }
.tricolore-memo-content { color: #444; line-height: 1.6; font-size: 0.95rem; word-break: break-all; }
</style>

丸型シール付きメモ帳のプレビュー

グレーの日付欄をなくし、左上に丸型シールを配置しました。背景には薄いトリコロールカラーが敷かれています。

▼ このコードをコピーして使う

<div class="sticker-memo-bg">
    <div class="sticker-memo-paper">
        <div class="memo-sticker">
            <div class="st-b"></div><div class="st-w"></div><div class="st-r"></div>
       </div>
        <div class="memo-content">ここに内容を入力</div>
   </div>
</div>

<style>
.sticker-memo-bg { width: 100%; max-width: 350px; margin: 20px auto; filter: drop-shadow(0 8px 15px rgba(0,0,0,0.08)); }
.sticker-memo-paper {
    position: relative;
    background: linear-gradient(90deg, rgba(0,85,164,0.05) 33.3%, rgba(255,255,255,0.1) 33.3% 66.6%, rgba(239,65,53,0.05) 66.6%), #fff;
    padding: 40px 20px 30px;
    border: 1px solid #eee;
    border-radius: 8px;
    min-height: 150px;
}
.memo-sticker {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.st-b { flex: 1; background: #0055A4; }
.st-w { flex: 1; background: #fff; }
.st-r { flex: 1; background: #EF4135; }
.memo-content { color: #444; line-height: 1.6; font-size: 0.95rem; word-break: break-all; }
</style>

フルデコ・メモ帳のプレビュー

マステとシールを両方貼り付けた欲張りセットです。背景は変わらず薄いトリコロールで、日付欄はありません。

▼ このコードをコピーして使う

<div class="full-deco-memo">
    <div class="deco-paper">
        <div class="deco-tape">
            <div class="dt-b"></div><div class="dt-w"></div><div class="dt-r"></div>
       </div>
        <div class="deco-sticker">
            <div class="ds-b"></div><div class="ds-w"></div><div class="ds-r"></div>
       </div>
        <div class="memo-content">ここに内容を入力</div>
   </div>
</div>

<style>
.full-deco-memo { width: 100%; max-width: 350px; margin: 30px auto; filter: drop-shadow(0 8px 15px rgba(0,0,0,0.08)); }
.deco-paper {
    position: relative;
    background: linear-gradient(90deg, rgba(0,85,164,0.05) 33.3%, rgba(255,255,255,0.1) 33.3% 66.6%, rgba(239,65,53,0.05) 66.6%), #fff;
    padding: 55px 20px 30px;
    border: 1px solid #eee;
    border-radius: 8px;
    min-height: 150px;
}
/* マステスタイル */
.deco-tape {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    width: 50%;
    height: 30px;
    display: flex;
    z-index: 10;
    clip-path: polygon(0% 0%, 100% 0%, 98% 5%, 100% 12%, 97% 18%, 99% 25%, 96% 33%, 100% 40%, 97% 48%, 99% 55%, 96% 62%, 100% 70%, 97% 78%, 99% 85%, 97% 93%, 100% 100%, 0% 100%, 3% 95%, 0% 88%, 3% 82%, 1% 75%, 4% 68%, 0% 60%, 3% 52%, 1% 45%, 4% 38%, 0% 30%, 3% 22%, 1% 15%, 3% 8%);
}
.dt-b { flex: 1; background: rgba(0,85,164,0.85); }
.dt-w { flex: 1; background: rgba(255,255,255,0.9); }
.dt-r { flex: 1; background: rgba(239,65,53,0.85); }
/* シールスタイル */
.deco-sticker {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
}
.ds-b { flex: 1; background: #0055A4; }
.ds-w { flex: 1; background: #fff; }
.ds-r { flex: 1; background: #EF4135; }
.memo-content { color: #444; line-height: 1.6; font-size: 0.95rem; word-break: break-all; }
</style>

manao

わあ、全部並べるとすごく可愛い！特に全部盛りのメモ帳は、これだけで記事のアイキャッチや図解にも使えそう。

Gemini

喜んでいただけて嬉しいです。WordPressの枠からはみ出さないよう対策済みですので、安心して貼り付けていただけますよ。

manao

ありがとう！読者の皆さんも、気に入った素材があったらぜひワンクリックでコピーして使ってみてね！