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

ログインフォーム付きレスポンシブナビゲーションメニューの作成方法【HTML・CSS】

この記事では、HTMLとCSSのみを使って、ナビゲーションバーの右側にログインフォームを配置したレスポンシブなナビゲーションメニューを作成する方法を解説します。メディアクエリを活用することで、画面幅が狭くなった際にリンクとフォームが縦積みレイアウトへ自動的に切り替わり、デスクトップからモバイル端末まで快適に利用できるナビゲーションを実現できます。

コード例

<!DOCTYPE html>
<html>
<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="#">
          Home
      </a>
      <a class="links" href="#">
          Login
      </a>
      <a class="links" href="#">
          Register
      </a>
      <a class="links" href="#">
          Contact Us
      </a>
      <a class="links" href="#">
          More Info
      </a>
      <form>
          <input type="text" placeholder="UserName..." />
          <input type="password" placeholder="Password...">
      </form>
    </nav>
</body>
</html>

実行結果

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

ログインフォーム付きレスポンシブナビゲーションメニューの作成方法【HTML・CSS】

画面幅を縮小していくと、メディアクエリ（max-width: 977px）が適用され、nav要素内のリンクとフォームの入力欄が以下のように縦方向へ再配置されます。

ログインフォーム付きレスポンシブナビゲーションメニューの作成方法【HTML・CSS】

実装のポイント

このナビゲーションメニューの動作を支えているのは、主に次の3つのCSSテクニックです。

1. デスクトップ表示のレイアウト
リンクには display: inline-block を指定して横並びにし、ログインフォームには float: right を適用することで、ナビゲーションバーの右端にユーザー名とパスワードの入力欄を配置しています。

2. ホバー時の視覚フィードバック
.links:hover で背景色を変更することにより、ユーザーがどのリンクにマウスを重ねているかを直感的に把握できるようにしています。また、.selected クラスで現在表示中のページを強調表示できます。

3. メディアクエリによるレスポンシブ切り替え
画面幅が977px以下になると、リンクとフォームが display: block に切り替わり縦積みレイアウトへ変化します。入力欄は width: 100vw で画面幅いっぱいに広がり、下部に紫のボーダーを追加することで、モバイル画面でも入力箇所が分かりやすくなっています。

このように、JavaScriptを使わずCSSのメディアクエリだけで、デバイスの画面サイズに応じたナビゲーションメニューを簡単に実装できます。ブレークポイントの数値（977px）は、サイトのデザインやコンテンツ量に合わせて自由に調整してください。

  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