今回はタイトル付き囲み枠を使ってみたいと思います。 参考にした記事はこちら！ 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」の部分を変えれ…

ただの黒いラインだけなら左上にある アンダーラインアイコン からすぐできます。 線を引きたい場所をドラッグしてアイコンをクリックでOKですね。 色付きのアンダーラインをひく場合は <span style="background: linear-gradient(transparent 60%, #afeeee 60%);">文</span> をHTML編集の画面に貼り付けます。 そうするとこうなります。 「文…