今回もおしゃれな囲み枠を使ってみました。 参考にした記事はこちら！ 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編集の画面に貼り付けます。 そうするとこうなります。 「文…