テンプレートとアクセスアップのでめらら楽天日記

< 新しい記事

新着記事一覧(全372件)

過去の記事 >

2005.05.26

スタイルシート（25）

(6)

テーマ：アクセス向上(301)

カテゴリ：【実験中】

ボックスの構成の基本

スタイルシート>>基本>>ボックス>>マージン、パッディング、ボーダーまとめ
////////////////////////////////////////////////////////////////////
ボックスの装飾方法であるマージン、パッディング、ボーダーのまとめです。
それぞれが指定されるとどんな効果が現れるかを比較してみるとわかりやすいと思います。
※余白などの比較のため背景色を#85B9E9に指定してあります。

1.)マージン「余白」のみ指定

<div style=" margin: 50px;">
■margin: 50px;
マージン「余白」は上下左右50pxずつ空けます。
■padding:

■border:
ボーダー「境界線＝枠」は指定していません。
</div>
↓こんな感じですね（＾＾）

■margin: 50px;
マージン「余白」は上下左右50pxずつ空けます。
■padding:
パッディング「詰め物」は指定していません。
■border:
ボーダー「境界線＝枠」は指定していません。

2.)マージン「余白」+ パッディング「詰め物」を指定

<div style=" margin: 50px; padding: 30px; background-color: #F0E68C;">
■margin: 50px;
マージン「余白」は上下左右50pxずつ空けます。
■padding: 30px;
パッディング「詰め物」の幅は上下左右30pxずつです。
background-color: #F0E68C;
詰め物の色は#F0E68Cです。
■border:
ボーダー「境界線＝枠」は指定していません。
</div>

■margin: 50px;
マージン「余白」は上下左右30pxずつ空けます。
■padding: 30px;
パッディング「詰め物」の幅は上下左右30pxずつです。
background-color: #F0E68C;
詰め物の色は#F0E68Cです。
■border:
ボーダー「境界線＝枠」は指定していません。

3.)マージン「余白」+ パッディング「詰め物」+ボーダー「境界線＝枠」すべてを指定

<div style=" margin: 50px; padding: 30px; background-color: #F0E68C; border: thick solid #FFB6C1;">
■margin: 50px;
マージン「余白」は上下左右50pxずつ空けます。
■padding: 30px;

background-color: #F0E68C;
詰め物の色は#F0E68Cです。
■border: thick solid #FFB6C1;
ボーダー「境界線＝枠」の太さはthick種類はsolid色は#FFB6C1です。
</div>
↓こんな感じですね（＾＾）

■margin: 50px;
マージン「余白」は上下左右50pxずつ空けます。
■padding: 30px;
パッディング「詰め物」の幅は上下左右30pxずつです。
background-color: #F0E68C;
詰め物の色は#F0E68Cです。
■border: thick solid #FFB6C1;
ボーダー「境界線＝枠」の太さはthick種類はsolid色は#FFB6C1です。

4.）応用例

<p style=" margin: 25px; padding: 30px; background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/39.gif); border: thin dotted blue;">
<a href="http://pt.afl.rakuten.co.jp/c/001098f8.be52e715/?url=http%3a%2f%2fwww.rakuten.co.jp%2fplazahamada%2f452275%2f456012%2f486321%2f553626%2f%23643159" target="_blank">
<img src="http://image.rakuten.co.jp/wshop/data/ws-mall-img/plazahamada/img64/img10231554010.jpeg" border=0 alt="●浜田省吾 “光と影の季節”CD（2005/4/13）" align="left">
</a>
「光と影の季節」ビデオクリップフルコーラス公開！パソコンのCD-ROMドライブに「光と影の季節」（SECL-180）の＜CD＞を入れて、以下の「ConnecteDで映像を見る」のボタンをクリックして次ぎのページにアクセスすると、ビデオクリップのフルコーラスをご覧いただけます。

※コンテンツに画像と文章を書き入れてみました。
■margin: 25px;
マージン「余白」は上下左右25pxずつ空けます。
■padding: 30px;
パッディング「詰め物」の幅は上下左右30pxずつです。
background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/39.gif);
詰め物は画像を指定しました。
■border: thin dotted blue;
ボーダー「境界線＝枠」の太さはthin種類はdotted色はblueです。
</p>
↓こんな感じですね（＾＾）

「光と影の季節」ビデオクリップフルコーラス公開！パソコンのCD-ROMドライブに「光と影の季節」（SECL-180）の＜CD＞を入れて、以下の「ConnecteDで映像を見る」のボタンをクリックして次ぎのページにアクセスすると、ビデオクリップのフルコーラスをご覧いただけます。

※コンテンツに画像と文章を書き入れてみました。
■margin: 25px;
マージン「余白」は上下左右25pxずつ空けます。
■padding: 30px;
パッディング「詰め物」の幅は上下左右30pxずつです。
background-image: url(http://plaza.rakuten.co.jp/img/user/99/06/4429906/39.gif);
詰め物は画像を指定しました。
■border: thin dotted blue;
ボーダー「境界線＝枠」の太さはthin種類はdotted色はblueです。

▲CSS本来の記述方法(楽天ではできません)
<style type="text/css">

</style>

*****************************************************

【庶事所感】
「たまごっちプラス」というものが売れているそうです。
売上上位の5位くらいまでを占めているではないですか（☆o☆）すごい！
しかし・・・この商品、むかしのたまごっちの改良品！？？
ヤバイ！！わたくし何が面白いのかがわかりません・・・

*****************************************************

なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