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

HTMLとCSSでログインフォームを内蔵したレスポンシブナビゲーションメニューを作成する方法

Webサイトのナビゲーションバーにログインフォームを組み込みたいケースは多くあります。HTMLとCSSだけでも、画面幅に応じてレイアウトが自動的に切り替わるレスポンシブなナビゲーションメニューを作成できます。

この記事では、ナビゲーションリンクとユーザー名・パスワード入力欄を1つのバーに配置し、画面が狭くなると縦積みレイアウトに変化する実装例を紹介します。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        margin: 0px;
        margin-top: 10px;
        padding: 0px;
    }
    nav {
        width: 100%;
        background-color: rgb(39, 39, 39);
        overflow: auto;
        height: auto;
    }
    .links {
        display: inline-block;
        text-align: center;
        padding: 14px;
        color: rgb(178, 137, 253);
        text-decoration: none;
        font-size: 17px;
    }
    .links:hover {
        background-color: rgb(100, 100, 100);
    }
    form {
        float: right;
        margin-top: 8px;
    }
    form input{
        display: inline-block;
        padding: 6px;
        font-size: 17px;
        margin-right: 8px;
        border:none;
    }
    .selected {
        background-color: rgb(0, 18, 43);
    }
    @media screen and (max-width: 977px) {
        .links {
            display: block;
        }
        form {
            display: block;
            color:white;
        }
        form input{
            margin-right: 0px;
            display: block;
            width: 100vw;
            margin: 0px;
            border-bottom: 2px solid rgb(178, 137, 253);
            text-align: center;
        }
    }
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">
ホーム
</a>
<a class="links" href="#">
ログイン
</a>
<a class="links" href="#">
新規登録
</a>
<a class="links" href="#">お問い合わせ
</a>
<a class="links" href="#">
詳細情報
</a>
<form>
<input type="text" placeholder="ユーザー名..." />
<input type="password" placeholder="パスワード...">
</form>
</nav>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

HTMLとCSSでログインフォームを内蔵したレスポンシブナビゲーションメニューを作成する方法

画面幅を狭めた場合の表示

ブラウザのウィンドウ幅を977px以下にリサイズすると、@mediaクエリが適用され、nav要素内のコンテンツが次のように再フロー（縦積み）されます。

HTMLとCSSでログインフォームを内蔵したレスポンシブナビゲーションメニューを作成する方法

ポイント解説

1. デスクトップ表示のレイアウト

通常時は、ナビゲーションリンク（.links）をdisplay: inline-blockで横並びにし、ログインフォームはfloat: rightでバーの右端に配置しています。これにより、左側にメニュー、右側にログイン欄という一般的なヘッダーレイアウトが実現できます。

2. メディアクエリによるレスポンシブ対応

@media screen and (max-width: 977px)の条件で、画面幅が977px以下になったときにスタイルを切り替えています。リンクをdisplay: blockにすることで縦に積み重ね、入力欄もwidth: 100vwで全幅表示に変更。紫のボーダー（border-bottom）を加えることで、モバイル表示でも視認性の高いデザインになります。

3. ホバー効果と選択状態の表現

:hover疑似クラスでマウスオーバー時の背景色を変え、.selectedクラスで現在表示中のページを示すことで、ユーザーにとって分かりやすいナビゲーションを実現しています。

このように、メディアクエリとfloatレイアウトを組み合わせるだけで、JavaScriptを使わずにレスポンシブなナビゲーションメニューを作成できます。より高度な制御が必要な場合は、FlexboxやCSS Gridの活用も検討してみてください。

  1. 入力フィールド付きのナビゲーションメニューを作成する方法【HTML/CSS】

    Webサイトのナビゲーションバー（グローバルナビ）に検索ボックスのような入力フィールドを組み込むと、ユーザーはどのページにいてもすぐに目的のコンテンツを探せるようになり、サイト全体の使いやすさが大きく向上します。 HTMLとCSSを少し書き加えるだけで、ナビゲーションメニューの内部に入力フィールドを配置できます。ポイントは、CSSのfloat: right;を使って入力フィールドをナビゲーションバーの右側に寄せることです。それでは、具体的な実装方法を見ていきましょう。 実装のポイント nav要素： 幅を100%にして背景色を設定し、overflow: auto;を指定することで、子要素のフ

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

    CSSのFlexbox（フレックスボックス）とメディアクエリを組み合わせれば、画面幅に応じてレイアウトが自動的に切り替わるレスポンシブなインラインフォームを簡単に作成できます。ここでは、メールアドレスとパスワードの入力欄、送信ボタンを備えたフォームを例に、その実装方法を解説します。サンプルコード<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <sty