テスト用

https://www.moca-memo.com/2019/10/kakomiwaku.html

テスト
 

このタグは、簡単に折りたたみメニューを作成することができます。

なんでも含むことができます！

↑この部分をコピペして使ってください。 背景色のみ囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ふんわりぼかし囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 グレー影付き囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ２重囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ２重囲み枠（角丸） ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ２重囲み枠＋背景色 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 点線囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 破線囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ＊上記のコードでborder: 1px dashed #ffb6c1;の部分の1pxを3pxに変えるとこうなります。↓ ここに本文を入れます♪ 破線＋背景色囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ふせん風囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 太線囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 HTMLのみ＊タイトル付き囲み枠デザイン タイトル付き囲み枠デザイン① タイトル ここに本文を入れます♪ HTML

ここに本文を入れます♪

↑この部分をコピペして使ってください。 ＊上記のコードで1pxの数字を 5pxに変えると、このように枠線を太くすることができます。 タイトル ここに本文を入れます♪ タイトル付き囲み枠デザイン② ＊タイトル ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 タイトル付き囲み枠デザイン③ ＊タイトル ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 HTMLのみ＊おしゃれな囲み枠デザイン 背景色＋白枠囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 背景色＋白枠囲み枠（角丸） ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 カラー＋白文字囲み枠 ここに本文をいれます♪ HTML

ここに本文を入れます♪

↑この部分をコピペして使ってください。 ステッチ風囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ステッチ風(角丸影付き）囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 グラデーション＋立体風囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 HTMLのみ＊背景色＋ドット囲み枠デザイン 濃いピンクのドット囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 薄いピンクのドット囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 白いドット囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 白いドット囲み枠（小） ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 白いドット囲み枠（大） ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ふんわりした白いドット囲み枠（大） ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 HTMLのみ＊斜めストライプ囲み枠デザイン 太目斜めストライプ囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 中太斜めストライプ囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 細目斜めストライプ囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 極細斜めストライプ囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 吹き出し風囲み枠 ＊ご注意＊ （★2022/2/21更新） はてなブログの場合は、編集モードを「はてな記法モード」か「Markdownモード」にしてください。 ※見たままモードでは上手く表示されません。 （編集モードは「基本設定」から変更できます） 枠線の吹き出し風囲み枠 ＊左向き ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ＊左向き（文字数に合わせてサイズを変更） ★new ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ＊右向き ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ＊右向き中央寄せ ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ＊右向き右寄せ ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 左向き背景色の吹き出し風囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ＊右向き ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 上下向き背景色の吹き出し風囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ＊右下向き ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ＊右下向き右寄せ ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ＊上向き ★new ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ＊上向き（▲が中央にくるバージョン） ★new ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ＊上向き（文字数に合わせてサイズを変更） ★new ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 かわいい吹き出し風囲み枠 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 ▼文字数に合わせて囲み枠の長さを変える場合は・・・ 「 display:inline-block; 」のコードを追加します。 ここに本文を入れます♪ HTML

↑この部分をコピペして使ってください。 HTMLのみ＊囲み枠デザイン 使い方まとめ HTMLをコピペするだけで使える、かわいい囲み枠デザインをご紹介しました。 ＊色を変えたいときは、#以降の英数字（カラーコード）を変更します。カラーコードはこちらで調べられます。→WEB色見本を見る ＊文字数に合わせて囲み枠の長さを変える場合は、「