文字数でサイズが変わる囲み枠が

小さすぎる!と思うことはありませんか?

 

 

今回は、

囲み枠の枠線のデザインはそのままに

幅を変更する方法をご紹介します。

 

画面幅いっぱいの囲み枠にする方法

 

文字数が少ないと

こんな感じになってしまう囲み枠><

↓ ↓ ↓

 

 タイトル 本文

 

これは文字数に合わせて

サイズが変わるように

下のピンクのタグが入っているから!

 

<fieldset style="display:inline-block; border: 2px solid #7F007F; padding: 15px;"><legend> タイトル </legend>本文はここに入力してください。 改行はShift+Enterで!</fieldset>

 

このdisplay:inline-block; を削除すると…

 

 

こうなります

↓ ↓ ↓

<fieldset style="border: 2px solid #7F007F; padding: 15px;"><legend> タイトル </legend>本文はここに入力してください。 改行はShift+Enterで!</fieldset>

 

 タイトル 画面幅いっぱいに変わりました!

 

 

 

 

 

LINEの友だち追加で
「アメブロで使えるかわいいマーカー」
をプレゼントしています!

「マーカー」とメッセージを送ってね
ドキドキ

友だち追加

ID検索は @570smkow