paddingとは？初心者にもわかる使い方と基本の解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

岡田康介

名前：岡田康介（おかだこうすけ）ニックネーム：コウ、または「こうちゃん」年齢：28歳性別：男性職業：ブロガー（SEOやライフスタイル系を中心に活動）居住地：東京都（都心のワンルームマンション）出身地：千葉県船橋市身長：175cm 血液型：O型誕生日：1997年4月3日趣味：カフェ巡り、写真撮影、ランニング、読書（自己啓発やエッセイ）、映画鑑賞、ガジェット収集性格：ポジティブでフランク、人見知りはしないタイプ。好奇心旺盛で新しいものにすぐ飛びつく性格。計画性がある一方で、思いついたらすぐ行動するフットワークの軽さもある。 1日（平日）のタイムスケジュール 7:00 起床：軽くストレッチして朝のニュースをチェック。ブラックコーヒーで目を覚ます。 7:30 朝ラン：近所の公園を30分ほどランニング。頭をリセットして新しいアイデアを考える時間。 8:30 朝食＆SNSチェック：トーストやヨーグルトを食べながら、TwitterやInstagramでトレンドを確認。 9:30 ブログ執筆スタート：カフェに移動してノートPCで記事を書いたり、リサーチを進める。 12:30 昼食：お気に入りのカフェや定食屋でランチ。食事をしながら読書やネタ探し。 14:00 取材・撮影・リサーチ：街歩きをしながら写真を撮ったり、新しいお店を開拓してネタにする。 16:00 執筆＆編集作業：帰宅して集中モードで記事を仕上げ、SEOチェックやアイキャッチ作成も行う。 19:00 夕食：自炊か外食。たまに友人と飲みに行って情報交換。 21:00 ブログのアクセス解析・改善点チェック：Googleアナリティクスやサーチコンソールを見て数字を分析。 22:00 映画鑑賞や趣味の時間：Amazonプライムで映画やドラマを楽しむ。 24:00 就寝：明日のアイデアをメモしてから眠りにつく。

paddingとは？基本の意味

padding は CSS ボックスモデルの一部で、要素の中身と境界線の間に作る「内側の余白」です。日本語では 内側の余白 や 内側のスペース と説明されることが多く、文字や画像が境界にべったりくっつくのを防ぐ役割をします。

paddingの基本と使い方

padding は上下左右の四方向を個別に指定することができます。書き方にはショートハンドと呼ばれる短い書き方があります。例えば「padding: 8px;」と書くと四方すべてに 8px の内側余白ができます。

別の例として「padding: 8px 12px;」は上下8px、左右12px の設定になります。さらに「padding: 8px 12px 16px 20px;」のように時計回りに指定することも可能です。これらの値には px、em、rem などの単位を使えます。

ボックスモデルとの関係

要素には content、padding、border、margin の四つの領域があります。padding は content と border の間にあり、影響するのは要素の見た目だけでなく、実際のサイズにも関係します。デザインを整えるときは padding の値を変えるだけで、テキストの読みやすさやボタンの押しやすさを簡単に調整できます。

実務的な例と表

実務でよく使うケースをいくつか挙げます。

able>ケースボタンやリンクをクリックしやすくする理由内側の余白を増やすと文字が中心に集まり、押下範囲が大きく見えるため注意点大きくしすぎると横幅が広がり、レイアウトが崩れることがあるble>

よくある誤解とポイント

padding は外側の余白（margin）ではない ことを覚えましょう。padding は要素の内側、margin は要素同士の外側の距離です。

box-sizing と padding の関係

デフォルトのボックスモデルは content-box です。padding を増やすと実際の要素サイズが大きくなる点に注意しましょう。もし指定したサイズをボックス全体で厳密に合わせたい場合は box-sizing: border-box; を使うと padding や border を含んだ大きさになります。

まとめ

padding はウェブデザインの基本ともいえる要素の内側余白を操作するプロパティです。使い方を覚えると、読みやすさやデザインの統一感を簡単に改善できます。まずは四方向の指定とショートハンドの感覚をつかみ、実務的なケースで慣れていきましょう。

paddingの関連サジェスト解説

