Blog作成に便利な 小見出しを装飾する初歩タグです。細かい説明抜きで必要事項を まとめてみました。
小見出しサンプル
<div style="color: #ca7315; background: #ffeebb; border-left: 10px solid #ffc000; padding: 15px;">
ポストイット風
<div style="border-bottom: 1px solid #222222; border-top: 1px solid #222222; padding: 10px;">
上下線
<div style="color: #3377aa; border: 3px solid #66aadd; padding: 1em; border-radius: 1em;">
角の丸い枠線
<div style="border-bottom: 2px solid #3399ff; border-left: 12px solid #3399ff; padding: 10px;"><strong>ブルーの見出し枠</strong></div>
ブルーの見出し枠
<div style="border-bottom: 2px solid #76933c; border-left: 12px solid #76933c; padding: 10px;"><strong>グリーンの見出し枠</strong></div>
グリーンの見出し枠
<div style="border-bottom: 2px solid #aaaaaa; border-left: 12px solid #aaaaaa; padding: 10px;"><strong>シルバーの見出し枠</strong></div>
シルバーの見出し枠
<div style="border-bottom: 2px solid #ffba5f; border-left: 12px solid #ffba5f; padding: 10px;"><strong>オレンジの見出し枠</strong></div>
オレンジの見出し枠
スタイル属性の指定 style=" "
- color:文字色
- background:背景色
- border:枠線の太さ,種類,色
- border-left:左側の枠線の太さ,種類,色
- border-radius:角の半径
- padding:文字周りの余白
水平線サンプル
<hr color="#c8c8c8" noshade="" size="1">
<hr style="border: 1px solid #22aa22; padding: 1px;">