初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

HTML CSS ヒーローヘッダーを作成する

色々なサイトで見受けられる大きな画像が画面いっぱいに広がり スクロールしても写真が動かず他の部分が動くレイアウトがあります。

一般的にこういったレイアウトをヒーローヘッダーと呼ばれるそうです。
HTMLとCSSでヒーローヘッダーを簡単に記述することが出来ますので記述します。

f:id:bellsmarket:20150223103434p:plain

f:id:bellsmarket:20150223103437p:plain

body {
background:url(任意の画像パス);
/*画像を常に天地左右の中央に配置*/


background-position:center center;
/*画像を繰り返し表示しない*/


background-repeat: no-repeat;
/*コンテンツの高さが画像の高さより大きい時、動かないように固定*/


background-attachment: fixed;
/*表示するコンテナの大きさに基づいて、背景画像の調整*/


background-size: cover;
/*背景画像が読み込まれる前に表示される背景のカラー 画像が読み込まれるまでの一瞬の背景。文字との同化を防ぐ為*/


background-color:#464646;
}

#container {
width:30%;
height: auto;
margin:10px;
background:rgba(235, 255, 240, 0.6);/*a=alphaの略で不透明度の調整*/
color:#93C;
padding:20px;
}

画像のようにスクロールしてもバックの画像は固定になります。
今回のはあくまでも一例ですがcontainerの置くスペースを右にしたり、背景色の色を変えたり アレンジは無数ですので色々試してみてください。

topへ戻る