padding とは css: paddingとは、CSSで要素の content と border の間にできる“内側の余白”のことです。見た目の余白ではなく、要素の内部だけを広げる空間です。例えば、文字や画像が境界線にぴったりくっつかないように、文字の読みやすさを高めるために使います。paddingは padding: 10px; のように書き、四方すべて同じ値なら一行で指定できます。書き方の基本にはショートハンドがあります。top, right, bottom, left の順で並べると、padding: 10px 20px; は上下が 10px、左右が 20px になります。さらに個別値を指定することもできます。単位は px のほかに em、rem、%、vmin/vh なども使えます。ボックスモデルとの関係も大切です。デフォルトは content-box で、width に padding や border は含まれません。例えば width: 200px; に padding: 10px を設定すると、要素の実測幅は 200px + 20px となります。box-sizing: border-box; を使うと width に padding と border が含まれ、実際の見た目サイズは width の値だけになります。実務での使い方として、ボタンには十分な padding を設定してクリックしやすくします。カード風のデザインでは、テキストとカードの境界を整えるためにも padding の調整が重要です。レスポンシブデザインでは画面サイズに合わせて padding を変えると、見た目の余白が保たれます。注意点として、背景色を見せたい場合は padding 部分にも背景色が適用されます。枠線だけを見せたい場合は border の色と padding の色を分けて考えましょう。
padding とは服: padding とは服について知っておくと、洋服の見た目や暖かさの秘密が分かりやすくなります。服の padding は、衣服の中に詰め物を入れて形を整えたり保温性を高めたりする“詰め物”のことです。一般的には肩パッドや胸元のパッド、ジャケットの中綿、ブラジャーのパッドなどが代表的です。肩パッドは肩のラインをきれいに見せ、コートやジャケットのシルエットを整える役割があります。中綿は寒さを防ぐための保温素材で、ふくらみと暖かさを同時に生み出します。スポーツウェアやダウンジャケットには薄いパッドや小さなポケット状の詰め物が入ることがあり、動きを妨げずに暖かさを保つ工夫がされています。取り外し可能なパッドは、洗濯のときに形を崩さずに手入れしやすい点が利点です。パッドの選び方を知ると、冬のコーディネートがぐっと楽になります。まず目的を決めましょう。防寒が目的なら厚めの中綿を選ぶと暖かさが長く続きます。形を整えることが目的なら肩パッドの厚さや硬さを重視します。素材にも注目しましょう。ポリエステル綿は安価で洗濯しやすく、羽毛風の材料は暖かさは高いですが扱いが難しいことがあります。価格、洗濯のしやすさ、耐久性を比較して選ぶと失敗が減ります。サイズ感も大事で、厚すぎると窮屈になり、薄すぎると見た目の形が崩れやすくなります。手入れのコツは、洗濯表示をよく読むことです。取り外し可能なパッドは外して別に洗うと形を保ちやすいです。洗濯機（関連記事：アマゾンの【洗濯機】のセール情報まとめ！【毎日更新中】）で洗える場合でも、ネットを使い、低温設定で優しく洗うと長持ちします。保管時は型崩れを避けるために平らに干すか、パッドを取り出して風通しの良い場所で乾かしましょう。最後に、パターンの組み合わせ次第で印象が大きく変わる点を覚えておくと、コーディネートの幅が広がります。なお、ウェブ用語の padding とは別物です。服の padding は布の中の詰め物で、見た目と機能性を支える大事な要素です。
padding-top とは: padding-top とは、CSSのプロパティのひとつで、要素の内側の上側に空白（余白）を作る機能です。contentとborderの間にスペースが生まれ、縦方向の見た目を調整できます。ボックスモデルでは、要素はcontent（中身）→padding（内側の余白）→border（枠）→margin（外側の余白）という順に重なっています。padding-topを設定すると、この順番のpaddingの上側だけが増え、全体の高さが大きくなります。高さをexplicitに指定している場合、paddingは通常heightに加算されますが、box-sizing: border-boxを使うとpaddingも含めてheightが決まるため、外側の高さは変わりません。単位としてpx、em、rem、%などを使えます。%指定は親要素の幅を基準に計算される点に注意してください。実用的な例として、divの背景色を見せつつ上部だけ余白を作るには、div { padding-top: 20px; background: #f0f0f0; } のように書きます。背景色はpadding部分にも適用されるので、内側の余白が見える範囲が広がります。margin-topとの違いは、marginが外側の空白を作るのに対し、paddingは内側の空白を作る点です。実務では、ボックスのデザインを揃えるときや、テキストの行の上部を少し持ち上げたいときなどに使います。ボックスモデルの理解を最初のステップにし、heightとの関係とbox-sizingの影響を実例で確認することが学習のコツです。
padding-bottom とは: padding-bottom とは、CSS の padding の一部で、要素の content 部分とボーダーの間の下方向の余白を設定するプロパティです。padding は要素の内側の余白を作る機能で、left, right, top, bottom それぞれ個別に指定できます。padding-bottom は下方向の余白だけを決める値です。例えば高さを 100px に設定している要素に padding-bottom: 20px を加えると、内側の余白が増え、見た目の総高さは content の高さに padding の高さが加わった形になります。ここで重要なのは box-sizing の影響です。デフォルトの box-sizing: content-box の場合、padding は高さに加算されます。一方 box-sizing: border-box を使うと、要素の全体の高さに padding が含まれるため、height の指定値を変えずに済むことがあります。別の観点として、padding は背景色を含むエリアを広げるので、背景色を見せたい場合にも役立ちます。使い方の例としては、.box { padding-bottom: 20px; } のように下方向の余白を決めるだけです。さらにパーセント値を使うと、幅に対して下方向の余白が決まり、レスポンシブデザインで比率を保つ箱を作る「アスペクト比のテクニック」として使われます。特に動画やカード型レイアウトで、コンテンツの下部に一定の余白を確保したいときに便利です。パディングとマージンの違いにも注意しましょう。 padding-bottom は自分の内部の余白で、マージンは外部との間隔です。要するに padding-bottom とは要素の内部の下部の余白を決める CSS のプロパティで、用途やボックスモデルの理解と組み合わせ次第で、見た目の整え方が大きく変わります。
ansi_padding とは: ansi padding とは、ANSIエスケープシーケンスを使って表示を装飾する場面で、見た目の幅をそろえるために余白を追加することを指します。ANSIエスケープシーケンスは色や太字、カーソル移動などを実現しますが、文字として実際に画面に表示される文字数には含まれません。そのため、文字数の計算と表示領域の幅を合わせるときには、色だけの部分を除いて長さを測る必要があります。例えば、赤く表示した文字列と普通の文字を横に並べたい場合、エスケープコードが挿入されている部分は幅に影響しません。これを踏まえずに単純に文字列の長さを使ってパディングすると、見た目がずれてしまいます。なぜ必要か: テキストを列に並べるとき、色を使って視認性を上げると同時に、揃えたい場合があります。しかし ANSIコードは表示幅にカウントされないので、パディングをするときに注意が必要です。使い方のコツ: 1) 可視文字数を基準にパディングを計算する。 2) ANSIコードを除去して長さを測るライブラリを使うと楽になる。 3) 端末が ANSIをサポートしているか、色のリセットを忘れずに。 4) 文字が全角文字の時は幅が大きくなる場合があるのでさらに工夫が必要。実践例のイメージ: 表形式で色付きの見出しを作ろうとするとき、各列の見える幅をそろえるには、各セルの表示幅を正確に測って空白を追加します。これにより、出力が美しく整い、読者に伝わりやすくなります。結論: ansi padding とは、ANSIエスケープコードを使う場面で、見た目の幅を揃えるための余白の追加の考え方です。初心者はまず可視文字数を計算する習慣をつけ、必要なら専用のライブラリを使うと良いです。
プログラミング padding とは: プログラミング padding とは、要素の内容の周りに空白を作る仕組みです。ウェブページを作るとき、文字や画像の周囲に適切な余白を設けたいと思います。その余白を実現してくれるのが padding です。padding は「内容の周りの内側の余白」と覚えるとわかりやすいです。たとえば長い文章の段落を見やすくするために、文字と段落の境界線の間にスペースを設けることが padding の役割です。CSS の世界では、要素には content、padding、border、margin の四つの部分があります。padding は content を囲む内側の空白で、padding の大きさを増やすと、見た目の大きさだけでなく、クリックしやすさにも影響します。ボタンやカードを作るとき、適度な padding を設定することで、文字が窮屈に詰まらず読みやすくなります。単位は px、em、% などを使います。例として、padding: 10px; は上下左右に 10 ピクセルの余白を作ります。上下だけ広げたい場合は padding: 10px 変えるなど、2値・3値・4値の書き方が便利です。初心者はまず padding: 10px; のように始め、慣れてきたら padding-top、padding-bottom など個別に調整していくと良いでしょう。デフォルトのボックスモデルでは、width は content の幅を表します。padding が外側に追加されるため、全体の横幅や高さは width + padding + border の大きさになります。全体のサイズを固定したい場合は box-sizing: border-box を使うと、 padding や border を含めた幅で計算できます。
zero paddingとは: zero paddingとは、データの周囲に0を追加して囲むことを指す用語です。主に画像や信号を処理する時の畳み込み演算で使われます。畳み込みとは、小さな窓（カーネル）をデータの上を滑らせて、窓の中の数値とデータを掛け合わせて合計を出す操作のこと。窓のサイズやストライドを変えると出力の大きさが変わりますが、端の部分は窓がはみ出してしまい、うまく計算できない場合があります。そこで zero padding を使ってデータの周囲を0で囲み、窓がデータの端まで動けるようにします。この0を足すことで、いくつかの利点と注意点があります。利点としては、出力のサイズをコントロールできること、端の情報を少しでも守れること、深層学習のモデルで「同じサイズを保つ」設定にしやすいことが挙げられます。例えば、3×3 のカーネルを使う場合、入力が32×32なら padding を1つ追加すると出力は32×32になります（ストライドが1のとき）。逆に padding が足りないと端の情報が失われ、特徴の検出が難しくなることがあります。実務では、汎用的な設定として k=3 の場合 p=1、k=5 の場合 p=2 など、奇数のカーネルで等しく padding を取ることが多いです。ここで p はパディングの層の厚さで、行列の各辺に0を何行・何列追加するかを意味します。1次元のデータでも同じ考え方が使われ、音声データや時系列データの滑らかな変化をとらえるのに役立ちます。注意点として、zero padding はデータの端に人工的なゼロを追加するため、実際のデータ分布には影響します。モデルが過剰適合しやすくなる場合があるので、適切な padding の量を選ぶことが重要です。また、最近ではリフレクションパディングや反転パディングなど、ゼロ以外の値を使う方法もあり、用途に応じて選ぶと良いです。
stat padding とは: stat padding とは、主にゲームの世界で使われる俗語です。直訳すると“統計を詰める・水増しする”という意味で、プレイヤーの成績や数字を、実力や努力と関係なく増やす行為を指します。オンライン対戦ゲームやMOBA、RPGなど、対人要素のあるゲームでよく使われます。実際の例としては、勝敗よりも数値を増やすことを目的に、無駄な作業を繰り返したり、別の人と組んで協力しないまま自分のスタッツだけを伸ばすケースがあります。経験値を不自然に荒稼ぎする、得られる報酬を最大化するためだけにプレイする、監視されにくい時間帯にだけソロプレイを続ける、といった行為が含まれます。この言葉は公的な用語ではなく、主にゲームコミュニティの間で使われる俗語です。したがって、どのゲームでも同じ意味で使われるとは限らず、文脈によってニュアンスが少し違うこともあります。要するに“努力の対価としての数字の正当性”が問われる場面で使われやすい言葉です。なぜ人は stat padding をするのか。ランキングを上げたい、レアな報酬を先取りしたい、友だちと比べて自分の成績を評価したい、という動機が多いです。しかし多くの場合、短期的には数字が上がって得をするように見えても、長い目で見ると公正さを欠き、ゲームの健全性を損ねるためおすすめできません。対策と健全な代替案としては、実力向上を目的としたプレイを心がけること、チームプレイの協力を重視すること、公式のランク制度やマッチメイキングの設計が意図する“公正さ”を信頼することです。プレイの記録を数字だけで判断せず、プレイ時間の使い方やテクニックの向上など別の指標で自分の成長を測るのが良いでしょう。
frame padding とは: frame padding とは、昔のHTMLで使われていた FRAME 要素や frameset の中で、枠の内側の境界と表示される文書の間にできる余白のことです。 frame padding があると、枠の縁に文書がぴったりつかず、読みやすくなります。ただしこの属性は現在のHTMLでは推奨されず、現代のWeb開発ではほとんど使われていません。なぜなら frameset や frame 要素は HTML5 で非推奨となり、代わりに CSS でレイアウトを作り、外部ページを埋め込むには iframe を使うスタイルが一般的だからです。iframe の中の文字や画像の余白を作りたいときは、中のページ側の CSS で padding を設定するのが普通です。iframe 自体に padding を設定しても、中のページには直接影響しない場合が多い点にも注意しましょう。つまり frame padding は過去の技術用語であり、現在のWeb開発では使わないケースが多いということです。古い資料を読むと framepadding という属性名が出てくることがありますが、新しいプロジェクトでは使わず、CSS の padding や margin、あるいは適切なレイアウト手法を用いて同様の見た目を作ります。

