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

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

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

基本的なルールとしては

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

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

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

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

■パディングの上を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に設定されているようです。
テーブルの大きさを設定する時は、横幅の合計をそれ以下にしておいた方が良いでしょう。

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