ヒーローヘッダー
ヒーローヘッダーとは？
ヒーローヘッダー（Hero Header）とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージで構成されたウェブサイトのことを指す
画像圧縮サイト
背景画像設定はbackground-size
css3のプロパティ：background-size
値：contain
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
値：cover
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
高さ設定はvh
ビューポートの高さの1/100
記述例 E { height : 100vh ; }
横幅設定は vw (auto/%も使用可)
指定校
サンプルテキスト
Sky Revolution
You are the one that changes the city
HOME
ABOUT
PROFILE
ACCESS
CONTACT
html
|
|
<header> <h1>Sky Revolution</h1> <p>You are the one that changes the city</p> </header> <nav class="pcnav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">PROFILE</a></li> <li><a href="#">ACCESS</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
@charset "utf-8"; /* Reset */ *{ margin:0; padding:0; } body{ line-height: 1.0; text-align: center; font-family: san-serif; } ul{ list-style: none; } a{ text-decoration: none; display: block; color: inherit; } /*Header*/ header{ height: calc(100vh - 50px); background: url(../img/sky.jpg) no-repeat center bottom/cover; color:#fff; font-family:'Tangerine', cursive; text-shadow: 2px 2px 2px #500; } h1{ /* font-size: calc(16px * 6); */ font-size: 6em; padding:100px 0 30px; } header p{ font-size: 3em; } /*Navigation*/ .pcnav ul{ display: flex; justify-content: center; } .pcnav li{ line-height: 50px; width:calc(750px / 5); } |