paddingの同意語

内側余白: 要素の内部にある余白。ウェブデザインの CSS の padding に該当する領域で、内容とボーダーの間のスペースを指します。
内部余白: 同じく要素内部の余白。書類設計やデザイン文脈で使われる表現。内容と枠の間の空間を表します。
内側スペース: 要素の内部に確保されたスペース。文字やアイコンと枠の間の余白を表す柔らかい表現。
パディング: 英語の padding のカタカナ表記。デザイン・コーディングの場で最も一般的に用いられる用語。
インナースペース: 英語圏の表現をそのまま日本語化した言い方。要素内部の空白を指します。
ゼロパディング: 周囲をゼロで埋める padding のこと。特に画像・信号処理で使われる手法。
ゼロ埋め: 同義。データの端をゼロで埋める処理を指す用語。
パッド: パッドは衝撃緩和や形を整えるための薄い詰め物。文脈によって padding の代用として使われます。
クッション材: 物理的な padding。梱包や機械部品の保護に使われる緩衝材。
詰め物: 中身を詰めて隙間を埋める材料。衣類・梱包・製品設計の padding の文脈で使われます。
充填材: 内部を満たす材料。 padding の一種として使われることがあります。
余白: 一般的には外側のスペースを指す用語ですが、広い意味では内側余白を含むこともあり、文脈に注意が必要です。
空白埋め: テキストやデータの周囲に空白を追加する意味合い。デジタル文脈で使われることがあります。

