今回は縦ストライプのレンガ壁風背景を作ってみました。 赤レンガの壁風 <div style="background: repeating-linear-gradient(90deg, #b22222, #b22222 20px, #8b0000 20px, #8b0000 40px), repeating-linear-gradient(0deg, #b22222, #b22222 20px, #8b0000 20px, #8b0000 40px); background-size: 40px 40px; padding: 20px;"></div>

もうすぐバレンタイン！ということでチョコレート風飾り枠を作ってみました 板チョコ風飾り枠

今回は２重線を使った囲み枠を作ってみました！ ２重線と点線の組み合わせ ピンク <div style="border-top: 5px double #ffb6c1; border-bottom: 5px double #ffb6c1; border-left: 3px dashed #ff69b4; border-right: 3px dashed #ff69b4; padding: 20px; text-align: center;">パステルカラーのかわいい枠です</div> パステルカラーのかわいい枠です ミント

今回は夢をイメージした囲み枠を作ってみました。 青空の夢枠 <div style="border: 5px dashed #add8e6; background-color: #f0f8ff; padding: 20px; font-size: 20px; text-align: center;">☁️🌙✨ あなたの夢が叶いますように ✨🌙☁️</div><div> </div> ☁️🌙✨ あなたの夢が叶いますように ✨🌙☁️ 水色と夜空の絵文字で夢の世界を表現した囲み枠。 虹の夢枠

今回は手書き風メモの囲み枠を作ってみました！ <div style="background-color: #FFFFE0; padding: 20px; border: 2px dashed #A52A2A; width: 300px; position: relative;"> <p>📝 手書き風メモ：重要なメモや注釈をここに書きます。</p> </div>

今回はパーティをイメージした囲み枠を作ってみました！ 華やかなパーティ風 クラッカーと風船 <div style="border: 4px solid #ff69b4; border-radius: 15px; padding: 20px; background: linear-gradient(to right, #f39c12, #f1c40f, #ff69b4); color: #ffffff; position: relative;"> </div>

今回はChatGPTを使ってポストイット風の囲い枠を作ってみました。 <div style="background-color: #fffbcc; border: 2px solid #ffd700; width: 300px; padding: 15px; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); position: relative; margin: 20px;"> <p style="margin: 0; padding: 0;">ここにメモを入力してください。ポストイット風の囲い枠で、重要なポイントを…</p></div>

今回は額縁風のおしゃれな囲み枠を作ってみたいと思います。 谷型の枠（groove） 山型の枠（ridge） 立体的な枠（outset） 山型枠ピンク系 山型枠水色系 山型枠黄色系 外枠色違い黄色系 参考にした記事はこちら。 0forest.com 枠の外側の色を変えると額縁の…

今回はシックな囲み枠を作ってみたいと思います。 参考にした記事はこちら。 www.sapporo-sfc.xyz ステッチ風シックな囲み枠 ２重線シックな囲み枠 単線のシックな囲み枠 ステッチ風シックな囲み枠 <div style="margin: 15px 5px; padding: 10px; color: #333333; background: #dfdfdf; box-shadow: 0 0 0 5px #dfdfdf; border: dashed 2px #fefefe;">ここに本文</div> ここに本文

今回はステッチ風の囲み枠をカラフルに作ってみたいと思います。 参考にした記事はこちら！ www.sapporo-sfc.xyz ステッチ風のカラフルな囲み枠 ピンク系 <div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 15px 5px; padding: 10px; color: #333333; background: #ff69b4; box-shadow: 0 0 0 5px #ff69b4; border: dashed 2px #d8bfd8;">ここに本文</div> ここに本文 青系

テキスト今回はChatGPTで囲み枠を作ってとお願いしたらどんなものができるのか試してみました！ 「かわいい囲み枠を２つ作って」とお願いしたところ、できたのがこれ。 <div style="border: 2px solid #ff66b2; padding: 15px; border-radius: 10px; background-color: #fff5f8;"> <p style="margin: 0; color: #ff66b2; font-weight: bold;">この枠は、可愛らしいピンクの囲み枠です。</p> </div> この枠は、可愛らしいピンクの囲み枠です…

今回はかわいい見出しデザインを使ってみたいと思います。 参考にした記事はこちら！ blog.minimal-green.com たてストライプの付箋風 <div style="font-size: 140%; border-left: 5px solid #77B8DA; padding: .5em 0 .5em .75em; background: repeating-linear-gradient(90deg, #edf5f4, #edf5f4 10px, #f6faf9 0, #f6faf9 20px);">ここに文章</div> このコードをHTML編集画面に貼り付けるとこうなります↓…

