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

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

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

※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文法を使いこなそう」さんの研究の成果に感謝！！

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