2005.05.23
テーマ： アクセス向上(301)
カテゴリ： 【実験中】
ボックスの構成の基本
スタイルシート>>基本>>ボックス>>マージン
////////////////////////////////////////////////////////////////////
○コンテンツ：HTMLで書かれたテキスト(文書)はホームページやブログなどのwebページの「核」の部分になります。
○要素：コンテンツの中のテキスト(文書)は要素の集合体だと言えます。つまりここがwebページの「内容」そのものになります。
○ボックス：この「核」を中心にしたひとかたまりをスタイルでは「ボックス」ととらえます。
ボックスのデザイン・配置・イメージを決める設定のための基礎知識は、コンテンツ(内容)部分を取巻く、マージン、パッディング、ボーダーの3点を抑えておくことだと思います。
●マージン （他の要素たちとの余白の部分。背景は常に透明で、ページ全体の基本設定(親要素)の背景などが透過します）
●パッディング （要素のまわりにすき間をつくるか作らないかなど、ボーダー線などと要素であるコンテンツをぴったりくっつけるのもここの値）⇒'background'関連
●コンテンツ （内容には、単純なテキスト、画像などの置換内容、その代替テキストなどが考えられます）
【ボックスのイメージ】
【マージンの単位】
□length（単位数値の指定）
「相対値指定の単位、em: フォントの大きさ 'font-size' を 1 、ex: 小文字の高さ 'x-height' を 1、px: ピクセル。解像度に依存してサイズが決定」
「絶対値指定の単位 、in: インチ=2.54 cm、cm: センチメートル、mm: ミリメートル、pt: ポイント=1/72 インチ、pc: パイカ=12 ポイント」
□percentage（パーセンテージの指定）
「当該ボックスを包含する包含ブロックの幅を 100% とする比率で計算します」
□auto（ブラウザに依存します）
1.）マージンを上下左右に個別に設定することが出来ます。
□margin-top: 5px;
□margin-right: 10px;
□margin-bottom: 15px;
□margin-left: 20px;
□margin: 2px; … ［上下左右］ を指定
□margin: 2px 4px; … ［上下］ と ［左右］ を指定
□margin: 2px 4px 6px; … ［上］ と ［左右］ と ［下］ を指定
□margin: 2px 4px 6px 8px; … ［上］ と ［右］ と ［下］ と ［左］ を指定
【マージンの相殺】
個別の要素にこのマージンを設定できるわけですが、たとえば＜ｐ1＞の要素のボックスと＜ｐ2＞の要素のボックスが上下にあった場合に
＜ｐ1＞の要素のボックスには下の部分に1em分のマージンが設定されています
↓ margin-bottom: 1em;
↑ margin-top: 2em;
＜ｐ2＞の要素のボックスには上の部分に2em分のマージンが設定されています
この場合双方のマージンが1em分重複しますので1em分は相殺されて実質2emのマージンとなります。
▲直接指定の記述方法
<p style="background-color: #85B9E9; margin-top: 20px; margin-bottom: 10px; ">上に20px、下に10pxのマージン< /p>
<p style="background-color: #85B9E9; margin-right: 60px; margin-left: 80px; ">右に60px、左に80pxのマージン< /p>
<p style="background-color: #85B9E9; margin: 50px; ">上下左右に50pxのマージン< /p>
↓こんな感じですね（＾＾）
▲CSS本来の記述方法(楽天ではできませんが、本来はbodyに指定して壁紙を設定するなどが一番多い使い道です)
<style type="text/css">
<!--
p
{
margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}
-->
</style>
*****************************************************
【庶事所感】
時間帯でとってもインターネットが動かなくなってくることが多くなりました。
きっとインターネット人口が急激に増えているのでしょう（＞＜）
それとも･･･わたくしのマシーンが脆弱なだけ？？？
金曜日の夜はすごかったなぁ（ToT）
*****************************************************
なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
スタイルシート>>基本>>ボックス>>マージン
////////////////////////////////////////////////////////////////////
○コンテンツ：HTMLで書かれたテキスト(文書)はホームページやブログなどのwebページの「核」の部分になります。
○要素：コンテンツの中のテキスト(文書)は要素の集合体だと言えます。つまりここがwebページの「内容」そのものになります。
○ボックス：この「核」を中心にしたひとかたまりをスタイルでは「ボックス」ととらえます。
ボックスのデザイン・配置・イメージを決める設定のための基礎知識は、コンテンツ(内容)部分を取巻く、マージン、パッディング、ボーダーの3点を抑えておくことだと思います。
●マージン （他の要素たちとの余白の部分。背景は常に透明で、ページ全体の基本設定(親要素)の背景などが透過します）
●パッディング （要素のまわりにすき間をつくるか作らないかなど、ボーダー線などと要素であるコンテンツをぴったりくっつけるのもここの値）⇒'background'関連
●コンテンツ （内容には、単純なテキスト、画像などの置換内容、その代替テキストなどが考えられます）
【ボックスのイメージ】
【margin-top】
【margin-left】
余白
（margin）
この部分は透明だと思ってください(透過)
境界（border）
詰め物（padding）
コンテンツ
【margin-right】
【margin-bottom】
【マージンの単位】
□length（単位数値の指定）
「相対値指定の単位、em: フォントの大きさ 'font-size' を 1 、ex: 小文字の高さ 'x-height' を 1、px: ピクセル。解像度に依存してサイズが決定」
「絶対値指定の単位 、in: インチ=2.54 cm、cm: センチメートル、mm: ミリメートル、pt: ポイント=1/72 インチ、pc: パイカ=12 ポイント」
□percentage（パーセンテージの指定）
「当該ボックスを包含する包含ブロックの幅を 100% とする比率で計算します」
□auto（ブラウザに依存します）
1.）マージンを上下左右に個別に設定することが出来ます。
□margin-top: 5px;
□margin-right: 10px;
□margin-bottom: 15px;
□margin-left: 20px;
□margin: 2px; … ［上下左右］ を指定
□margin: 2px 4px; … ［上下］ と ［左右］ を指定
□margin: 2px 4px 6px; … ［上］ と ［左右］ と ［下］ を指定
□margin: 2px 4px 6px 8px; … ［上］ と ［右］ と ［下］ と ［左］ を指定
【マージンの相殺】
個別の要素にこのマージンを設定できるわけですが、たとえば＜ｐ1＞の要素のボックスと＜ｐ2＞の要素のボックスが上下にあった場合に
＜ｐ1＞の要素のボックスには下の部分に1em分のマージンが設定されています
↓ margin-bottom: 1em;
↑ margin-top: 2em;
＜ｐ2＞の要素のボックスには上の部分に2em分のマージンが設定されています
この場合双方のマージンが1em分重複しますので1em分は相殺されて実質2emのマージンとなります。
▲直接指定の記述方法
<p style="background-color: #85B9E9; margin-top: 20px; margin-bottom: 10px; ">上に20px、下に10pxのマージン< /p>
<p style="background-color: #85B9E9; margin-right: 60px; margin-left: 80px; ">右に60px、左に80pxのマージン< /p>
<p style="background-color: #85B9E9; margin: 50px; ">上下左右に50pxのマージン< /p>
↓こんな感じですね（＾＾）
上に20px、下に10pxのマージン
右に60px、左に80pxのマージン
上下左右に50pxのマージン
▲CSS本来の記述方法(楽天ではできませんが、本来はbodyに指定して壁紙を設定するなどが一番多い使い道です)
<style type="text/css">
<!--
p
{
margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}
-->
</style>
*****************************************************
【庶事所感】
時間帯でとってもインターネットが動かなくなってくることが多くなりました。
きっとインターネット人口が急激に増えているのでしょう（＞＜）
それとも･･･わたくしのマシーンが脆弱なだけ？？？
金曜日の夜はすごかったなぁ（ToT）
*****************************************************
なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
お気に入りの記事を「いいね！」で応援しよう
[【実験中】] カテゴリの最新記事
-
fontバリエーション(2) 2005.08.26 コメント(11)
-
スタイル一覧（後編） 2005.06.19 コメント(165)
【毎日開催】
15記事にいいね！で1ポイント
PR
Keyword Search
▼キーワード検索
Category
カテゴリ未分類
(96)【blog基本とマナー】
(8)【サイト作りの基礎】
(87)【テンプレート】
(49)【検索エンジンの理解】
(18)【検索エンジンに登録】
(5)【楽天広場のサイト】
(11)【アフィリエイト】
(12)【便利ツール】
(10)【実験中】
(76)Comments
© Rakuten Group, Inc.
