求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

ヒーローイメージを設定したページ作成

ヒーローイメージを設定したページ作成

  • 実機の空きとPC検証上の空きは、若干違います
  • 各実機に合わせて微調整しましょう
  • 「background-attachment: fixed」は、フルスクリーンで固定する場合以外は指定しません


f:id:web-0220:20190205234822p:plain


f:id:web-0220:20190205234839p:plain

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hero Header</title>
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab:400,600,700|Noto+Sans+JP:400,700,900&amp;subset=japanese" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body id="top">

<header class="header">
<div class="container">
  <h1>Hero Header</h1>
  <p class="mark"><img src="img/point.png" alt=""></p>
  <h2>Welcome to MyStyle</h2>
  <p class="btn"><a href="#">Infomation</a></p>
</div><!-- /.container -->
<nav class="gnav">
  <ul class="navMenu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Shop</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Staff</a></li>
  <li><a href="#">Contact</a></li>
  </ul>
</nav>
</header>

<main class="main">
<div class="container">
  <h3>Hero Header Style</h3>
  <p><img src="img/main2.jpg" alt=""></p>
  <p>大きな背景を使用して、インパクトを与えるサイトに仕上がるヒーローヘッダー。<br>
  ランディングページなど注目を集めたいサイトにおすすめです。<br>ヒーローイメージで使用する写真は、サイトのイメージを端的に表すものを使用するよう、心がけましょう。</p>
</div><!-- /.container -->
</main>

<footer class="footer">
<p><small>&copy; Hero Header Style</small></p>
</footer>
</body>
</html>