CSS HTML 初心者 勉強中。

CSS HTML 初心者です。備忘録的メモです。

HTMLで文章を四角で囲みたい。いろんなパターン編。

f:id:mikanusagi:20180504150209p:plain

四角で囲みたいシリーズ、第2弾。

前回は、タイプ別の枠について書きましたが…

今日はいくつかパターンを作ってみます。

黄色枠の中をコピペしてHTML編集ができるシートに貼ったら、枠がつきます。 

 

 

原型。

 

前回出てきたものをまとめると…

<div style="padding: px;

margin-bottom: px;

border: px solid #;

color: #;

background-color: #;

width: px;

border-radius: px;"> 

ここに文字 </div> 

ここに適当に好きな数を入れます。いらないものは空白のままでOK。

これをHTMLに貼れば、枠が簡単にできます。

※border: solid;  枠線を実線に。
 border: dotted;  枠線を点線に。
 border: dashed;   枠線を破線に。
 border: double;  枠線を二重線に。

※タグに関する説明は、前回記事をご参考ください。

  

その1.実線、線幅 3px、まわり10px、枠のまわり 10px

 

  実線、線幅 3px、まわり10px、枠のまわり 10px 

 

<div style="padding: 10px; border: 3px solid; margin: 10px;"> ここに文字 </div>

 

 

 

その2.少し淡い黒枠、点線、線幅 1px、まわり10px、角丸 10px、枠のまわり 10px

 

 少し淡い黒枠、点線、線幅 1px、まわり10px、角丸 10px、枠のまわり 10px 

 

<div style="padding: 10px; border: 1px dotted; #333333;

border-radius: 10px; margin: 10px;"> ここに文字 </div> 

 

 

 

その3.黄緑枠、破線、線幅2px、まわり10px 

 

 黄緑枠、破線、線幅2px、まわり10px 

 

<div style="padding: 10px; border: 2px dashed #CCFF00;"> ここに文字 </div> 

 

 

その4.枠なし、まわり10px

 

 枠なし、背景きみどり、まわり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>

  

 

 

▶ カラーコードについては、こちらに書いています。 

 

▶ ステッチ風、見出しネタを参考にさせて頂きました。

  かわいい見出しデザイン、ステキです。

 

 

それでは、このへんで。(*'▽')/