今回は横長タイトル付き囲み枠を使ってみたいと思います。 参考にした記事はこちら！ www.fuji-blo.com 横長タイトル付き囲み枠 <div style="padding: 20px 20px 10px; margin: 2em 0; background: #e4f3ff;"><div style=" margin: -20px -20px 10px; font-size: 1.2em; padding: 4px 10px; text-align: center; background: #3f51b5;font-weight: bold; color: #ffffff;">タイトル…</div></div>

今回も見出しに使えそうなおしゃれな囲み枠を使ってみます。 参考にした記事はこちら！ maysun53.com 囲み枠２重線 文字黒 枠は２重線、文字は黒です。 <div style="background: #F7F7F7; border: 4px double #A1A1A1; box-shadow: 0 0 0 10px #F7F7F7; padding: 10px;">ここに文章を入力します</div> このコードをHTML編集画面に貼り付けるとこうなります。↓ ここに文章を入力しま…

今回は囲い枠作りの基本をまとめたいと思います。 基本の枠 １．直線の四角い枠 <div style="padding: 10px; border: 3px solid #e3acae; background: #fef9fb;">ここに文章</div> このコードをHTML編集画面に貼り付けるとこうなります↓ ここに文章 padding: 10px 余白 border: 3px solid #e3acae 線の太さ、種類、色 background: #f8f4e6 背景の…

今回は見出しにも使える囲み枠を使ってみたいと思います。 参考にした記事はこちら！ www.moca-memo.com ふせん風囲み枠 ピンク系 黄色系 緑系 紫系 水色系 ふせん風囲み枠 <div style="border: #ffb6c1 solid 1px; border-left: #ffb6c1 solid 10px; padding: 20px; background: #fff; font-size: 100%;"> ここに本文を入れます♪</div> このコードをHTML編集画面に貼り付けるとこうなります。↓ …

今回は文章の長さに合わせて伸び縮みする囲み枠を使ってみたいと思います。 参考にした記事はこちら！ www.atelier-sunko.info これまでのシンプルな囲い枠はこんな感じで文章に関係なく大きさは一定でした。 本文を入れる でもこれだと文章が短いときはなん…

今回はタイトル付き囲み枠を使ってみたいと思います。 参考にした記事はこちら！ www.fuji-blo.com 枠なしタイトルつき囲み枠 <div style="position: relative; padding: 1em 1em .5em; margin: 2em 0; border: solid 3px #b5b5b5; background: #ffffff;"> </div>

今回はふんわりした雰囲気の囲み枠を使ってみたいと思います。 参考にした記事はこちら！ 0forest.com 白い線のステッチ風 <div style="border:2px dashed #ffffff;background-color:#f8edeb;box-shadow:0 0 0 6px #f8edeb;padding:16px;margin:20px;">テキストを入力</div> このコードをHTML編集画面に貼り付けるとこうなります。↓ テキストを入力 背景の色をふんわり系にして、枠の線を白に…

今回もおしゃれな囲み枠を探してみました。 参考にした記事はこちら！ maysun53.com 囲み枠２重線 文字白 文字を白抜きにして枠を２重線にします。 <div style="background: #696969; padding: 15px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;"><p><strong><span style="color: #ffffff;">文章を入れます◯◯◯</span></strong></p></div> このコードをHTML編集画面に貼り付けるとこ…

今回もおしゃれな囲み枠を使ってみました。 参考にした記事はこちら！ maysun53.com １．ノーマルメモ帳風 メモ帳風囲み枠のコードはこちら。 いったんメモ帳にコピーしてから使ったほうがよいようです。 <div style="display: inline-block; background: #F7F7F7; padding: 15px 15px 25px 15px; border: 1px solid #a1a1a1;"><div style="border-bottom: dashed 1px #A1A1A1; margin-bottom: 5px;"><strong>文章</strong></div></div>

今回は少し凝ったおしゃれな囲み枠を使ってみたいと思います。 <div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 15px 5px; padding: 10px; color: #333333; background: #ffe0f0; box-shadow: 0 0 0 5px #ffe0f0; border: dashed 2px #ffffff;">ここに本文</div> このコードをHTML編集画面にはりつけます。 そうするとこうなります。 ここに本文 色を変えてみます。 #ffe0f0の部分を変えていきます。 #ff…

シンプルな直線の囲い枠のバリエーションを作ってみます。 <div style="background: #fff; padding: 10px; border: 5px solid #c6c6c6;">本文を入れる</div> このコードをHTML編集画面に貼り付けるとこうなります。 本文を入れる 「solid」の部分を変えて線を変えていきます。 「dashed」破線にすると 本文を入れる 「groove」立体的な谷型の…

囲み枠も素敵なものがたくさん作られていてどれを使おうか迷うほどです。 まずはシンプルな囲み枠を使ってみます。 シンプルな直線の囲み枠 <div style="background:#fff; padding:10px; border:2px solid #FFC0CB;">本文を入れる</div> このコードをHTML編集画面に貼り付けるとこうなります。 本文を入れる 線の太さは「2」の部分を変えれ…