HTMLのpaddingの使い所とは?設定方法についてわかりやすく解説

paddingはどのようなときに使うの?
paddingの設定方法がよくわからない

今回はこのような悩みを持っている方にHTMLpaddingとは何かについて、解説をしていきます。paddingは要素の内側のスペースに対して、どれくらいの幅にするかを決めることができる、CSSのプロパティです。

HTMLの初心者の方は、このpaddingについて分からないことも多いのではないのでしょうか?

この記事では、以下の内容について解説していきます。

  • paddingとは
  • paddingを設定する理由
  • table(表)のpaddingを設定する方法
  • HTMLでpaddingを設定する方法

HTMLのpaddingについて基本からやさしく解説していくのでぜひご覧ください!

paddingとは

まずはpaddingの基本的なところから解説していきます。paddingはCSSのプロパティの一つで、要素の内側のスペースに対してどれくらいの幅にするかを決めることが出来ます。

こちらのコードをご覧ください。

実行結果

このコードでは、pタグの範囲がどこまであるのか、またdivタグの範囲がどこまであるのかをborderプロパティで分かりやすいようにお見せしています。

それではpaddingを使ってみましょう。こちらのコードをご覧ください。

実行結果

こちらはpタグに囲まれた部分に対して、paddingを適用させました。よく見ると、赤い線の部分(pタグのブロック)がの縦幅が変わっていることが分かるかと思います。これは、pタグのブロックの大きさを変えたのではなく、paddingでそれぞれの余白を設定したことで反映されたレイアウトになります。

CSSではこのように、paddingなどを使って余白を作っていくことでレイアウトを完成させていきます。詳しいpaddingの使い方は、こちらの記事をご覧ください。

CSSのpadding徹底解説!marginとの違いとは?
更新日 : 2019年5月26日

paddingを設定する理由

ここでpaddingについて今ひとつ分からない方のために、paddingを設定する理由についても知っておきましょう。paddingという英単語からも想像できるようにパッド、つまり内側に対して影響を与えるというのはイメージが付きやすいかと思います。

このときの内側というのは、要素のborderの内側になりますね。またCSSではpaddingはとても重要な役割を持っています。基本的には、要素の外側のスペースを変えることが出来るmarginと組み合わせることで、HTMLのレイアウトを決めることが多いからです。

具体的には、CSSで文字を含めたボタンを作るとき、文字とボタンの枠のスペースを決めるときはpaddingを使って調整する必要があります。

paddingを設定する理由については分かって頂けたでしょうか?

table(表)のpaddingを設定する方法

それでは具体的なpaddingの設定について見ていきましょう。今回はtable(表)に対してpaddingを設定してみましょう。

こちらのコードをご覧ください。

実行結果

こちらは基本的なtableになります。ただし、実行結果を見てみると内側のスペースがやや狭いように感じますね。これはpaddingで調整をすることが出来ます。

こちらのコードをご覧ください。

実行結果

こちらはthとtdに対して、paddingを設定しました。実行結果が変わって、表の内側のpaddingが操作されて、より見やすくなりましたね。

今回使ったtableの使い方について確認したい方はこちらの記事をご覧ください。

HTMLでテーブル(表)を作ってみよう!初心者向けにわかりやく解説
更新日 : 2019年1月29日

HTMLでpaddingを設定する方法

初心者の方はHTMLでpaddingを設定できると思いがちですが、paddingはCSSのプロパティとして用意されています。

ですので、先程のサンプルコードのように、スタイルシートを用意した上で、必要な要素に対してpaddingを設定していく必要があります。HTMLとCSSの関係について知りたい方は、ぜひこちらの記事をご覧ください。

HTMLとCSSの関係とは?基本的な書き方を4つのステップで理解しよう
更新日 : 2019年6月4日

まとめ

この記事ではHTMLでpaddingを扱う方法について解説してきました。paddingはCSSのプロパティとして用意されているので、スタイルシートで適用させていきましょう。

また、paddingは要素の内側に対して、marginは要素の外側に対してスペースを設定出来るということも覚えておきましょう。

自分にプログラミングなんて・・・と思っていませんか?

今後10年間で今ある職業の『77%』はなくなると言われています。

人工知能や機械学習を筆頭にVR、AR、ドローンなどの最先端技術の発達はこれからのあなたの働き方に間違いなく影響を与えるでしょう。

将来を見据えてプログラミングができるようになってエンジニアになりたい、自分だけにしかできないクリエイティブな仕事がしたい、、、とお考えの方も少なくないでしょう。

と、同時に「難しそう、、自分にはできないだろう、、、」と諦めている方も多いのではないでしょうか。

弊社マンツーマンレッスンは、お一人お一人に専属のインストラクターがつくので、通常のスクールでは難しい、オリジナルアプリ開発や、フリーランスとしての仕事獲得まで支援しています。

まずは『無料体験レッスン』で弊社コンサルタントと一緒にあなた専用の学習カリキュラムを考えてみてはいかがでしょうか?

詳しくは下の画像をクリックしてください。

cta_mtm2

LINEで送る
Pocket

書いた人

侍ブログ編集部

侍ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説