文字に合わせた囲み枠の作り方♡

囲み枠の幅を小さくしたい

枠の中の余白を消して見やすくしたい

そんな時は

display:inline-block; 

で解決できます♡

▼横幅いっぱいに枠がある状態▼

<div style="background:#fff; padding:10px; border:1px solid #F4B0BA;">
<div style="margin:0;"><span style="background-color: rgb(255, 255, 255);">★★</span></div></div>
 

★★

display:inline-block; を追加すると

▼文字数に応じて横幅調節▼

<div style="display:inline-block; background:#fff; padding:10px; border:1px solid #F4B0BA;">
<div style="margin:0;"><span style="background-color: rgb(255, 255, 255);">★★</span></div></div>
 

★★

<div style="の後ろに追加します♡

divではない場合もありますが

枠のHTML文頭

<〇〇 style="の後ろに

display:inline-block;

を、追加すればいいだけ♡

コピペで使える

自動調節の囲み枠

いろんなバージョンでそろえているので

使ってみてください♡

『【文字数に合わせた囲み枠】四角形囲み枠１０選』

ブログを魅力的に魅せるお役立ち記事

【改行で線が増えない♡】四角形囲み枠１０選

大人可愛いお申込みボタン１２種♡

簡単♡スマホヘッダーの設置方法

ヘッダー設置方法♡

ハッシュタグを透明化♡

おすすめ囲み枠・お申込みボタン・マーカーライン

LINE公式メニューを設置する方法♡

写真が見切れてる!?原因と対処法

✎.....ღ

読んでくれてありがとう♡

起業女性サポートをしています

下のメニューもぜひ見てね　▾

ご案内MENU一覧

継続サポート ▶サポート詳細
デザイン作成 ▶MENU内容・料金
毎月開催！    ▶Ameba認定Q&Aセミナー

お客様ご感想    ▶お客様の声

 お問い合わせはこちら ▶

お客様のご感想

▸アラカン女性のかっこいい涙ありの生き様

▸アクセス倍！テクニックだけじゃない大切なこと

▸申し込みフォームから動画作りまで全て網羅♡

▸本当のファン作りをしたい方に受けてもらいたい

▸1人で頑張る繊細さんにオススメしたいサポート♡

▸無理にポジティブ変換しなくていいんだよ♡

▸内側の黒〜いものが全部 流れ出た♡

▸辛くなってできなかった起業コンサル。