ブログ記事を書くにあたって、わかりやすいように囲み線で囲みたいと思っています。囲み線をhtmlタグでできるように調べました。
【htmlで記述】囲み線の作り方
【基本タグ】
[padding: 10px;]
→ paddingは、枠の内側の余白です。これは、10px内側に余白を入れています。
[margin-bottom: 10px;]
→ marginは、枠の外側の余白です。margin-bottomだと、枠の下の余白です。
[border: 1px dotted #FF0000;]
→ borderは、線の指定です。これは、線の太さ1px、線の種類がdotted、線の色が#FF0000となります。
（線の種類）
・solid…直線
・dotted…点線
・dashed…破線
・double…二重線
・groove…くぼみ線
・ridge…隆起線
[border-radius: ５px;]
→ border-radiusは、角丸指定。角丸の半径が5pxとなります。
※[border-radius:10px 0 10px 0;]とすると、左上、右上、右下、左下の順に角丸の半径を変更することができます。0は、角丸なしの意味です。
[background-color: #FFFF00;]
→ background-colorは、背景色の指定です。
[color: #000080;]
→ colorは、文字色の指定です。
【htmlで記述】囲み線の幅を調節する方法
1.囲み枠の幅を枠内のテキストの長さに自動調整して表示させる方法
[display:inline-block;]をstyle=””に入れる。
2.特定の幅にしたい場合
<div style=”width:300px;”>～</div>で囲む。
【htmlで記述】中央寄せ、左寄せ、右寄せ
・中央寄せ <div align=”center”>～</div>
・左寄せ <div align=”left”>～</div>
・右寄せ <div align=”right”>～</div>
にほんブログ村 人気ブログランキング （←参加中、応援お願いします。）
