【CSS】input と textarea の高さと行間を調整する方法

フォーム要素のデザインは、ウェブサイトのユーザーエクスペリエンスに大きな影響を与えます。特に、input と textarea の高さや行間を調整することで、ユーザーがより使いやすいフォームを作成できます。この記事では、CSSを使ってこれらの要素をカスタマイズする方法をご紹介します。

input 要素の高さを調整する

まず、input 要素の高さを調整する方法を見ていきましょう。

HTML

<input type="text" class="input-box" />

CSS

.input-box {
    height: 40px; /* 高さを40pxに設定 */
}

これで、input 要素の高さが40ピクセルに設定されました。

textarea 要素の高さを調整する

次に、textarea 要素の高さを設定する方法です。

HTML

<textarea class="textarea-box"></textarea>

CSS

.textarea-box {
    height: 200px; /* 高さを200pxに設定 */
}

これにより、textarea 要素の高さが200ピクセルに設定されました。

行間の調整（line-height の調整）

行間を調整することで、テキストの読みやすさを向上させることができます。

input 要素の場合

HTML

<input type="text" class="input-box" />

CSS

.input-box {
    line-height: 1.5; /* 行間を1.5倍に設定 */
}

textarea 要素の場合

HTML

<textarea class="textarea-box"></textarea>

CSS

.textarea-box {
    line-height: 1.5; /* 行間を1.5倍に設定 */
}

複数のスタイルを一度に設定する

最後に、height や line-height など、複数のスタイルを一度に設定する例をご紹介します。

HTML

<input type="text" class="input-box" />
<textarea class="textarea-box"></textarea>

CSS

.input-box {
    height: 40px;
    line-height: 1.5;
    padding: 10px; /* パディングを追加 */
    border: 1px solid #ccc; /* ボーダーを設定 */
    font-size: 16px; /* フォントサイズを設定 */
}

.textarea-box {
    height: 200px;
    line-height: 1.5;
    padding: 10px; /* パディングを追加 */
    border: 1px solid #ccc; /* ボーダーを設定 */
    font-size: 16px; /* フォントサイズを設定 */
}

これで、input および textarea 要素の高さや行間を含むスタイルを簡単に調整できました。

まとめ

フォーム要素のデザインを改善することで、ユーザーエクスペリエンスを向上させることができます。input と textarea の高さや行間を適切に設定し、ユーザーにとって使いやすいフォームを作成しましょう。CSSを活用して、柔軟にスタイルをカスタマイズしてください。