四角で囲みたいシリーズ、第2弾。
今日はいくつかパターンを作ってみます。
黄色枠の中をコピペしてHTML編集ができるシートに貼ったら、枠がつきます。
- 原型。
- その１．実線、線幅 3px、まわり10px、枠のまわり 10px
- その２．少し淡い黒枠、点線、線幅 1px、まわり10px、角丸 10px、枠のまわり 10px
- その３．黄緑枠、破線、線幅２px、まわり10px
- その４．枠なし、まわり10px
原型。
前回出てきたものをまとめると…
<div style="padding: px;
margin-bottom: px;
border: px solid #;
color: #;
background-color: #;
width: px;
border-radius: px;">
ここに文字 </div>
ここに適当に好きな数を入れます。いらないものは空白のままでＯＫ。
これをHTMLに貼れば、枠が簡単にできます。
※border: solid; 枠線を実線に。
border: dotted; 枠線を点線に。
border: dashed; 枠線を破線に。
border: double; 枠線を二重線に。
※タグに関する説明は、前回記事をご参考ください。
その１．実線、線幅 3px、まわり10px、枠のまわり 10px
<div style="padding: 10px; border: 3px solid; margin: 10px;"> ここに文字 </div>
その２．少し淡い黒枠、点線、線幅 1px、まわり10px、角丸 10px、枠のまわり 10px
<div style="padding: 10px; border: 1px dotted; #333333;
border-radius: 10px; margin: 10px;"> ここに文字 </div>
その３．黄緑枠、破線、線幅２px、まわり10px
<div style="padding: 10px; border: 2px dashed #CCFF00;"> ここに文字 </div>
おまけ
<div style="padding: 10px; border: 2px dashed #CCFF00; background-color: #eeffcc;"> ここに文字 </div>
その４．枠なし、まわり10px
<div style="padding: 10px; background-color: #CCFF00; "> ここに文字 </div>
応用編：box-shadowが使えるなら。。ステッチ風。
これが使えないケースもあるかもですが…
<div style="padding: 10px;background-color: #CCFF00; box-shadow: 0 0 0 10px #CCFF00;
border: 3px dashed #FFFFFF; border-radius: 10px;"> ここに文字 </div>
▶ カラーコードについては、こちらに書いています。
▶ ステッチ風、見出しネタを参考にさせて頂きました。
かわいい見出しデザイン、ステキです。
それでは、このへんで。(*'▽')/