paddingの対義語・反対語

マージン: 要素の外側にできる余白のこと。paddingの内側スペースとは反対の概念で、要素と要素の間隔を決める外部のスペースです。
パディングなし: padding（内側の余白）を持たない状態。CSSでは padding: 0 に相当し、要素内の余白がゼロになります。
未パディング: paddingが適用されていない状態。データ処理やデザインでpaddingを省略している状態を指します。
境界線（ボーダー）: 要素を囲む外側の線。paddingとは別のボックスモデルの領域で、内側の余白ではなく要素の外縁を表します。
詰め物なし: 衣類・布団などの padding（中綿・詰め物）を使っていない状態。薄手や素地の状態を指す反対語的な表現です。
外側余白: 要素の外側にできる余白。マージンとほぼ同義で、要素間のスペースを作る外部の余白を指します。

paddingの共起語

パディング: 要素の内容と境界線との間の内側の余白。四辺すべてに適用され、上・右・下・左を個別指定したり省略形でまとめて指定できる。
padding-top: 要素の上端の内側余白を設定する CSS プロパティ。
padding-right: 要素の右端の内側余白を設定する CSS プロパティ。
padding-bottom: 要素の下端の内側余白を設定する CSS プロパティ。
padding-left: 要素の左端の内側余白を設定する CSS プロパティ。
paddingショートハンド: paddingの省略形。上下左右のパディングを一括で指定でき、1〜4値の形式で設定できる。
paddingプロパティ: パディングの総称的な指定手段。padding-top/右/下/左をまとめて扱う基本プロパティ。
ボックスモデル: ウェブデザインの基本概念。要素は content、padding、border、margin という階層で構成され、padding は content と境界の間の内側スペース。
content-box: ボックスサイズ計算の一つのモード。width/height が content のサイズを指し、padding や border は別途加算される。
border-box: box-sizing の値の一つ。width/height に padding と border を含めて計算する。
box-sizing: 要素のサイズ計算方法を指定する CSS プロパティ。content-box と border-box が主要値。
マージン: 要素の外側の余白。隣接要素との距離を作る。パディングとは別物。
幅と高さ: パディングは width/height の計算に影響する。padding を増やすと全体のサイズが変わることがある。
レイアウト: ページの配置設計。パディングを使って要素内の余白を整え、見やすさを調整する。
レスポンシブデザイン: デバイスサイズに合わせて padding の値を調整し、レイアウトの崩れを防ぐ設計思想。
paddingの単位: px、%、rem、em、vw など、パディングに用いる長さの単位。
calc(): パディングの値を計算式で決定する関数。例: padding: calc(1rem + 2vw);
CSSカスタムプロパティ: --pad: 16px; のような変数を使い、padding の値を再利用・一元管理できる機能。
Bootstrapパディングユーティリティ: Bootstrap が提供する p-*, pt-*, pl-*, pb-*, pr-* などのクラスで padding を細かく設定。
TailwindCSSパディング: Tailwind CSS のユーティリティクラス（p-4, px-2 など）で padding を素早く適用。
余白: 要素間の空白を指す概念。パディングは内部余白、余白は外部余白を指すことが多い。
ヒット領域/タップ領域: padding を増やしてボタンやリンクのクリック／タップ可能領域を拡大し、操作性を改善するテクニック。
CSS論理プロパティ: 書字方向に依存するプロパティ群。「padding-block-」「padding-inline-」など、国際化対応に有用。
padding-block-start: ブロック軸の開始端のパディングを設定。
padding-block-end: ブロック軸の終了端のパディングを設定。
padding-inline-start: 行内軸の開始端のパディングを設定。
padding-inline-end: 行内軸の終了端のパディングを設定。
アクセシビリティ: 読みやすさと操作性を高めるデザイン要素として padding が重要な役割を果たす場合がある。

