【HTML】囲み枠

囲み枠のタグ。

タグ：<legend>　</fieldset>

説明：

(例)<fieldset style="border: 2px solid #00a3af;">あいうえお</fieldset>

・borderは枠線の種類、太さ、色を指定する

・枠線の種類

実践： solid
二重線： double
点線： dotted
破線： dashed

・borderの太さは、pxなどの数値で指定する方法と、キーワードで指定する方法があります。キーワードは次の3つです。

1. thin（細い）
2. medium（標準）
3. thick（太い）

・カラー

borderの色は、RGBやRGBAでも指定できるけど、カラーコードかカラーネームのほうが楽かな

1. カラーコード（#ffffffなど）
2. カラーネーム（whiteなど）

・シンプル

ここに文字を入れる

<fieldset>ここに文字を入れる</fieldset>

・実践：solid

ここに文字を入れる

<fieldset style="border: 1px solid #FF0000;">ここに文字を入れる</fieldset>

・二重線： double

ここに文字を入れる

<fieldset style="border:4px double #00afcc;">ここに文字を入れる</fieldset>

・点線：dotted

ここに文字を入れる

<fieldset style="border: 2px dotted #66cc99;">ここに文字を入れる</fieldset>

・太くした点線

ここに文字を入れる

<fieldset style=" border: thick dotted #dc143c;">ここに文字を入れる</fieldset>

・破線：dashed

ここに文字を入れる

<fieldset style="border: 1px dashed #ec6800;">ここに文字を入れる</fieldset>

・太くした破線

ここに文字を入れる

<fieldset style="border: thick dashed #00bfff;">ここに文字を入れる</fieldset>

borderのスタイルで枠線を非表示：(none)にするやり方もあるんだ。

それと、文字の位置をpaddingで調整してみたよ。

・枠線 非表示

ここに文字を入れる

<fieldset style="background:#ffccdf; padding:10px; border:none;">ここに文字を入れる</fieldset>

・角を丸くする：border-radius

ここに文字を入れる

<fieldset style="padding:10px;border-radius: 5px;border: 2px dotted #ff8989;">ここに文字を入れる</fieldset>

・角の丸い枠線と背景：background＋border-radius＋solid

ここに文字を入れる

<fieldset style="background:#ede4e1; padding:10px; border-radius:10px; border:2px solid #ff8fa4;">ここに文字を入れる</fieldset>
 

・影付き囲み枠：margin＋box-shadow

ここに文字を入れる

<fieldset style="padding: 10px; margin: 15px auto; color: #333333;border: 1px solid #cccccc; box-shadow: 4px 4px 8px #dddddd;">ここに文字を入れる</fieldset>

・付箋枠：border-left(solid)

ここに文字を入れる

<fieldset style="  padding: 0.5em 1em;   margin: 1em 0;    background: #f5f3f3;    border-left: solid 6px #e18aa9;    box-shadow: 4px 4px 8px #dddddd ;">ここに文字を入れる</fieldset>

border-left(solid)

solidのところを、dashed、太くするなら1rem solid、二重線ならdoubleに変えればok

・ぼかし枠(box-shadowno)

ここに文字を入れる

<div style="padding:10px; margin: 15px; background: #fce6f0; box-shadow: #fce6f0 0 0 10px 10px;">ここに文字を入れる</div>

・ふきだし

ここに文字を入れる

<div style="padding:10px;background:#DABFAC;margin-bottom:0px; border-radius:5px; font-weight:bold;font-weight:bold; color:#ffffff;">ここに文字を入れる</div>
<div style="width:0px;height:0px;border-style: solid;border-width: 10px 10px 0 10px;border-color: #DABFAC transparent transparent transparent;margin-left:30px;margin-bottom:20px;">&nbsp;</div>

オススメ

アメブロの「記事デザイン→デザイン → テキスト」を選んで写真付きのふきだし、これは良いです。テキストの種類も豊富。

・カラー＋白文字

ここに文字を入れる

<fieldset style="background:#f98289; border:4px double #ffffff; border-radius:10px;font-size: 100%; padding: 20px;"><span style="color:#ffffff;">ここに文字を入れる</span></fieldset>

・スケッチ風(margin: 50px)

ここに文字を入れる

<div style="padding: 10px; margin: 50px; background-color: #FFC7C7; box-shadow: 0 0 0 8px #FFC7C7; border: 2px dashed #FFFFFF; border-radius: 1px; color: #555555;">ここに文字を入れる</div>

・ 井形の囲み枠(赤）

ここに文字を入れる。

<div style="margin:1em auto;padding:20px;background-size:2px 2px;background-position:9px 0,0 9px,right 9px top 0,left 0 bottom 9px;background-repeat:repeat-y,repeat-x,repeat-y,repeat-x;background-image:linear-gradient(#f00,#f00),linear-gradient(#f00,#f00),linear-gradient(#f00,#f00),linear-gradient(#f00,#f00);">ここに文字を入れる。</div>

・ カギ括弧風の囲み枠(赤)

ここに文字を入れる

<div style="margin:1em auto;padding:20px;background-repeat:no-repeat;background-position:left top,left top,right bottom,right bottom;background-size:40px 3px,3px 40px,40px 3px,3px 40px;background-image:linear-gradient(#f00,#f00),linear-gradient(#f00,#f00),linear-gradient(#f00,#f00),linear-gradient(#f00,#f00);">ここに文字を入れる</div>

・ 括弧風の囲み枠(赤)

ここに文字を入れる

<div style="margin:1em 10px;padding:10px 20px;border-radius:20px/50%;border-style:solid;border-width:0 3px;border-color:#f00">ここに文字を入れる</div>