CSSでピル型ナビゲーションメニューを作成する方法
CSSでピル型（カプセル型）ナビゲーションメニューを作成するには、各リンクにborder-radiusを設定して角を丸くし、マウスオーバー時や選択中のページ用のスタイルを定義します。以下に、実際に動作するサンプルコードを示します。
コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Document</title>
<style>
nav {
width: 100%;
background-color: rgb(255, 251, 251);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
color: black;
}
.links:hover {
background-color: rgba(129, 129, 129, 0.473);
}
.selected {
background-color: rgb(33, 126, 255);
color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<h1>ピル型ナビゲーションの例</h1>
<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>
</nav>
</body>
</html>
実行結果
上記のコードをブラウザで開くと、次のように表示されます。
コードのポイント解説
- border-radius：リンクの四隅を丸くすることで、ピル（カプセル）のような形状を作り出します。値を大きくするほど、より楕円形に近い見た目になります。
- display: inline-block：リンクを横並びに配置しながら、paddingやborder-radiusなどのボックススタイルを適用できるようにしています。
- .links:hover：マウスオーバー時に背景色を半透明のグレーへ変更することで、ユーザーにインタラクティブな操作感を与えます。
- .selected：現在閲覧中のページに対応するリンクを青色の背景と白文字で強調表示するクラスです。該当するリンクにこのクラスを付与して使用します。
このように、数行のCSSを追加するだけで、シンプルでありながら視認性の高いピル型ナビゲーションメニューを簡単に実装できます。サイトのデザインに合わせて、色や角丸の大きさを自由に調整してみてください。
-
CSSでピル型ナビゲーションメニューを作成する方法
CSSでピル型（カプセル型）ナビゲーションメニューを作成するには、各リンクにborder-radiusを設定して角を丸くし、マウスオーバー時や選択中のページ用のスタイルを定義します。以下に、実際に動作するサンプルコードを示します。 コード例 <!DOCTYPE html> <html lang=ja> <head> <title>Document</title> <style> nav { width: 100%; background-color: rgb(255, 251, 251); over
-
入力フィールド付きのナビゲーションメニューを作成する方法【HTML/CSS】
Webサイトのナビゲーションバー（グローバルナビ）に検索ボックスのような入力フィールドを組み込むと、ユーザーはどのページにいてもすぐに目的のコンテンツを探せるようになり、サイト全体の使いやすさが大きく向上します。 HTMLとCSSを少し書き加えるだけで、ナビゲーションメニューの内部に入力フィールドを配置できます。ポイントは、CSSのfloat: right;を使って入力フィールドをナビゲーションバーの右側に寄せることです。それでは、具体的な実装方法を見ていきましょう。 実装のポイント nav要素： 幅を100%にして背景色を設定し、overflow: auto;を指定することで、子要素のフ