CSSのPaddingについて図解を用いて解説します。
Webサイトを作る上で余白を取るのは大事ですが、余白を指定するのに重要なのがpadding(パディング)とmargin(マージン)です。
当記事では、パディングの考え方と使い方、効かないときの対処法を解説しています。
思わぬところでパディングが効かずに苦労していることもありますが、対処法がわかればすぐに解決します。
- Webデザイン・コーディングを目指している人。
- Figmaでコーダー向けにデザインを作る人。
- WordPressサイトにて「追加カスタマイズ」をする際
にも役に立つのでぜひ一読ください。
目次
paddingとは？ボックスモデルという考え方
paddingを考えるときに、Webを構成するボックスモデルという考え方が必要になります。
paddingは「要素(箱)の内側にある余白」
marginは「要素(箱)の外側にある余白」です。
Webの要素は箱(ボックス)のように作られていて、ボックスモデルと呼ばれています。
その箱の中身に空間を作るのがpaddingです。
amazonの箱を想像してください。余白がパディングです。
＼イメージ図です／
効かないときの対処法
パディングを指定したのに余白がつかないな〜
マージンで代用しようかな？
paddingを指定したのに余白がつかないというのは、初心者あるあるです！
ついmarginで調整してしまう人も多いですが、それではうまく行かないことも。
以下の原因が考えられます。
displayがinlineになっている- 要素自体に
heightが効いている overflow:hiddenで消えてしまっているposition:absoluteで位置が固定されている
displayがinlineになっている
inlineブロックですとパディングが効きません。
inlineブロックで悩むことは、aタグ、buttonタグ、spanタグ、inputタグ、imgタグなどが多いでしょう。
これらのタグにパディングを効かせたいときは、明示的にblockやinline-blockを指定する必要があります。
要素自体にwidth,heightが効いている
ボタンを作る際に、widthとheightを決めてしまうとパディングが効きません。
箱の大きさが決まってしまって、中の余白を大きくしても箱が大きくなれないようなイメージです。
横幅が決まってしまうことは多いのですが、縦幅をheight:autoとしたり、fit-contentとすることでパディングを生かした制作をしましょう。
overflow: hidden; は、要素からはみ出した部分を非表示にします。
そのため、パディングで広がった内側の余白が見えなくなることがあります。
一時的に overflow: visible; にすると動作確認ができます。
position:absoluteで位置が固定されている
要素の位置を「固定」してしまう指定です。
親要素から独立して配置されるため、paddingを使っても周囲に影響が出ません。
余白を取りたいときは、marginやtransformで調整する方が安定します。
paddingの指定の仕方
パディングを指定する方法は数字を主に指定します。
そして、それぞれの位置を指定したうえでどのくらい余白を作るかを数字やem、%を使った指定をします。
paddingの指定には以下のような種類があります。
| CSSプロパティの書き方 | どこへ有効か |
|---|---|
padding | 四方への指定。ショートハンドでそれぞれにも。 |
padding-top | 上部の余白 |
padddin-right | 右側の余白 |
padding-bottom | 下部の余白 |
padding-left | 左側の余白 |
padding-inline | 左右の余白 |
padding-block | 上下の余白 |
省略して書くショートハンド
いちいち
padding-left
padding-top
なんて書くのは面倒ですよね。サイトの読み込み速度も変わってきます。
そこで、ショートハンドを使います。
上下、左右を同時に指定するショートハンド
.hoge{
padding:10px 20px;
}上下別、左右を共通の指定をするショートハンド
.hoge{
padding:10px 20px 30px;
}それぞれの位置を指定するショートハンド
.foo{
padding:10px 20px 30px 40px;
}半角を空けて数字を指定することで、topから時計回りに余白を指定することが出来ます。
主な使い所
「要素の内側」というpaddingの特徴を生かして、実際にこんな場面で使われます。
- aタグの有効範囲を広げる
- セクション上下の余白を決める
- サイトやコンテンツの両横に設定する
- カードレイアウトの内側の余白につける
aタグの有効範囲を広げる
aタグはリンクとして使うため、クリックできる範囲が広いほうがユーザビリティが高い(使いやすい)です。
テキストだけだとすごく押しづらいため、paddingを使って有効範囲を広げてやります。
主にボタン、メニューのテキストなどに利用します。
セクション上下の幅を決める
各セクションを一つの大きな箱と見立てて、上下の余白を取るためにpaddingを使います。
セクションに対して背景色が有効になったり、positionを利用するときに便利なため、利用しています。
サイトやコンテンツの両横に設定する
サイトが画面横にくっついていると、古いサイトだったり、イケてない雰囲気が出てしまいます。
単純に見づらい、見切れているのかな？といった不安にもつながってしまいますしね。
左右に15px~20pxの余白を作るサイトが多い印象です。
カードレイアウトの内側の余白
カード状のレイアウトを作るときにも、余白を設定するためにpaddingを使います。
カードサイズがガッチリ決まっている場合はpxやemでの指定。
レスポンシブに流動的に変わるサイトは%で指定されている印象です。
WordPressサイトでカスタマイズしたいとき
WordPressにて、既存テーマをカスタマイズしたいときにも利用できます。
サイト制作をしていたり、トップページを固定ページでカスタマイズする際にちょっと狭い…。
なんてこともあるあるですよね。
paddingのカスタマイズをする2種類の方法をご紹介します。
投稿編集右側メニューからカスタマイズ
テーマによっては右側のメニューより余白を調整することが出来ます。
cocoon、affingerでは確認できましたが、Swellでは出来なさそうでした。
右側メニューより、サイズの＋をクリック
パディングと出るので、こちらを調整します。
CSSを指定してカスタマイズ
どうしても変更したい箇所をカスタマイズするときに利用します。
該当記事ページのカスタマイズから追加CSSメニューを出します。
開発ツールを使い、調整したい場所を突き止めます。
そこから、クラス名を読み込んで追加CSSにコピペします。
クラス名の頭に.(カンマ)をつけて、波括弧をつけて指定します。
コピペ用
.class{
padding: 10px 20px;
}Figmaでpaddingを調整する
Figmaを使ったデザイナーの方向けです。
コーディングをあまりわからないのに、コーダーに言われる…。なんてこともあるかもしれません。
Figmaでパディングを指定する方法は以下となります。
ボタンやカードを作るときの参考にしてください。
- テキストや要素を覆う程度の長方形を用意する
- 長方形の上にテキストを置く
- 長方形とテキストをオートレイアウト化
- W(要素の幅)とH(要素の高さ)を「コンテンツを内包」にする
- オートレイアウト内の↓画像のアイコンの数字を調整
このようにしたらテキスト量に応じて背景が大きくなっていきます。
横幅を固定したい(カードコンテンツや横幅が決まっている場所)場合はWを固定
縦幅を固定した(ヘッダーやフッター、メニュー等)はHを固定したら動かなくなります。
まとめ：paddingの基礎、使い方
Web制作で「見やすく・きれいに」見せるためには、余白(padding)の扱いがとても大切です。
効かないときは
- displayがinlineになっている
- 要素自体にheightが効いている
- overflow:hiddenで消えてしまっている
- position:absoluteで位置が固定されている
これら、周りの要素を気にして見てください。
特にheightの指定は様々なトラブルにつながりやすいので、あまりしないほうがいいです。
パディングはショートハンドがわかりやすい部類だと思うので、どんどん有効利用しましょう。
WordPressでは右側の編集メニューより選択できることがあるので、既存テーマを利用するとき、トップページをカスタマイズしたいときなどに余白を見せてスマートなサイトに見せましょう。
余白をうまく使うことでリッチなサイトにみせることも出来ます。
余白をうまく使うデザインについてはこちらがおすすめです。
figmaでデザインをされる方も、パディングとは、paddingの設定方法がわかると、コーダーの言っていることが少しわかるようになるかもしれません。
最後までご覧頂きありがとうございました。
