−メニューの固定2−

indexに戻る XHTMLについて HTML5について スタイルシート CSS3 PIE Box Shadowエフェクト 角丸いろいろ ダウンロード

テーブル リスト フォーム1 フォーム2デザイン リンク イメージマップ ボーダー Flashタグ FaceBook設定

アイコンフォント アニメーション ボタンアニメ スクロールして固定 フキダシ onクリック タブ

display 画面固定・sticky［CSS］ パララックス［CSS］ フレキシブルボックス［CSS］ CSSハック一覧 CSS小技一覧 CSSサンプル雛形 CSSサンプル [table] CSSサンプル [form] CSSサンプル [flow]

パララックスの基本

.header-bg {
	background-attachment: fixed;/*ここで画面を固定する*/
	background-image: url("画像のパス");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;/*背景画像を画面で縮小する*/
	height: 100vh;
}

パララックス

＜HTML＞
<div id="block01">
<div class="box3service">
	<img class="img_center" src="img/text02.png" alt="うれしい3つのサービス" />
	<div class="boxcell">
	<img src="img/3image1.jpg" alt="店舗サービス" />
	<h3>店舗向けサービス</h3>
	<img src="img/h3-border.png" alt="border" />
	<p>サービスの概要説明文</p>
	<a href="#"><img src="img/btm-syousai1.png" alt="詳細はこちら" onmouseover="this.src='img/btm-syousai2.png'" onmouseout ="this.src='img/btm-syousai1.png'" /></a>
	</div>

	<div class="boxcell">
	<img src="img/3image2.jpg" alt="法人・事業所様向け集配サービス" />
	<h3>法人・事業所様向け集配サービス</h3>
	<img src="img/h3-border.png" alt="border" />
	<p>サービスの概要説明文</p>
	<a href="#"><img src="img/btm-syousai1.png" alt="詳細はこちら" onmouseover="this.src='img/btm-syousai2.png'" onmouseout ="this.src='img/btm-syousai1.png'" /></a>
	</div>

	<div class="boxcell">
	<img src="img/3image3.jpg" alt="個人様向け集配サービス" />
	<h3>個人様向け集配サービス</h3>
	<img src="img/h3-border.png" alt="border" />
	<p>サービスの概要説明文</p>
	<a href="#"><img src="img/btm-syousai1.png" alt="詳細はこちら" onmouseover="this.src='img/btm-syousai2.png'" onmouseout ="this.src='img/btm-syousai1.png'" /></a>
	</div>
<div class="cler"></div>
</div>
</div><!--block-->


＜CSS＞
#block01{
	background-image:url(img/bg01.jpg);
	background-attachment: fixed;/*画面からの相対位置（背景固定）*/
	background-size: cover;/*背景サイズ調整*/
	height:620px;/*div高さ*/
	position:relative;/*相対位置に配置するように調整*/
	padding-top:20px;
}
.box3service{
	width:1020px;
	margin-left:auto;
	margin-right:auto;
}
.boxcell{
	width:300px;
	border:solid 1px #e6e6e6;
	padding:10px;
	float:left;
	margin:0px 7px;
	box-shadow:0px 0px 3px #555555;
	background:rgba(255, 255, 255, 0.7);
	background:-moz-rgba(255, 255, 255, 0.7);
	background:-webkit-rgba(255, 255, 255, 0.7);
}
.box3service h3{
	font-size:130%;
	margin-top:10px;
	line-height:140%;
	text-align:center;
}
.box3service p{
	text-align:left;
	margin-bottom:20px;
}

既存の固定

途中の画像の固定

【 HTML 】
<div id="sample-kotei">
	<div class="text">この画像の上に文字が表示されます。</div>
	<img class="kihon" src="image/sample/sample-img.jpg" width="200" height="267" alt="サンプル" />
</div>

========================================

【 CSS 】
#sample-kotei{
	position: relative;
	width:100%;	
}
#sample-kotei .text{
	position: relative;
	z-index:2;
	color:#FF0000;
	font-size:20px;
	font-style:italic;
	top:100px;
	left:50px;
	font-weight:bold;
}
#sample-kotei .kihon{
	position: relative;
	z-index:1;
	top:0px;
}

上部メニューを固定する方法

スクロールしても上部が動かなくなる。
IE6以外のブラウザでは　posisyon:fixd;　で固定される。

【 CSS 】
#continer{
	width:700px;
	background-color:#FFFFFF;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
}
#box{
	padding:200px 0px 0px 0px;
}
#menue{
	width:700px;
	position:fixed;top:0px;	
	background-color:#330099;
	color:#FFFF00;
	padding:100px 0px;
}

画像の重ね順

《 親DIV 》
position:relative;
width:100%;
padding-bottom:400px;
text-align:left;


position:absolute;
z-index:1;
top:0px;
height:900px;
left:0px;
right:0px;

IE6のバグの回避 》

1. 数字が大きくなってくる毎に上に上に重なる。だから、一番基準の画像は　z-index:1;　になる
2. 基準の画像には高さを指定してあげると下の文章がその高さより下に表示されるので、高さの指定は大事！
3. centerでサイトを中央揃えにしている場合、left:0px;　right:0px;　を指定しておくと、ちゃんと中央に配置される。
4. 親DIVに　position:relative;　width:100%;　を指定してあげる。これで、IEが正しく画像の大きさを把握できるらしい。

【 HTML 】
<div id="text">
	<div id="header">
		<h1>IE6でもこれでバッチリ！！俺天才！！！</h1>
		<div id="image02"><img src="image02.jpg" width="200" height="284" alt="image" /></div>
		<div id="image01"><img src="image01.jpg" width="300" height="200" alt="image" /></div>
	</div>

	<p>これはすべてサンプルです。ちゃんと表示されているかな？？</p>
</div>

【 CSS 】
#text{
	width:500px;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFFFFF;
}

ただ、重ね順を指定するだけだと、IE6だけうまくいかない。

【 CSS 】
#text{
	width:600px;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFFFFF;
}

/* 一番下の基本画像 */
#image01{
	position:absolute;
	z-index:1;
	top:0px;
	height:300px;
	left:0px;
	right:0px;
}
#texth1{
	position:absolute;
	z-index:2;
	left:0px;
	right:0px;
}
#image02{
	position:absolute;
	z-index:3;
	top:0px;
	left:0px;
	right:0px;
}

親DIV（ここでは#header）に position:relative;　width:100%; を入れるとカッチリ揃う。

【 CSS 】
#text{
	width:600px;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFFFFF;
}

#header{
	position:relative;
	width:100%;
	padding-bottom:400px;
	text-align:left;
}
/* 一番下の基本画像 */
#image01{
	position:absolute;
	z-index:1;
	top:0px;
	height:200px;
	left:0px;
	right:0px;
}
#texth1{
	position:absolute;
	z-index:2;
	left:0px;
	right:0px;
}
#image02{
	position:absolute;
	z-index:3;
	top:0px;
	left:0px;
	right:0px;
}