セルの余白に、部分的に異なる余白を設定する方法 ／ ホームページビルダー

セルの余白に、部分的に異なる余白を設定する方法は？ ／ ホームページビルダー

ご質問にお答えします。

セルが複数ある表に[セル内の余白]を設定すると、
すべてのセルの上下左右に同じ余白が設定されます。

たとえば、１つのセルには余白の設定をしたくないけれど、もう一つのセルには、左右にだけ10pxの余白を設定したいという時の方法は？

そんなときは、ソース画面でそのセルの<TD>というタグのところに、以下の余白を指定するタグ padding（パディング）を加えます。

style=”padding-left:10px; padding-right:10px;”

つまり、

<TD style=”padding-left:10px; padding-right:10px;”>

とすればこのセルにだけ、
左右の余白10pxをつけることができます。

（ページ/ソース画面で、セルを選択すると、選択したセルのタグがソース画面で黄色く表示されますので、挿入する個所が特定できます。）

■の部分に、以下の指定したいものを加えていきましょう。
●は数字に置き換えます。

style=”■”

padding:●px;　　　　　…上下左右の余白を一度に指定

padding-top:●px;　　　…上の余白を指定

padding-bottom:●px; 　…下の余白を指定

padding-left:●px;　 　…左の余白を指定

padding-right:●px;　　…右の余白を指定

これで、表の中にまた表を入れてといったことをしなくても、余白を自由に調節することができるようになります。

ちなみに、このパディングは、以下のようにまとめて指定することもできます。

★まとめて指定する場合★

値を１～４個の範囲内で指定し、値は半角スペースで区切ります。

　◆値１つの場合　padding: 5px;

　　　………………………　上下左右　がすべてその数値

　◆値２つの場合　padding: 5px 10px;

　　　………………………　上下　、左右　の順の数値

　◆値３つの場合　padding: 10px 20px 10px;

　　　………………………　上　、左右　、下　の順の数値

　◆値４つの場合　padding: 10px 20px 10px 20px;

　　　………………………　上　、右　、下　、左　の順の数値

便利ですので、ぜひ試してみてください。