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

< 新しい記事

新着記事一覧(全372件)

過去の記事 >

2005.05.24

スタイルシート（23）

(2)

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

カテゴリ：【実験中】

ボックスの構成の基本

スタイルシート>>基本>>ボックス>>パッディング
////////////////////////////////////////////////////////////////////

【マージンとパッディングの違いは？】
マージンは周りの要素との距離の設定であり、もしマージンが無い、もしくは設定が"0"であれば当該要素と境界線(ボーダー)が接しているほかの要素がぴったりくっついてしまいます。
パッディングは境界線(ボーダー)とコンテンツ(要素=内容)との間の距離を設定します。もしパッディングが無ければ、もしくは設定が"0"であればコンテンツ(要素=内容)である文章や画像などのまわりの境界線(ボーダー)とぴったりくっついてしまいます。
※もしパッディングを適度に設定しない場合は文字と枠がくっつくわけですから、非常に読みにくくなりますよね（＞＜）

パッディングの部分は'background'関連が反映する場所になります。
つまり、よく見かける文字や画像の周りの背景色や背景画像などが設定されているのはこの部分なのです。

background-color: ***; ボックスの背景に色を付ける
background-image: url(***); ボックスの背景に画像を使う
background-repeat: ***; 背景画像の並び方を指定する
background-position: ***; 背景画像の表示位置を指定する
background-attachment: fixed; 背景画像をスクロールさせない
background: ***; 背景の設定をひとまとめに行う

【ボックスのイメージ】

【margin-top】

【margin-left】

余白（margin）

境界（border）

↑
詰め物 【padding-top】
↓

←【padding-left】→

コンテンツ

←【padding-right】→

↑
【padding-bottom】
↓

この部分は透明だと思ってください(透過)

【margin-right】

【margin-bottom】

パッディングの設定もマージとまったく同じように設定できます。

【パッディングの単位】

「相対値指定の単位、em、ex、px」「絶対値指定の単位、in、cm、mm、pt、pc」
□percentage（パーセンテージの指定）
「当該ボックスを包含する包含ブロックの幅を 100% とする比率で計算します」
□auto（ブラウザに依存します）

【パッディングの設定方法】

□padding-top: 5px;
□padding-right: 10px;
□padding-bottom: 15px;
□padding-left: 20px;

2.）パッディングをまとめて設定できます。ただし以下の4つの方法が考えられます。
□padding: 2px; … ［上下左右］を指定
□padding: 2px 4px; … ［上下］と［左右］を指定
□padding: 2px 4px 6px; … ［上］と［左右］と［下］を指定
□padding: 2px 4px 6px 8px; … ［上］と［右］と［下］と［左］を指定

▲直接指定の記述方法
<p style="background-color: #85B9E9; padding-top: 20px; padding-bottom: 10px; ">上に20px、下に10pxのパッディング< /p>
<p style="background-color: #85B9E9; padding-right: 60px; padding-left: 80px; ">右に60px、左に80pxのパッディング< /p>
<p style="background-color: #85B9E9; padding: 50px; ">上下左右に50pxのパッディング< /p>
↓こんな感じですね（＾＾）

上に20px、下に10pxのパッディング

右に60px、左に80pxのパッディング

上下左右に50pxのパッディング

※文字と周りの境界までの幅に注意して見てください！

▲CSS本来の記述方法(楽天ではできませんが、本来はbodyに指定して壁紙を設定するなどが一番多い使い道です)
<style type="text/css">

</style>

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

【庶事所感】
東京は夕べ突然の大雨でした「バケツをひっくり返した」とはよく言ったもので、そんな表現がぴったり（＞＜）
インターネットの天気予報もっと細かく情報提供してくださるサイトはないのかなぁ･･･

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

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