2005.05.26
テーマ： アクセス向上(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>
↓こんな感じですね（＾＾）
▲CSS本来の記述方法(楽天ではできません)
<style type="text/css">
<!--
p
{
margin: 50px;
padding: 50px;
background-color: #F0E68C;
border: thick solid #FFB6C1;
}
-->
</style>
*****************************************************
【庶事所感】
「たまごっちプラス」というものが売れているそうです。
売上上位の5位くらいまでを占めているではないですか（☆o☆）すごい！
しかし・・・この商品、むかしのたまごっちの改良品！？？
ヤバイ！！わたくし何が面白いのかがわかりません・・・
*****************************************************
なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
スタイルシート>>基本>>ボックス>>マージン、パッディング、ボーダーまとめ
////////////////////////////////////////////////////////////////////
ボックスの装飾方法であるマージン、パッディング、ボーダーのまとめです。
それぞれが指定されるとどんな効果が現れるかを比較してみるとわかりやすいと思います。
※余白などの比較のため背景色を#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">
<!--
p
{
margin: 50px;
padding: 50px;
background-color: #F0E68C;
border: thick solid #FFB6C1;
}
-->
</style>
*****************************************************
【庶事所感】
「たまごっちプラス」というものが売れているそうです。
売上上位の5位くらいまでを占めているではないですか（☆o☆）すごい！
しかし・・・この商品、むかしのたまごっちの改良品！？？
ヤバイ！！わたくし何が面白いのかがわかりません・・・
*****************************************************
なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
お気に入りの記事を「いいね！」で応援しよう
[【実験中】] カテゴリの最新記事
-
fontバリエーション(2) 2005.08.26 コメント(11)
-
スタイル一覧（後編） 2005.06.19 コメント(165)
すばらしいですね
TAXI-DRIVER
さん
Re:すばらしいですね(05/26)
でめらら58
さん
TAXI-DRIVERさん
-----
こんにちは（＾＾）コメントありがとうございます♪
なんだか回りくどい説明になってしまっているのではないかと少々反省しております（＞＜）
ボキャブラリーが貧困なところが出ちゃってますよね（;大汗）
いろいろ試してみてくださいね（＾＾）
(2005.05.26 12:05:08)
-----
こんにちは（＾＾）コメントありがとうございます♪
なんだか回りくどい説明になってしまっているのではないかと少々反省しております（＞＜）
ボキャブラリーが貧困なところが出ちゃってますよね（;大汗）
いろいろ試してみてくださいね（＾＾）
(2005.05.26 12:05:08)
Re:スタイルシート（25）(05/26)
jasmintea7
さん
こんばんは！
最近すっかり内容が難しくてコメントを残せないでいます。すみませんm(_ _)m
たまごっち、やっぱりチビは好きですね。
でもすぐあきちゃうみたいですよ～(^^; ....
でめららさんはもう花粉症も抜けて体調は良くなられました？？ (2005.05.26 22:43:13)
最近すっかり内容が難しくてコメントを残せないでいます。すみませんm(_ _)m
たまごっち、やっぱりチビは好きですね。
でもすぐあきちゃうみたいですよ～(^^; ....
でめららさんはもう花粉症も抜けて体調は良くなられました？？ (2005.05.26 22:43:13)
Re[1]:スタイルシート（25）(05/26)
でめらら58
さん
jasmintea7さん
-----
こんにちは（＾＾）コメントありがとうございます♪
ごめんなさいね（＞＜）説明がいまいち上手くできていなかった日記が続いていたと思います。
ちと精進せねば！
そうですね（＞＜）この頃のお子様は飽きるのも早いような気が・・・
ありがとうございます体調はまぁまぁ良好です（＾＾）
血圧だけはちょっと気になっているのですが（＞＜;ギャフン）
(2005.05.26 23:07:14)
-----
こんにちは（＾＾）コメントありがとうございます♪
ごめんなさいね（＞＜）説明がいまいち上手くできていなかった日記が続いていたと思います。
ちと精進せねば！
そうですね（＞＜）この頃のお子様は飽きるのも早いような気が・・・
ありがとうございます体調はまぁまぁ良好です（＾＾）
血圧だけはちょっと気になっているのですが（＞＜;ギャフン）
(2005.05.26 23:07:14)
Re[2]:スタイルシート（25）(05/26)
jasmintea7
さん
でめらら58さん
-----
でめららさんの説明のせいではありません。私の知識があまりにもないだけです。
こちらこそ精進せねば‥です。
血圧が高いのは万病の元ですからくれぐれもお気をつけ下さいね。
すべては健康あってこそですから＼(^o^)／ (2005.05.27 20:13:28)
-----
でめららさんの説明のせいではありません。私の知識があまりにもないだけです。
こちらこそ精進せねば‥です。
血圧が高いのは万病の元ですからくれぐれもお気をつけ下さいね。
すべては健康あってこそですから＼(^o^)／ (2005.05.27 20:13:28)
Re[3]:スタイルシート（25）(05/26)
でめらら58
さん
【毎日開催】
15記事にいいね！で1ポイント
PR
Keyword Search
▼キーワード検索
Category
カテゴリ未分類
(96)【blog基本とマナー】
(8)【サイト作りの基礎】
(87)【テンプレート】
(49)【検索エンジンの理解】
(18)【検索エンジンに登録】
(5)【楽天広場のサイト】
(11)【アフィリエイト】
(12)【便利ツール】
(10)【実験中】
(76)Comments
© Rakuten Group, Inc.
