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

CSSでレスポンシブなインラインフォームを作成する方法

CSSのFlexbox（フレックスボックス）とメディアクエリを組み合わせれば、画面幅に応じてレイアウトが自動的に切り替わるレスポンシブなインラインフォームを簡単に作成できます。ここでは、メールアドレスとパスワードの入力欄、送信ボタンを備えたフォームを例に、その実装方法を解説します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}
* {
  box-sizing: border-box;
}
form {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
form label {
  margin: 5px 10px 5px 0;
}
form input {
  margin: 5px 10px 5px 0;
  padding: 10px;
}
form button {
  padding: 10px 20px;
  font-size: 20px;
  background-color: rgb(39, 22, 141);
  border: 1px solid #ddd;
  color: white;
  cursor: pointer;
  font-weight: bolder;
  border-radius: 4px;
}
form button:hover {
  background-color: rgb(113, 65, 225);
}
@media (max-width: 800px) {
  form input {
    margin: 10px 0;
  }
  form {
    flex-direction: column;
    align-items: stretch;
  }
}
</style>
</head>
<body>
<h1>Responsive Inline Form Example</h1>
<form>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter email" name="email" />
<label for="pass">Password:</label>
<input type="password" id="pass" placeholder="Enter password" name="pass"/>
<button type="submit">Submit</button>
</form>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、次のような画面になります。

CSSでレスポンシブなインラインフォームを作成する方法

ブラウザウィンドウの幅を狭めていくと、メディアクエリが動作し、各要素が次のように縦方向へ再配置されます。

CSSでレスポンシブなインラインフォームを作成する方法

コードのポイント

Flexboxによる横並びレイアウト： form要素に display: flex と flex-flow: row wrap を指定することで、ラベル・入力欄・ボタンが横一列に並びます。スペースが足りなくなった場合は自動的に折り返されます。

メディアクエリによる切り替え： @media (max-width: 800px) の中で flex-direction: column を指定することで、画面幅が800px以下のときは要素が縦並びに切り替わります。さらに align-items: stretch を指定すると、入力欄とボタンがコンテナの幅いっぱいに広がり、スマートフォンでも操作性の高いフォームになります。

box-sizingの指定： 全要素に box-sizing: border-box を適用することで、paddingやborderを含めたサイズ計算になり、意図しないはみ出しを防ぐことができます。

  1. CSSで作るレスポンシブ対応のお客様の声（テスティモニアル）セクションの実装方法

    Webサイトに掲載する「お客様の声（テスティモニアル）」は、信頼性を高めるための重要な要素です。CSSを活用すれば、デスクトップでもスマートフォンでも見やすい、レスポンシブなデザインを簡単に実現できます。 この記事では、メディアクエリとfloatを使って、画面幅に応じてレイアウトが自動的に切り替わるテスティモニアルカードの作り方を解説します。 実装のポイント 基本レイアウト： プロフィール画像を float: left; で左に回り込みさせ、名前とコメントを右側に配置します。 円形画像： border-radius: 50%; を指定することで、画像を丸く表示できます。 float の解除：

  2. CSSでレスポンシブなブログレイアウトを作成する方法【完全なコード例付き】

    CSSを使ってレスポンシブなブログレイアウトを作成するには、viewportメタタグの設定と、デバイスの画面幅に応じて柔軟に調整されるレイアウト構造の定義がポイントになります。以下に、ナビゲーションバー・ブログ本文・サイドリンク・フッターを備えた、ブログサイトの完全なコード例を紹介します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <