WEBサイト制作の勉強

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

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

第3回試験データ

  1. レスポンシブ化(ブレイクポイント:640px)
  2. SP時にメニューをハンバーガーメニュー(ドロワーメニュー)にする
  3. スムーススクロールでアニメーションしながらトップに戻る
  4. h1にgoogle fontsを適用させる
  5. GoogoleMap(南池袋公園)をサイト内に表示させる(レスポンシブ化)
  6. 適切な余白を入れること
  7. ニュースの数をPC時は6個全部、SP時は最新3つだけ表示させる
  8. .boxをhoverしたときにcssでスタイルに変化をつける


作例
f:id:yachin29:20190904135048p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Cafe de Felica</title>
<link href="https://fonts.googleapis.com/css?family=Niconne&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">

</head>

<body>
<header>
<div class="inner">
<h1>Cafe de Felica</h1>
<nav class="gnav">
<ul>
<li class="flex-item"><a href="#">Home</a></li>
<li class="flex-item"><a href="#">Concept</a></li>
<li class="flex-item"><a href="#">Menu</a></li>
<li class="flex-item"><a href="#">Access</a></li>
<li class="flex-item"><a href="#">Reservation</a></li>

</ul>
</nav>
</div>
</header>
<div id="content">
<div id="content-top">
<div id="main">
<img src="img/main.jpg" alt="">
</div>
<h2 class="main-head"><span>Cafe de Felica</span>は、<br class="sp-on">食とアートと音楽が交差する空間を創造します。</h2>
<p class="main-txt">シェフ・矢島が提供するのは、スペイン料理に「東京」の<br class="sp-on">エッセンスを取り入れたモダンスパニッシュ。<br>
店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。<br>
心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。</p>
</div>
<div class="wrapper">
<div class="box">
<a href="#">
<h3>Concept</h3>
<p class="box-photo">
<img src="img/box1.jpg" alt="">
</p>
<p class="box-txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</a>
</div>

<div class="box">
<a href="#">
<h3>Menu</h3>
<p class="box-photo">
<img src="img/box2.jpg" alt="">
</p>
<p class="box-txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</a>
</div>

<div class="box">
<a href="#">
<h3>Access</h3>
<p class="box-photo">
<img src="img/box3.jpg" alt="">
</p>
<p class="box-txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</a>
</div>

<div class="box">
<a href="#">
<h3>Reservation</h3>
<p class="box-photo">
<img src="img/box2.jpg" alt="">
</p>
<p class="box-txt">テキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</a>
</div>

</div>

<div class="wrapper">
<div class="info">
<h3>News</h3>
<dl>
<dt>2019/09/04</dt><dd>ニュース1</dd>
<dt>2019/08/28</dt><dd>ニュース2</dd>
<dt>2019/08/26</dt><dd>ニュース3</dd>
<dt>2019/08/20</dt><dd>ニュース4</dd>
<dt>2019/08/18</dt><dd>ニュース5</dd>
<dt>2019/08/16</dt><dd>ニュース6</dd>
</dl>
</div>

<div class="map">
<h3>Map</h3>
<iframe id="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.9298234492335!2d139.71220465109164!3d35.72794438008621!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1567528019927!5m2!1sja!2sjp" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>

</div>
</div>

<footer>
<p><small>&copy; 2018 Cafe de Felica</small></p>
</footer>
</body>
</html>