HPB18 | HPB19 コンテンツ一覧
ホーム > HPB19 > HTML タグ辞典 > padding
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

HTML タグ辞典 padding


パディング ( mpadding ) リファレンス



パディング ( padding ) 説明



パディングは、それぞれの領域、項目の中に、スペースを空けたい場合に指定します

似たような指定に、マージン、インデントというものもありますが、マージンは、領域間のスペースを空ける指定、インデントは、段落先頭行の先頭を段落ちさせる指定、パディングは、領域内のスペースを空ける指定になります



パディング ( padding ) 書式



上下左右 20 ピクセル style="padding : 20px;"
上下 10 左右 20 style="padding : 10px 20px;"
10 左右 20 30 style="padding : 10px 20px 30px;"
10 20 30 40 style="padding : 10px 20px 30px 40px;"
20 style="padding-top: 20px;"
20 style="padding-bottom: 20px;"
20 style="padding-left: 20px;"
20 style="padding-right: 20px;"




表の中でのパディングの使い方



普通、表を作る際、表題行の項目は、真中表示で、内容行は左寄せにしたりしますが、罫線を引いた場合、項目内容が周りの罫線にくっついてしまって、見辛くなります

上下左右にパディングを指定で隙間を空けて、罫線にくっつかないようにすれば、見違えるように見易くなります


タイトル行は真ん中、内容はインデント付左寄せの例
記述例 <table border="0" bgcolor="#999999" cellspacing="1">
  <tbody>
    <tr>
      <td bgcolor="#ffffff" style="padding : 10px 20px;" nowrap></td>
      <td bgcolor="#ffffff" style="padding : 10px 20px;" align="center">項目名A</td>
      <td bgcolor="#ffffff" style="padding : 10px 20px;" align="center">項目名B</td>
    </tr>
    <tr>
      <td bgcolor="#ffffff" style="padding : 10px 20px;" nowrap>項目ABCDEF</td>
      <td bgcolor="#ffffff" style="padding : 10px 20px;">ABCD<br>EFGH</td>
      <td bgcolor="#ffffff" style="padding : 10px 20px;">ABCDEFG<br>HI</td>
    </tr>
    <tr>
      <td bgcolor="#ffffff" style="padding : 10px 20px;" nowrap>項目ABC</td>
      <td bgcolor="#ffffff" style="padding : 10px 20px;">ABCD<br>EFGHIJK</td>
      <td bgcolor="#ffffff" style="padding : 10px 20px;">ABCD<br>EFGHIJK</td>
    </tr>
  </tbody>
</table>
表示例
項目名A 項目名B
項目ABCDEF ABCD
EFGH
ABCDEFG
HI
項目ABC ABCD
EFGHIJK
ABCD
EFGHIJK


「 style="padding : 10px 20px;" 」がパディング指定です

指定値を半角スペースを挟んで2つ並べた場合、それぞれ順に、上下の指定値、左右の指定値になります


上記表の場合、セルの上下それぞれに10ピクセル、左右それぞれに20ピクセル空けなさいという指定になります

上下左右それぞれの指定方法は、先述 「パディング ( padding ) 書式」をご参照下さい



マージンについて、もっと詳しくお知りになりたい方は、「 HTML タグ辞典 margin 」 を、インデントについては、「 HTML タグ辞典 indent 」 をご参照下さい





padding SEOへの影響


特に影響はありません

<補足>
SEO ( Search Engine Optimization : 検索エンジン最適化 ) とは、Google、Yahoo!、Goo 等の検索サイトで検索された際に、検索結果表示ページ(SERP : サープ : Search Engine Result Page )の前の方(上位)に表示されるように工夫して、ホームページ、ブログをつくることです
そのために用いる方法をSEO対策と言い、適切に使うことによりSEOに効果のあるタグがあります
SEO対策について、詳しくお知りになりたい場合、詳細は、「 SEO対策 SEOとは 」をご参照下さい

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > HTML タグ辞典 > padding
HPB18 | HPB19 コンテンツ一覧
   

© 2014 abhp.net All Rights Reserved.

HTML タグ辞典

ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP