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

CSSで画像の上にナビゲーションメニューを追加する方法

CSSを使えば、背景画像の上にナビゲーションメニューを簡単に重ねて表示できます。この記事では、nav要素とアンカータグ（<a>）を組み合わせて、画像の上部に横並びのナビゲーションバーを作成する方法を、実際のコード例とともに解説します。

ポイントは次のとおりです。

  • コンテナとなるdivにbackgroundプロパティで画像を指定し、background-size: cover;で領域全体に表示させます。
  • nav要素内のリンクはdisplay: inline-block;で横並びにします。
  • :hover疑似クラスでマウスオーバー時の背景色変化を実装し、.selectedクラスで現在のページを示すリンクを強調表示します。

コード例

<!DOCTYPE html>
<html lang="en">
<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: 50%;
    background-color: rgb(23, 104, 43);
    overflow: auto;
    height: auto;
}
.links {
    display: inline-block;
    text-align: center;
    padding: 14px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 17px;
}
.links:hover {
    background-color: rgb(129, 123, 123);
}
.selected{
    background-color: rgb(0, 56, 42);
}
.image-nav{
    background:url('https://i.picsum.photos/id/652/1366/1366.jpg');
    min-height: 400px;
    padding: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 70%;
}
</style>
</head>
<body>
<div class="image-nav">
<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>
</nav>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、背景画像の上部に緑色のナビゲーションメニューが表示され、「Home」リンクが選択状態（濃い緑の背景）で強調されます。各リンクにマウスを合わせると、背景色がグレーに変化するホバー効果も確認できます。

CSSで画像の上にナビゲーションメニューを追加する方法

  1. CSSを使って画像の上にボタンを重ねて表示する方法

    CSSで画像の上にボタンを配置する方法 画像の中央にボタンを重ねて表示したい場合、親要素にposition: relativeを指定し、ボタン側にposition: absoluteを指定するのが基本のテクニックです。さらにtransform: translate(-50%, -50%)を組み合わせることで、ボタンを画像のど真ん中に正確に配置できます。 以下は、CSSを使用して画像の上にボタンを追加する具体的なコード例です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport&quo

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

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