i-8jo.com（Yahoo!blog入門）

記事本文を飾り付けてみよう「（その３４）CSS超入門８」

Sun, 29 May 2005 11:03:33 +0900

　今回は、パディングを四辺を一括して設定してみましょう。一括で設定できると、文字の打ち込みも少なくて済みますので、その分文章に力を注げますね。それでは、早速始めましょう。

ボックスについてはこちらを参考にしてください。

※CSSを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

style='padding:値1 値2 値3 値4;'

値が1つの場合　→　値1が上下左右に適応される
値が2つの場合　→　値1が上下、値2が左右に適応される
値が3つの場合　→　値1が上、値2が左右、値3が下に適応される
値が4つの場合　→　値1が上、値2が右、値3が下、値4が左に適応される

という感じになります。
（それぞれの値の間には" "半角スペースが入ります。）
（今までは付けて説明しなかったのですが、今回は設定値の最初と最後に[']シングルクォーテーションが入ります。これは、間に半角スペースが入った為、付けないと上手く表示されないからです。）
（":"コロンと";"セミコロンの違いに注意！！）

テーブルに関して詳しくは
Wiki超入門１３「テーブルを表示させる方法」
Wiki超入門１４「テーブルの大きさと色を変える方法」
Wiki超入門１５「テーブル中の文字の位置を変える方法」
Wiki超入門１６「テーブルのセルを結合する方法」
をご覧ください。

それでは、実際に設定したものを見てみましょう。

■パディングの四辺を100pxにする（padding:100px;の場合）

文法）
||<#ccffff' style='padding:100px;' ``四辺がこんな感じに空白が空きます。||

※補足　分かりやすくするために、セルに色を付けています。以下も同様。

結果）
四辺がこんな感じに空白が空きます。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■パディングの上下を100px、左右を200pxにする（padding:100px 200px;の場合）

文法）
||<#ccffff' style='padding:100px 200px;' ``四辺がこんな感じに空白が空きます。||

結果）
四辺がこんな感じに空白が空きます。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■パディングの上を50px、左右を200px、下を100pxにする（padding:50px 200px 100px;の場合）

文法）
||<#ccffff' style='padding:50px 200px 100px;' ``四辺がこんな感じに空白が空きます。||

結果）
四辺がこんな感じに空白が空きます。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■パディングの上を50px、右を100px、下を150px、左を200pxにする（padding:50px 100px 150px 200px;の場合）

文法）
||<#ccffff' style='padding:50px 100px 150px 200px;' ``四辺がこんな感じに空白が空きます。||

結果）
四辺がこんな感じに空白が空きます。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

一括指定で、これくらいの自由度があるととても便利ですね。この方法は後から出てくるボーダーのスタイル、太さ、色などにも活用できますので、覚えておいてくださいね。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

[感謝]
この記事は「京都写真日記：Wiki文法を使いこなそう」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「京都写真日記：Wiki文法を使いこなそう」さんのページにて、ボタンをお願いします。
「京都写真日記：Wiki文法を使いこなそう」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

記事本文を飾り付けてみよう「（その３８）CSS超入門１２」

Sat, 28 May 2005 17:47:49 +0900

　今回は、ボーダーのを四辺バラバラに設定してみましょう。バラバラに設定しておくと、少し変わったデザインができるかも知れません。それではじめてみましょう。

ボックスについてはこちらを参考にしてください。

※CSSを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

style='borderの位置:ボーダーのスタイルボーダーの太さボーダーの色;'

ボーダーの位置
上　→　border-top
下　→　border-bottom
左　→　border-left
右　→　border-right

という感じになります。
（スタイル・太さ・色のそれぞれの間には" "半角スペースが入ります。）
（今までは付けて説明しなかったのですが、今回は設定値の最初と最後に[']シングルクォーテーションが入ります。これは、間に半角スペースが入った為、付けないと上手く表示されないからです。）
（":"コロンと";"セミコロンの違いに注意！！）

※ボーダーのスタイルと色に関しては、こちらを参考にしてください。

それでは、実際に設定したものを見てみましょう。

■ボーダー上の線を普通線、太さ10px、黄色にする（border-top:solid 10px #ffff00;の場合）

文法）
||<#ccffff' style='border-top:solid 10px #ffff00;' ``上の線のスタイルが普通線・太さが10px・色が黄色の場合||

※補足　分かりやすくするために、セルに色を付けています。以下も同様。

結果）
上の線のスタイルが普通線・太さが10px・色が黄色の場合

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーの下の線を点線、太さ2px、青色にする（border-bottom:dotted 2px #0000ff;の場合）

文法）
||<#ccffff' style='border-bottom:dotted 2px #0000ff;' ``下の線のスタイルが点線・太さが2px・色が青色の場合||

結果）
下の線のスタイルが点線・太さが2px・色が青色の場合

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーの左の線を普通線、太さ30px、緑色にする（border-left:solid 30px #00ff00;の場合）

文法）
||<#ccffff' style='border-left:solid 30px #00ff00;' ``左の線のスタイルが普通線・太さが30px・色が緑色の場合||

結果）
左の線のスタイルが普通線・太さが30px・色が緑色の場合

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーの右の線を普通線、太さ30px、赤色にする（border-right:solid 30px #ff0000;の場合）

文法）
||<#ccffff' style='border-right:solid 30px #ff0000;' ``右の線のスタイルが普通線・太さが30px・色が赤色の場合||

結果）
右の線のスタイルが普通線・太さが30px・色が赤色の場合

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

ここまでは、上手くできましたか？
これらを組み合わせると以下のようなことも出来ます。

■ボーダーの右と下の線を組みあせて設定する。

文法）
||<#ffffff' style='border-bottom:dotted 2px #0000ff;border-left:solid 30px #0000ff;' ``下と左の線の設定を組み合わせた場合||

※補足　セルに色を白に設定しています。

結果）
下と左の線の設定を組み合わせた場合

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

工夫次第でいろいろなデザインが出来ますね。素敵なデザインが出来たら教えてくださいね。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

記事本文を飾り付けてみよう「（その３７）CSS超入門１１」

Thu, 26 May 2005 06:24:05 +0900

　今回は、ボーダーのスタイル・太さ・色を一括で設定する方法を「京都写真日記：Wiki文法を使いこなそう」のSUZUTAさんに教えていただいたので、それをご紹介したいと思います。それでは早速始めましょう。

ボックスについてはこちらを参考にしてください。

※CSSを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

style='border:ボーダーのスタイルボーダーの太さボーダーの色;'

※ボーダーのスタイルと色に関しては、こちらを参考にしてください。

それでは、実際に設定したものを見てみましょう。

■ボーダーを普通線、太さ10px、黄色にする（border:solid 10px #ffff00;の場合）

文法）
||<#ccffff' style='border:solid 10px #ffff00;' ``ボーダーのスタイルが普通線・太さが10px・色が黄色の場合||

※補足　分かりやすくするために、セルに色を付けています。以下も同様。

結果）
ボーダーのスタイルが普通線・太さが10px・色が黄色の場合

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーを2本線、太さ20px、青色にする（border:double 20px #0000ff;の場合）

文法）
||<#ccffff' style='border:double 20px #0000ff;' ``ボーダーのスタイルが2本線・太さが20px・色が青色の場合||

結果）
ボーダーのスタイルが2本線・太さが20px・色が青色の場合

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーを点線、太さ30px、緑色にする（border:dotted 30px #00ff00;の場合）

文法）
||<#ccffff' style='border:dotted 30px #00ff00;' ``ボーダーのスタイルが点線・太さが30px・色が緑色の場合||

結果）
ボーダーのスタイルが点線・太さが30px・色が緑色の場合

※点線に見えませんが、、、、。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

上手くいかない場合は、[']シングルクォーテーションなどの付け忘れを確認してくださいね。一括で設定できると、とても楽ですね。是非、試してみてください。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

記事本文を飾り付けてみよう「（その３６）CSS超入門１０」

Tue, 24 May 2005 06:11:14 +0900

　今回も前回に引き続き、「ボーダー」についてご説明したいと思います。今回は太さを設定してみます。それでは早速始めましょう。

ボックスについてはこちらを参考にしてください。

※CSSを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

border:ボーダーのスタイル;border-color:ボーダーの色;border-width:ボーダーの太さ;

という感じになります。（":"コロンと";"セミコロンの違いに注意！！）

※ボーダーのスタイルと色に関しては、前回を参考にしてください。

それでは、実際に設定したものを見てみましょう。

■ボーダーの太さを10pxにする（border-width:10px;の場合）

文法）
||<#ccffff' style=border:solid;border-color:#ff0000;border-width:10px; ``ボーダーの太さが10pxの場合||

※補足　分かりやすくするために、セルとボーダーに色を付けています。また、スタイルは普通の線で表示しています。以下も同様。

結果）
ボーダーの太さが10pxの場合

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーの太さを20pxにする（border-width:20px;の場合）

文法）
||<#ccffff' style=border:solid;border-color:#ff0000;border-width:20px; ``ボーダーの太さが20pxの場合||

結果）
ボーダーの太さが20pxの場合

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーの太さを30pxにする（border-width:30px;の場合）

文法）
||<#ccffff' style=border:solid;border-color:#ff0000;border-width:30px; ``ボーダーの太さが30pxの場合||

結果）
ボーダーの太さが30pxの場合

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

今回は、簡単ですね。他のスタイルでも、太さを変えることができますので、いろいろと試して見てくださいね。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

サイトマップ

Sat, 21 May 2005 12:45:20 +0900

ようこそ、i-8jo.comへ

　このサイトは、Yahoo!blogについて初心者の方に対して分かりやすく解説しているサイトです。初めて、ブログを始める方、既に初めている方、その他多くの皆さんのお役に立てれば嬉しく思います。
　ちなみに、この情報は東京から南に約300kmに位置する八丈島よりお届けしています。みなさん、よろしくお願いします。

サイトマップ

Yahoo!blog入門
　└Yahoo!blogをはじめてみましょう
　　（Yahoo!blogの作成・記事の投稿・画像の投稿・トラックバックの仕方など）

　└Yahoo!blogを飾り付けてみましょう
　　（レイアウト・メニュー・アバター・名前アイコン作成や設定など）

（↑文字数制限で書ききれないため、過去のサイトマップにジャンプします。）

　└記事本文を飾り付けてみよう
　　　└（その１）HTML超入門１「文字を強調、斜体、下線、取り消し線に設定する方法」
　　　└（その２）HTML超入門２「文字のサイズを変える方法」
　　　└（その３）HTML超入門３「文字の色を変える方法」
　　　　　└（番外編１）色見本１
　　　　　└（番外編２）色見本２
　　　└（その４）HTML超入門４「文字のサイズや色を同時に変える方法」
　　　└（その５）HTML超入門５「文字の装飾を組み合わせる方法」
　　　└（その６）HTML超入門６「文字を上付き、下付きにする方法」
　　　└（その７）HTML超入門７「文字にルビをふる方法」
　　　└（その８）HTML超入門８「文字を動かす方法１」
　　　└（その９）HTML超入門９「文字を動かす方法２」
　　　└（その１０）HTML超入門１０「文字を動かす方法３」

このサイトはYahoo!JAPANディレクトリに登録されています。

記事本文を飾り付けてみよう「（その３５）CSS超入門９」

Sat, 21 May 2005 12:21:57 +0900

　今回から、数回にわけてボックスについてでご説明した「ボーダー」の部分の設定方法をご説明したいと思います。ボーダーの工夫次第で素敵なタイトルなどが作れると思います。それでは、始めましょう。

※CSSを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

border:ボーダーのスタイル;border-color:ボーダーの色;

[ボーダーのスタイル]
solid →　普通の線
double →　2本線
groove →　立体的にへこんで見える線
ridge →　立体的に突き出て見える線
inset →　全体的にへこんで見える線
outset →　全体的に突き出て見える線
dashed →　破線
dotted →　点線

という感じになります。（":"コロンと";"セミコロンの違いに注意！！）

それでは、実際に設定したものを見てみましょう。

■ボーダーをsolidにする（border:solid;の場合）

文法）
||<#ccffff' style=border:solid;border-color:#ff0000; ``ボーダーがこんな感じになります。||

※補足　分かりやすくするために、セルとボーダーに色を付けています。また、ボーダーの太さも10pxに設定しています。（ボーダーの太さについてはこちらをご覧下さい）以下も同様。

結果）
ボーダーがこんな感じになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーをdoubleにする（border:double;の場合）

||<#ccffff' style=border:double;border-color:#ff0000; ``ボーダーがこんな感じになります。||

結果）
ボーダーがこんな感じになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーをgrooveにする（border:groove;の場合）

文法）
||<#ccffff' style=border:groove;border-color:#ff0000; ``ボーダーがこんな感じになります。||

結果）
ボーダーがこんな感じになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーをridgeにする（border:ridge;の場合）

文法）
||<#ccffff' style=border:ridge;border-color:#ff0000; ``ボーダーがこんな感じになります。||

結果）
ボーダーがこんな感じになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーをinsetにする（border:inset;の場合）

文法）
||<#ccffff' style=border:inset;border-color:#ff0000; ``ボーダーがこんな感じになります。||

結果）
ボーダーがこんな感じになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーをoutsetにする（border:outset;の場合）

文法）
||<#ccffff' style=border:outset;border-color:#ff0000; ``ボーダーがこんな感じになります。||

結果）
ボーダーがこんな感じになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーをdashedにする（border:dashed;の場合）

文法）
||<#ccffff' style=border:dashed;border-color:#ff0000; ``ボーダーがこんな感じになります。||

結果）
ボーダーがこんな感じになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■ボーダーをdottedにする（border:dotted;の場合）

文法）
||<#ccffff' style=border:dotted;border-color:#ff0000; ``ボーダーがこんな感じになります。||

結果）
ボーダーがこんな感じになります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

如何でしたか？
いろんな、タイプのボーダーがありますから、その記事の雰囲気に合わせて使い分けると一味違ったものになると思います。是非、使ってみてくださいね。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

テスト

Sat, 21 May 2005 11:51:56 +0900

今日も良い一日になると良いですね

記事本文を飾り付けてみよう「（その３３）CSS超入門７」

Wed, 18 May 2005 07:21:51 +0900

　今回は、前回のボックスについてでご説明した「パディング」の部分の設定方法をご説明したいと思います。パディングの使い方を覚えておくとレイアウトに役立つと思います。是非覚えておいてくださいね。

※CSSを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

パディング（上）　→　padding-top:設定する値;
パディング（下）　→　padding-bottom:設定する値;
パディング（右）　→　padding-right:設定する値;
パディング（左）　→　padding-left:設定する値;
パディング（上下左右）　→　padding:設定する値;

という感じになります。（":"コロンと";"セミコロンの違いに注意！！）

それでは、実際に設定したものを見てみましょう。

■パディングの上を100pxにする（padding-top:100px;の場合）

文法）
||<#ccffff' style=padding-top:100px; ``今日も良い一日になると良いですね||

※補足　分かりやすくするために、セルの色に色を付けています。以下も同様。

結果）
今日も良い一日になると良いですね

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■パディングの下を100pxにする（padding-bottom:100px;の場合）

文法）
||<#ccffff' style=padding-bottom:100px; ``今日も良い一日になると良いですね||

結果）
今日も良い一日になると良いですね

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■パディングの右を100pxにする（padding-right:100px;の場合）

文法）
||<#ccffff' style=padding-right:100px; ``今日も良い一日になると良いですね||

結果）
今日も良い一日になると良いですね

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■パディングの左を100pxにする（padding-left:100px;の場合）

文法）
||<#ccffff' style=padding-left:100px; ``今日も良い一日になると良いですね||

結果）
今日も良い一日になると良いですね

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■パディングの上下左右全てを100pxにする（padding:100px;の場合）

文法）
||<#ccffff' style=padding:100px; ``今日も良い一日になると良いですね||

結果）
今日も良い一日になると良いですね

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

如何でしたか？
そんなに難しくはないと思います。パディングの設定は覚えておくと後々レイアウトに生かせると思いますので、是非覚えておいてくださいね。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

また、Yahoo!blogの場合、記事の部分の横幅は560pxに設定されているようです。
テーブルの大きさを設定する時は、横幅の合計をそれ以下にしておいた方が良いでしょう。

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

８３歳ブロガー誕生

Tue, 17 May 2005 08:08:21 +0900

私が８３歳になった時に、その時代の若者の間で流行しているものに興味を持ち、それをやってみるだけのバイタリティーがあるだろうか？

satochan122002さんという方に出会いました。８３歳だそうです。

いやー、素晴らしすぎますね。即お気に入り登録です。

現在、最高齢のブロガーっておいくつの方か分りませんが、この方がブログを始めたのはヤフーならではかもしれません。そういった意味ではヤフーが何かのサービスを始める事の、世の中に対する影響力って本当に凄いのだと思います。

っと言う事で、私は全力でsatochan122002さんのブログをサポートいたします。

みんなで一緒に応援しませんか？

記事本文を飾り付けてみよう「（番外編）CSSのボックスについて」

Sun, 15 May 2005 08:44:33 +0900

　今回はCSSの利用時に作られる「ボックス」についてご説明しておきます。少し分かりにくいかもしれませんが、CSSでのレイアウトを考える時に基礎となる部分なので、頭の片隅にでも覚えておいて下さい。

※CSSを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

Yahoo!blogでCSSを利用できるのは、今のところテーブルなどに限られてしまっていますが、本来CSSはテキストや画像、その他様々な要素に適用することが出来ます。
こうした要素（Yahoo!blogの場合、テーブルなど）にCSSを適用すると、その要素に「ボックス」と呼ばれる領域を生成します。（図1）

[図1]

それでは、このボックスの詳細を見ていきましょう。

１、内容
文字列や画像などメインとなる内容を表示する部分です。テーブルにCSSを適用した場合は、その中に入っている文字列や画像が内容となります。

２、パディング
ボーダーまでの余白です。このパディング部分にはCSSで設定した背景色や背景画像が適用されますので、背景を大きく取りたい時には、このパディングを大きく設定してください。

３、ボーダー
パディングを囲む枠線です。線の太さや種類を設定することができます。

４、マージン
ボーダーの外にある余白です。この部分にはCSSで設定した背景色や背景画像は適用されません。無色の余白を取りたい時は、こちらを設定してください。

以上の内容からマージンまで全体がボックスとなります。
今後、これらの設定の仕方をご説明したいと思います。（図1）の構成を頭に入れておいてくださいね。

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。