先生と生徒の会話形式で理解しよう

生徒

「先生、テキストボックスの文字が端にくっついて見にくいんです。どうしたらいいですか？」

先生

「それなら、パディングを使うと簡単に文字とボックスの間に余白を作れます。」

生徒

「パディングって、ボタンのときと同じものですか？」

先生

「そうです。パディングはボックスの内側の余白です。テキストボックスの中の文字と境界線の距離を調整できます。」

生徒

「なるほど、文字が窮屈にならないように調整できるんですね。」

先生

「その通りです。適切なパディングは、読みやすく、見やすいテキストボックスを作る基本です。」

1. パディングとは何か？テキストボックスでの役割

CSSのボックスモデルでは、要素は「コンテンツ」「パディング」「ボーダー」「マージン」の順に構成されています。パディングはコンテンツの周りの内側の余白で、テキストボックスの文字や入力内容と境界線の間に空間を作ります。文字や入力がボーダーに近すぎると読みにくくなるので、パディングを適切に設定することが大切です。

簡単に言うと、テキストボックスは箱、文字はその中身、パディングは箱の内側のクッションのようなものです。このクッションがあることで、文字が窮屈にならず、視覚的に快適なボックスになります。

2. 基本的なパディングの設定方法

テキストボックスにパディングを設定するには、CSSでpaddingプロパティを使います。上下左右にそれぞれ異なる余白を設定したい場合は、padding-top、padding-right、padding-bottom、padding-leftを使います。


<style>
    .textbox {
        padding: 10px 15px;        /* 上下10px、左右15px */
        border: 2px solid #007BFF; /* 境界線 */
        border-radius: 5px;        /* 角丸 */
        font-size: 16px;
        width: 300px;
    }
</style>

<input type="text" class="textbox" placeholder="ここに文字を入力">

ブラウザ表示

この例では、上下に10px、左右に15pxのパディングを設定しました。文字がボックスの境界線に近すぎず、入力欄が見やすくなります。

3. パディングの上下左右を個別に調整する

テキストボックスのデザインによっては、上下と左右の余白を個別に調整したいことがあります。その場合は、4つのプロパティを使います。


<style>
    .custom-textbox {
        padding-top: 12px;
        padding-right: 20px;
        padding-bottom: 12px;
        padding-left: 20px;
        border: 1px solid #28A745;
        border-radius: 4px;
        width: 350px;
        font-size: 15px;
    }
</style>

<input type="text" class="custom-textbox" placeholder="文字を入力してください">

ブラウザ表示

この方法で上下左右の余白を自由に設定できるため、テキストボックスの高さや幅を調整しつつ、文字が読みやすいデザインにできます。

4. パディングを使った複数行テキストボックスの調整

テキストエリアなど複数行のテキストボックスでは、パディングが特に重要です。上下のパディングが少ないと文字が窮屈に見えます。左右のパディングが少ないと入力中に文字がボーダーに近くなり、視覚的に不快です。


<style>
    .textarea-box {
        padding: 15px 20px;         /* 上下15px、左右20px */
        border: 2px solid #FFC107;
        border-radius: 6px;
        width: 400px;
        height: 150px;
        font-size: 16px;
    }
</style>

<textarea class="textarea-box" placeholder="ここに文章を入力"></textarea>

ブラウザ表示

この例では上下に15px、左右に20pxのパディングを設定し、文字が読みやすく快適な入力空間を作っています。