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

CSSで作るレスポンシブ対応ログインフォームの実装方法【サンプルコード付き】

ログインフォームは、多くのWebサイトやアプリケーションに欠かせないUI要素のひとつです。CSSを工夫すれば、スマートフォンからデスクトップPCまで、さまざまな画面幅に自動的に適応するレスポンシブ対応のログインフォームを実現できます。

この記事では、アバター画像、ユーザー名・パスワードの入力欄、「ログイン状態を保持」チェックボックス、キャンセルボタンなどを備えた、実用的なログインフォームのサンプルコードをご紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(189, 189, 255);
}
form {
    border: 3px solid #f1f1f1;
    background-color: rgb(228, 228, 228);
    margin: 20px;
}
h1 {
    text-align: center;
}
input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 30px;
}
label {
    font-size: 30px;
}
button {
    font-weight: bold;
    font-family: monospace, sans-serif, serif;
    font-size: 25px;
    background-color: #4caf50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}
button:hover {
    opacity: 0.8;
}
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}
.profilePic {
    text-align: center;
    margin: 24px 0 12px 0;
}
img.avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
.formFields {
    padding: 16px;
}
span.pass {
    float: right;
    padding-top: 16px;
}
/* 極小画面でのspanとキャンセルボタンのスタイルを変更 */
@media screen and (max-width: 300px) {
    span.pass {
        display: block;
        float: none;
    }
    .cancelbtn {
        width: 100%;
    }
}
</style>
</head>
<body>
<h1>Responsive Login Form Example</h1>
<form>
<div class="profilePic">
<img
src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-
1577909_960_720.png"
alt="Avatar"
class="avatar"/>
</div>
<div class="formFields">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required />
<label for="pass"><b>Password</b></label>
<input
type="password"
placeholder="Enter Password"
name="pass"
required/>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember" /> Remember me
</label>
</div>
<div class="formFields" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="pass">Forgot <a href="#">password?</a></span>
</div>
</form>
</body>
</html>

実装のポイント

1. viewportメタタグを必ず設定する

<meta name="viewport"> の指定により、モバイル端末でもページが適切なスケールで表示され、レスポンシブデザインが正しく機能します。

2. box-sizing: border-box で入力欄のはみ出しを防ぐ

input要素に対して width: 100% と box-sizing: border-box を組み合わせると、paddingやborderを含めた全体幅が親要素に収まるため、小さな画面でも入力欄が横にはみ出しません。

3. メディアクエリで極小画面に対応する

@media screen and (max-width: 300px) のブロックでは、幅300px以下の画面を想定して、「パスワードをお忘れの場合」のリンクを右寄せ(float)からブロック表示へ切り替え、キャンセルボタンも全幅表示に変更しています。これにより、非常に小さい画面でもレイアウトが崩れることなく表示されます。

出力結果

上記のコードをブラウザで開くと、次のようなログインフォームが表示されます。

CSSで作るレスポンシブ対応ログインフォームの実装方法【サンプルコード付き】

  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" /> <