WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

ヒーローヘッダーを使ったサイト制作

f:id:yachin29:20170209004414j:plain



今回の制作のポイント

  • メインビジュアルはヒーローヘッダーでbxsliderを使ってフェードで見せる
  • お知らせ部分はajaxを使って外部データを読み込む
  • Movie部分にmp4データを設置
  • Menu部分にモーダルウィンドを設置(jQuery
  • Access部分にGoogleMapを設置
  • Form部分にGoogleAPIを使ってお問い合わせフォームを導入



最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。
「ヒーローヘッダー」と呼ばれています。

ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージで構成されたウェブサイトのことを指します。

2014年頃から海外のウェブデザインにてトレンド的にかなり増えてきている手法です。
巨大な画像により、イメージを強く植えつけることができる反面、写真のクオリティ次第でウェブサイト全体の印象を悪くすることも有りますので、フラットデザイン同様簡単そうでデザインセンスの問われるデザイン要素となっています。


参考サイト
http://racines-park.com/



ferret-plus.com


こういったレイアウトを作る際の1番のポイントは、用意する画像の大きさです。
自分のPCでは綺麗にフルスクリーンで表示されるけど、別のPCでは写真が見切れてしまっていたり、逆に余白が出てしまったり、という事が起こります。

ビットマップのデータをすべてのディスプレイでピッタリの大きさに合わせるという事は基本的に無理なので、ある大きさで書き出した画像をCSSで拡大・縮小していきます。

img要素の場合は前回やったようにフルードイメージ化する事で画像を可変にしましたが、background画像の場合は「background-size」というプロパティを使って、拡大・縮小していきます。



今回のようにフルスクリーンで画像を表示したい場合、絶対的に決まった大きさはありませんが、一番シェアの多いモニターの解像度で作るのが無難です。
モニター解像度のシェア(2019年~2020年)
f:id:yachin29:20200813002742p:plain



f:id:yachin29:20170512112150p:plain


index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ヒーローヘッダーを使ったページ制作</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Cafe de Felica</h1>
</header>
<div class="key-visual">
<img src="img/01.jpg" alt="">
</div>
<nav class="g-nav">
<ul>
<li><a href="#">Top</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Access</a></li>
</ul>
</nav>

<div class="box" id="video">
<h2>Video</h2>
<div class="video-inner">
<video src="img/Adler-60600.mp4" autoplay muted loop></video>
</div><!-- /.video-inner -->
</div><!-- /#video -->

<div class="box" id="menu">
<h2>Menu</h2>
<div class="menu-inner">
<p><img src="img/01.jpg" alt=""></p>
<p><img src="img/02.jpg" alt=""></p>
<p><img src="img/03.jpg" alt=""></p>
</div>
</div><!-- /#menu -->

<div class="box" id="info">
<h2>News</h2>
<dl class="news-list" id="list-box">

</dl>
</div><!-- /#info -->
<p id="to-top">
<a href="#">
<img src="img/to-top.svg" alt="">
</a>
</p>

<footer>
<p><small>&copy; Cade de FELICA</small></p>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$('#list-box').load('news.txt');

//#to-top>aをon.clickしたら
$('#to-top>a').on('click',function(){
$('html,body').animate({scrollTop:0},200);
});
});
</script>
</body>
</html>

style.css

@charset "utf-8";

:root{
--main-color: #972b56;
}

html,body,h1,h2,h3,p,ul,li,dl,dt,dd{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
max-width: 100%;/* フルードイメージ */
}

header{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 300px;
height: 100px;
text-align: center;
}
h1{
color: var(--main-color);
background-color:rgba(255,255,255,0.5);
}
.key-visual{
width: 100%;
height: calc(100vh - 50px);
}
.key-visual>img{
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
}
.g-nav{
width: 100%;
height: 50px;
margin-bottom: 100px;
background-color: #FFF;
position: sticky;
top: 0;
z-index: 9999;
}
.g-nav>ul{
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.g-nav li{
margin: 0 20px;
}
.g-nav a{
padding: 10px;
color: var(--main-color);
font-weight: bold;
}
.g-nav a:hover{
text-decoration: underline;
}
h2{
color: var(--main-color);
text-align: center;
font-size: 30px;
}
.video-inner{
max-width: 960px;
height: 400px;
margin: 100px auto;
}
video{
object-fit: cover;
width: 100%;
height: 100%;
}
.menu-inner{
max-width: 960px;
margin: 50px auto;
display: flex;
justify-content: space-between;
}
.menu-inner>p{
width: calc((100% - 40px) / 3);
overflow: hidden;
}
.menu-inner>p>img{
transition: 0.3s;
}
.menu-inner>p:hover>img{
transform: scale(1.2);
}
.news-list{
max-width: 800px;
margin: 0 auto 100px;
display: flex;
flex-wrap: wrap;
}
dt{
width: 30%;
margin-bottom: 20px;
border-bottom: 1px solid var(--main-color);
display: none;/* 非表示 */
}
dd{
width: 70%;
margin-bottom: 20px;
border-bottom: 1px solid var(--main-color);
padding-bottom: 10px;
display: none;/* 非表示 */
}
dt:nth-of-type(-n+4){
display: block;
}
dd:nth-of-type(-n+4){
display: block;
}
#to-top{
width: 50px;
height: 50px;
position: fixed;
right: 50px;
bottom: 140px;
}



footer{
height: 100px;
background-color: var(--main-color);
}
footer>p{
text-align: center;
line-height: 100px;
color: #FFF;
}