2022/06/06

【WEB制作】ウィンドウ上部を固定したい!

ウィンドウ上部のヘッダ部分を固定にするHPをよく見かけます。
そのやり方をか説明します。
以下の図のように固定部はスクロールしません。

HTMLの記述は以下のようになります。
ポイントは、classで”header”を定義します。ここをCSSで固定とします。
スクロール部はclass”main”で別定義としときます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ナビゲーションウィンドウ固定</title>
<link rel="stylesheet" href="template_fixed_header.css">
</head>
<body>

	<div class="header">
		<h1>ナビゲーションウィンドウ固定</h1>
	</div>

	<div class="main">
		<h1>スクロール部分1</h1>
		<h1>スクロール部分2</h1>
		<h1>スクロール部分3</h1>
		<h1>スクロール部分4</h1>
		<h1>スクロール部分5</h1>
		<h1>スクロール部分6</h1>
		<h1>スクロール部分7</h1>
		<h1>スクロール部分8</h1>
		<h1>スクロール部分9</h1>
		<h1>スクロール部分10</h1>
		<h1>スクロール部分11</h1>
		<h1>スクロール部分12</h1>
		<h1>スクロール部分13</h1>
		<h1>スクロール部分14</h1>
		<h1>スクロール部分15</h1>
		<h1>スクロール部分16</h1>
		<h1>スクロール部分17</h1>
		<h1>スクロール部分18</h1>
		<h1>スクロール部分19</h1>
		<h1>スクロール部分20</h1>
	</div>
</body>
</html>

CSSの”.header”の “position: fixed”と定義します。これで固定されます。
CSSの.”main”の”position: absolute”として、”top: 80px”とします。この値は固定部の高さを指定します。
.header”の “z-index: 10″、.main”の “z-index: 0″とします。これは.mainの重なりを.headerを上にし隠れないようにするためです。.headerより値が小さければOKです。

.header {
	position: fixed;
	z-index: 10;
	left: 0;
	top: 0;
	width: 100%;
	margin: 0 auto;
	color: white;
	background: #000000;
}

.main {
	position: absolute;
	z-index: 0;
	left: 0;
	top: 80px;
	width: 100%;
	margin: 0 auto;
	color:black;
	background: white;
}

簡単ですが以上となります。
HTML/CSSの定義の細かな説明はだいぶ省きましたが、わからないときはググて調べるか、遠慮なく私に聞いていだたいてもかまいません。

プロフィール

管理者 HONDA

福島県出身

ITで商売を効率化したいが、ITが苦手、分からない方是非ご相談ください。50過ぎの「おっさん」です。そのほうが話しやすい方はお勧めします。

カテゴリ

ファッション

美容

お酒


西暦和暦干支年齢対応表


設定

時計表示

都道府県

ブックマーク1

ブックマーク2

ブックマーク3

プライバシーポリシー

はじめに

HONDA WORK SHOPでは、ご利用のユーザ様個人情報の取り扱いに細心の注意を払っております。

また当サイトではアフィリエイトプログラムを利用しております。

第三者配信事業者(Amazonアソシエイト、楽天アフィリエイト、A8.net)がCookie を使用して、サイト利用者が当サイトや他のサイトに過去にアクセスした際の情報に基づいて広告を配信します。

Google が広告 Cookie を使用することにより、サイト利用者が当サイトや他のサイトにアクセスした際の情報に基づいて、Google やそのパートナーは適切な広告をサイト利用者に対して表示します。

広告設定でパーソナライズ広告を無効にすることができます。

Cookieの利用について

Cookieは、当サイトや他サイトへのアクセスに関する情報が含まれており、多くのサイトで利用者に有益な機能を提供する目的で使用されています。

Cookieには、サイト利用者の個人情報(氏名、住所、メールアドレス、電話番号)は一切含まれません。

アクセス解析ツールについて

当サイトでは、アクセス解析ツール「Google Analytics」を利用しています。

「Google Analytics」はトラフィックデータの収集のためにCookieを使用しています。

このトラフィックデータは匿名で収集されており、個人を特定するものではありません。

この機能はCookieを無効にすることで収集を拒否することができますので、ご利用のブラウザ設定をご確認のうえ、拒否設定を行ってください。

本ポリシーの変更

当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。

修正された最新のプライバシーポリシーは常に本ページにて開示されます。