ブロック要素で背景色と枠線を付ける | 圧倒的な作業効率と差別化を生み出す!~EFFICIENTアフィリエイト~

ブロック要素で背景色と枠線を付ける

ブロック要素で特定の部分に背景色や枠線を付ける設定を記載しております。

サンプル

■サンプル1

テキストテキスト
テキストテキスト
テキストテキスト

↑これは以下のタグで表示されます↓

<div style="background: #EFEFEF; width:630px; border: 1px solid #CC0000; height:100%; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;">テキストテキスト
テキストテキスト
テキストテキスト
</div>

■サンプル2

テキストテキスト
テキストテキスト
テキストテキスト

↑これは以下のタグで表示されます↓

<div style="background: #FFFACD; width:630px; border: 1px solid #D3D3D3; height:100%; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;">
テキストテキスト
テキストテキスト
テキストテキスト
</div>

■サンプル3

テキストテキスト
テキストテキスト
テキストテキスト

↑これは以下のタグで表示されます↓

<div style="background: #FFFFFF; width:630px; border: 2px dashed #CC0000; height:100%; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;">
テキストテキスト
テキストテキスト
テキストテキスト
</div>

上記サンプルのブロック要素は
以下で説明する各属性値の組みあわせで再現されています^^

タグの構成と組み合わせ

■background: #FFFFFF;

これはボックスの背景色を指示しています。
お好きなカラーコードに書き換えることで自由に背景色を変えることが出来ます。

背景カラーコードサンプル:#FFB6C1

<div style="background: #FFB6C1; width:630px; border: 1px solid #CC0000; height:100%; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;">テキストテキスト
テキストテキスト
テキストテキスト
</div>

背景カラーコードサンプル:#CCCCFF

<div style="background: #CCCCFF; width:630px; border: 1px solid #CC0000; height:100%; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;">テキストテキスト
テキストテキスト
テキストテキスト
</div>

■width:630px;

これはボックスの横幅を指示しています。
pxの値を変えることで大きさを変更できます^^

ボックス幅サンプル:width:630px;

<div style="background: #EFEFEF; width:630px; border: 1px solid #CC0000; height:100%; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;">テキストテキスト
テキストテキスト
テキストテキスト
</div>

ボックス幅サンプル:width:400px;

<div style="background: #EFEFEF; width:400px; border: 1px solid #CC0000; height:100%; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;">テキストテキスト
テキストテキスト
テキストテキスト
</div>

■border: 1px solid #CC0000;

これはボックスの枠線の太さと色を指示しています。
pxの値を変えることで枠線の大きさ、
カラーコードを変えることで枠線の色を変更できます^^

枠線サンプル:border: 5px solid #3333CC;

<div style="background: #EFEFEF; width:630px; border: 5px solid #3333CC; height:100%; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;">テキストテキスト
テキストテキスト
テキストテキスト
</div>

枠線サンプル:border: 10px solid #FFFF00;

<div style="background: #EFEFEF; width:630px; border: 10px solid #FFFF00; height:100%; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;">テキストテキスト
テキストテキスト
テキストテキスト
</div>

■padding

これはボックスとテキストとの余白を指示しています^^

padding-left:10px;   
padding-right:10px;
padding-top:10px;
padding-bottom:10px;

枠線のタイプ例

■double

<div style="background: #FFFFFF; width:630px; border: 5px double #CC0000; height:100%; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;">
テキストテキスト
テキストテキスト
テキストテキスト
</div>

■groove

<div style="background: #FFFFFF; width:630px; border: 5px groove #CC0000; height:100%; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;">
テキストテキスト
テキストテキスト
テキストテキスト
</div>

■ridge

<div style="background: #FFFFFF; width:630px; border: 5px ridge #CC0000; height:100%; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;">
テキストテキスト
テキストテキスト
テキストテキスト
</div>

■outset

<div style="background: #FFFFFF; width:630px; border: 5px outset #CC0000; height:100%; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;">
テキストテキスト
テキストテキスト
テキストテキスト
</div>

■inset

<div style="background: #FFFFFF; width:630px; border: 5px inset #CC0000; height:100%; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;">
テキストテキスト
テキストテキスト
テキストテキスト
</div>

■dotted

<div style="background: #FFFFFF; width:630px; border: 2px dotted #CC0000; height:100%; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;">
テキストテキスト
テキストテキスト
テキストテキスト
</div>

■dotted

<div style="background: #FFFFFF; width:630px; border: 2px dashed #CC0000; height:100%; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;">
テキストテキスト
テキストテキスト
テキストテキスト
</div>
  • Yahoo!ブックマークに登録する
  • はてなブックマークに登録する
  • livedoorクリップに登録する
  • newsingブックマークに登録する
  • del.icio.usブックマークに登録する
  • ニフティクリップに登録する
  • RSSを購読する
  • このページをブックマーク!

次の記事 »
前の記事 »
トップページへ » 圧倒的な作業効率と差別化を生み出す!~EFFICIENTアフィリエイト~

お問い合わせはこちらからどうぞ

圧倒的な作業効率と差別化を生み出す!~EFFICIENTアフィリエイト~ TOP » ブロック要素<div>タグの活用 » ブロック要素で背景色と枠線を付ける