More than 3 years have passed since last update.

画面右上にナビゲーションを実装する

Last updated at 2021-02-15Posted at 2021-02-15

目的

次の2つの要件を満たす、Webサイトのナビゲーションを実装します。

今回はaタグを利用した各ページへのリンクの実装などは行わず、テキストの配置方法に関わるCSSのみに限定して、記事を書きます。

サイトナビゲーションとは、Webサイト上で目的のページを探す手がかりとなる、リンク付きの表示のことです。
意外と知らない？Webサイトの「ナビゲーション」の種類と役割をご説明します

Webサイト上部などに設置されている、各ページや、同ページ内の見出しへ飛ぶことのできるリンクのようなものでしょうか。
トヨタ自動車WEBサイトより次のスクリーンショットを撮影しました。
ここでいうところのラインアップ、購入サポート、etc... といったものが、ナビゲーションです。

positionは、ボックス要素を固定するプロパティです。
その中でfixedという値を指定することで、指定したテキストを画面内に固定します。
この記述により、スクロールを行っても画面内に指定されたテキストが表示され続けます。

index.html

    <header>私たちについて　お品書き　参加方法</header>

main.css

header{
  position: fixed;
}

ここまでの作業で、スクロールを行っても画面内にテキストが表示され続けるようになりました。
しかし、現状ではテキストは次の画像のように、画面左上に表示されています。

本記事においては、画面右上にテキストボックスが表示されることも、目的に含まれています。
この状態から、テキストを画面右上に表示されるようにソースコードを書き換えます。

ここでブラウザ上でF12キーを使って、デベロッパーツールを開いてみます。
次の画像から、私たちについて　お品書き　参加方法というテキストが、ひとつのボックスとして定義されていることが確認できます。

例えばここで、text-align: centerをこのボックスに付与したとしても、テキスト位置がボックス内で右揃えになるだけなので、目的は達成されません。
画面の右側にテキストが配置されるわけではありません。

cssにright : 30px;を追加し、次のようなCSSファイルに書き換えます。
rightは、ボックスの配置位置を設定するプロパティです。

この書き換えられた記述は、画面右から30pxの位置にボックスを配置することを示します。
画面右端ではなく、少し余白を作りたい場合は30pxなど指定すればよいです。
余白なしでよいなら、right: 0;で構いません。

このソースコードにより、次に示す画像のように、右上配置にすることができました。

index.html

    <header>私たちについて　お品書き　参加方法</header>

header{
  position: fixed;
  right: 30px;
}

right以外にも、top, left, bottomで位置を指定することが可能です。
ただし、leftとright、topとbottomは競合します。

もう少し具体的に説明すると、leftとrightプロパティ、topとbottomプロパティが混在している場合、それぞれleft, topの値が優先され、right, bottomの値は適用されないようです。