paddingの関連用語

padding: 要素の内容と境界線との間にできる内側の余白。contentとborderの間のスペースで、背景色はこの領域にも適用される。
padding-top: 上方向の内側余白を設定。要素の上部と内容の間の距離を決める。
padding-right: 右方向の内側余白を設定。要素の右端と内容の間の距離を決める。
padding-bottom: 下方向の内側余白を設定。要素の下部と内容の間の距離を決める。
padding-left: 左方向の内側余白を設定。要素の左端と内容の間の距離を決める。
padding-block: ブロック軸方向（通常は上下）に跨る内側余白をまとめて指定するショートハンド。
padding-inline: インライン軸方向（通常は左右）に跨る内側余白をまとめて指定するショートハンド。
padding-block-start: ブロック軸の開始端の内側余白。
padding-block-end: ブロック軸の終了端の内側余白。
padding-inline-start: インライン軸の開始端の内側余白。
padding-inline-end: インライン軸の終了端の内側余白。
padding shorthand: 1〜4つの値でパディングを一括指定する短縮記法。例: padding: 10px 20px;
box-sizing: 要素の幅と高さの計算方法を決めるプロパティ。content-box（デフォルト）と border-box の2択。
content-box: width/height が内容領域だけを指し、paddingはその外側にはみ出すデフォルトの計算方法。
border-box: width/height に padding と border の厚さを含めて計算する方法。多くのレイアウトで安定する。
box model: CSSのボックスモデル。content、padding、border、margin の4つの領域で要素のサイズと余白を決定する。
content area: 要素の実際の内容が置かれる領域。padding はこの周りの余白として働く。
margin: 要素と周りの要素との間の外側の余白。背景は透明で、他の要素との間隔を作る。
paddingとmarginの違い: padding は要素内部の余白で背景色が適用される。margin は外部の余白で背景は影響を受けない。
アスペクト比を作るパディング: 高さを横幅の比率で決めたい時、padding-bottom などのパディングを使ってスペースを確保するテクニック。
パーセントパディングの挙動: パーセント指定のパディングは親ブロックの幅を基準に計算され、縦方向の比率にも影響する。
パディングに使える単位: px / em / rem / % / vw / vh など、相対単位はフォントサイズやビューポートに応じて変化します。
論理プロパティ: 書字方向に依存しない padding を指定するための padding-block-start などの新しいプロパティ。
背景の描画領域と padding: background-clip: padding-box を使うと背景はパディング領域まで描画される。
Tailwind などのフレームワークでのパディング: ユーティリティクラスとして padding プリフィックスを用いて簡単に調整できる。例: p-4, px-2, py-1。
レスポンシブデザインでの padding: メディアクエリでデバイスに応じて padding を調整して読みやすさを確保する。