CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでボタンのパディングを変更する方法

CSSでボタンのパディングを変更するには

ボタンのパディング（内側の余白）を変更するには、CSSの padding プロパティを使用します。パディングを調整することで、ボタンのテキストと境界線の間のスペースを自由にコントロールでき、ボタンの見た目やクリック領域の大きさを変えることができます。

padding プロパティには、px、em、% などの単位で値を指定します。値を1つだけ指定すると、上下左右すべてに同じ余白が適用されます。

サンプルコード

以下のコードでは、黄色い背景のボタンに 10px のパディングを設定しています。実際に動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .button {
            background-color: yellow;
            color: black;
            text-align: center;
            font-size: 15px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <h2>実行結果</h2>
      <p>下のボタンをクリックして結果をご確認ください：</p>
      <button class = "button">Result</button>
   </body>
</html>

パディングを個別に指定する方法

上下左右で異なる余白を設定したい場合は、以下のように各辺ごとに個別のプロパティを使うことができます。

  • padding-top … 上側の余白
  • padding-right … 右側の余白
  • padding-bottom … 下側の余白
  • padding-left … 左側の余白

また、padding: 10px 20px; のように半角スペース区切りで指定すると、「上下 10px・左右 20px」というように短く記述することも可能です。横長のボタンや縦長のボタンを作りたい場合に便利なので、ぜひ活用してください。

  1. CSSのマージン（margin）とパディング（padding）の違いとは？

    CSSにおけるマージン（margin）とパディング（padding）の違いについて、図解とコード例を使ってわかりやすく解説します。Webデザインの基礎となる重要な概念なので、しっかり理解しておきましょう。 マージンとパディングの違い まずは、最もシンプルな定義から始めます。 margin：HTML要素のボーダー（枠線）の外側にスペースを追加する padding：HTML要素のボーダーの内側にスペースを追加する マージンやパディングをHTML要素に適用すると、それぞれ次のように異なる働きをします。 上の図のように、マージンは要素の外側にある余白、パディングはボーダーとコンテンツの間にある内

  2. CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方

    CSSで入力フォームのプレースホルダー（placeholder）の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。それぞれのセレクタの役割は以下の通りです。::placeholder … 標準的な疑似要素（Chrome・Firefox・Safari などの主要ブラウザに対応）:-ms-input-placeholder … Internet Explorer 1