文字数に合わせてサイズが変わるターコイズブルー枠線

 


ターコイズブルーの枠線です。

文字数に合わせてサイズが変わります。

  • シンプルな枠線
  • 角丸枠線
  • タイトル付き枠線
  • タイトル付き角丸枠線があります。

 

文字数に合わせてサイズが変わる枠線

 

実　線：solid

 

<div style="display:inline-block; border: 2px solid #00AFCC; padding: 15px;">本文はここに入力してください。
改行はShift+Enterで！</div>

 

 

二重線：double

 

<div style="display:inline-block; border: 4px double #00AFCC; padding: 15px;">本文はここに入力してください。
改行はShift+Enterで！</div>

 

 

点　線：dotted

 

<div style="display:inline-block; border: 2px dotted #00AFCC; padding: 15px;">本文はここに入力してください。
改行はShift+Enterで！</div>

 

 

破　線：dashed

 

<div style="display:inline-block; border: 2px dashed #00AFCC; padding: 15px;">本文はここに入力してください。
改行はShift+Enterで！</div>

 

 

文字数に合わせてサイズが変わる角丸枠線

 

実　線：solid

 

<div style="display:inline-block; border: 2px solid #00AFCC; padding: 15px; border-radius: 10px;">本文はここに入力してください。
改行はShift+Enterで！</div>

 

 

二重線：double

 

<div style="display:inline-block; border: 4px double #00AFCC; padding: 15px; border-radius: 10px;">本文はここに入力してください。
改行はShift+Enterで！</div>

 

 

点　線：dotted

 

<div style="display:inline-block; border: 2px dotted #00AFCC; padding: 15px; border-radius: 10px;">本文はここに入力してください。
改行はShift+Enterで！</div>

 

 

破　線：dashed

 

<div style="display:inline-block; border: 2px dashed #00AFCC; padding: 15px; border-radius: 10px;">本文はここに入力してください。
改行はShift+Enterで！</div>

 

 

文字数に合わせてサイズが変わるタイトルつき枠線

 

　タイトル　実　線：solid

 

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

 

 

　タイトル　二重線：double

 

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

 

 

　タイトル　点　線：dotted

 

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

 

 

　タイトル　破　線：dashed

 

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

 

文字数に合わせてサイズが変わるタイトルつき角丸枠線

 

　タイトル　実　線：solid

 

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

 

 

　タイトル　二重線：double

 

<fieldset style="display:inline-block; border:4px double #00AFCC; padding:15px; border-radius: 10px;"><legend>　タイトル　</legend>本文はここに入力してください。
改行はShift+Enterで！</fieldset>

 

 

　タイトル　点　線：dotted

 

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

 

 

　タイトル　破　線：dashed

 

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

 

 

 

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

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

友だち追加

ID検索は @570smkow 

 

 

デザインとブログアドバイスで 起業女性をサポートしています。

 

◆ あなたの魅力があふれるブログに⇒ アメブロカスタマイズ

◆ 書きやすく伝わりやすいブログに⇒ ブログ診断

◆ ランディングページやホームページの制作もしています。

 

お問合せ⇒お問合せフォーム