【Webサイト作成】パララックスサイトのテンプレートを作成　その２

こんにちは朱夏です。

パララックスサイトテンプレートの続きを作っていこうと思います。
今回は、以下を実装してみようと思います。

- ナビゲーションバー（スクロース後上端で固定）
- コンテンツ表示エリアを3か所
- レスポンシブ対応

レスポンシブ対応は、今後常に心掛けていくことになりそうです。
それでは始めます。

コード

今回もHTMLとCSSのコードのみで作れました。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"> 
      <title>Webサイトサンプル</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <link rel="stylesheet" href="css/style.css">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://kit.fontawesome.com/da0fa6be04.js" crossorigin="anonymous"></script>

      <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
      <![endif]-->
   <script src="js/sample.js"></script>
   </head>
   <body>
      <!----- トップ ----->
      <div class="background bg-00" id="top">
         <div style="height: 100%;">
            <div class="titlename">
               <h1 class="sitetitle">パララックスサイトの練習</h1>
            </div>
         </div>
      </div>
      <!----- トップ END ----->

      <!-- 折り畳みナビゲーション -->
      <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
         <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navbar" aria-controls="Navbar" aria-expanded="false" aria-label="レスポンシブ対応ナビ">
            <span class="navbar-toggler-icon"></span>
         </button>
         <div class="text-center collapse navbar-collapse" id="Navbar">
            <ul class="navbar-nav mr-auto fustify-content-center">
               <li class="nav-item active p-2 border-left border-right"><a class="nav-link" href="#top">トップ</a></li>
               <li class="nav-item active p-2 border-left border-right"><a class="nav-link" href="#area1">リンク１</a></li>
               <li class="nav-item active p-2 border-left border-right"><a class="nav-link" href="#middlearea">中間エリア</a></li>
               <li class="nav-item active p-2 border-left border-right"><a class="nav-link" href="#area2">リンク２</a></li>
            </ul>
         </div>
      </nav>
      <!-- 折り畳みナビゲーション END -->
      
      <!----- メインコンテンツ ----->
      
      <!-- エリア１ -->
      <div class="background bg-01" id="area1">
         <h1>エリア１</h1>
         <div class="">
            <h2>コンテンツタイトル</h2>
            <p>コンテンツの内容</p>
         </div>
      </div>
      <!-- エリア１ END -->

      <!-- 中間エリア -->
      <div class="middlearea" id="middlearea">
         <h1 class="mb-0 ml-5 text-light sha">中間エリア</h1>
      </div>
      <!-- 中間エリア END -->

      <!-- エリア２ -->
      <div class="background bg-02" id="area2">
         <h1>エリア２</h1>
         <div class="">
            <h2>コンテンツタイトル</h2>
            <p>コンテンツの内容</p>
         </div>
      </div>
      <!-- エリア２ END -->

      <!----- メインコンテンツ END ----->

      <!----- フッター ----->
      <footer class="bg-dark">
         <p class="text-light text-center">(c)test.com</p>
      </footer>
      <!----- フッター END ----->

   </body>
</html>

<!DOCTYPE html>

<head>

<title>Webサイトサンプル</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h1 class="sitetitle">パララックスサイトの練習</h1>

</div>

</button>

<li class="nav-item active p-2 border-left border-right"><a class="nav-link" href="#middlearea">中間エリア</a></li>

</ul>

</div>

</nav>

<h2>コンテンツタイトル</h2>

<p>コンテンツの内容</p>

</div>

<h1 class="mb-0 ml-5 text-light sha">中間エリア</h1>

</div>

<h2>コンテンツタイトル</h2>

<p>コンテンツの内容</p>

</div>

</footer>

</body>

</html>

.background {
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.bg-00 {
    height: 93vh;
    background-image: url("../img/background0.jpg");
    position: relative;
}

.bg-01 {
    padding-top: 120px;
    height: 100vh;
    background-image: url("../img/background1.jpg");
    position: relative;
}

.bg-02 {
    padding-top: 120px;
    height: 100vh;
    background-image: url("../img/background2.jpg");
    position: relative;
}

.titlename {
    /* background-color: green; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);   
}

.sitetitle {
    color: whitesmoke;
    font-size: 8vw;
    font-weight: bold;
    text-shadow: 1px 1px 10px black;
    animation-name: title;
    animation-duration: 5s;
    /* animation-timing-function: ease-in; */
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes title {
    0% {opacity: 0; transform: translate3d(0,-50px,0);}
    100% {opacity: 1; transform: translate3d(0,0,0);}
}

.middlearea {
    background-color: rgb(78, 78, 78);
    padding-top: 120px;
    height: 100vh;
    box-shadow: 0 0 10px 10px rgba(0,0,0,0.6) inset;
}

.background {

background-position: center top;

background-repeat: no-repeat;

background-attachment: fixed;

background-size: cover;

}

.bg-00 {

height: 93vh;

position: relative;

}

.bg-01 {

padding-top: 120px;

height: 100vh;

position: relative;

}

.bg-02 {

padding-top: 120px;

height: 100vh;

position: relative;

}

.titlename {

/* background-color: green; */

position: absolute;

top: 50%;

left: 50%;

transform: translateY(-50%) translateX(-50%);

-webkit-transform: translateY(-50%) translateX(-50%);

}

.sitetitle {

color: whitesmoke;

font-size: 8vw;

font-weight: bold;

text-shadow: 1px 1px 10px black;

animation-name: title;

animation-duration: 5s;

/* animation-timing-function: ease-in; */

animation-iteration-count: 1;

animation-fill-mode: forwards;

}

@keyframes title {

0% {opacity: 0; transform: translate3d(0,-50px,0);}

100% {opacity: 1; transform: translate3d(0,0,0);}

}

.middlearea {

background-color: rgb(78, 78, 78);

padding-top: 120px;

height: 100vh;

box-shadow: 0 0 10px 10px rgba(0,0,0,0.6) inset;

}

今のところ見た目はこんな感じに動作しています。

解説

今回は今まで学習してきたことを詰め込みつつ、少しずつ修正を加えています。
今回は要素ごとではなく、機能ごとに解説してみたいと思います。

ナビゲーションバー

ナビゲーションバーは、ほぼすべてBootstrapで作られています。
画面上端で固定されるのも、画面の横幅によってハンバーガーメニューに切り替わるのもBootstrapです。

私はBootstrapのナビゲーションバーは積極的に使っていきたいと思います。
何故なら、正常に動く、レスポンシブ対応したナビゲーションバーを、HTMLファイルだけで、短時間で実装できるからです。

今回の様に、ナビゲーションバーが上端で固定される動作をBootstrap以外で実装しようとしたら、JavaScriptで条件分岐させて動きを切り替えるだとか、CSSの記述も用意するなどの手間がかかってしまいます。
しかし、Bootstrapなら、navタグにclass=”sticky-top“を追加するだけです。

コンテンツエリア

背景画像を使用して作ったエリアです。
今後、ここにテンプレートのデザインを実装していきます。
サムネイルを並べて配置して、マウスカーソルのホバーで拡大したり、色を変えたりして動きを付けたものを作っていきたいと思います。

中間エリア

画面の切り替わりのために作った中間エリアです。
折角なのでここも使っていきたいです。
因みに、中間エリアにはCSSでbox-shadowを内側にかけています。

あとがき

今回はナビゲーションバーをメインに、コンテンツを格納するためのエリアを確保しました。
ナビゲーションバーのリンクも各エリアに移動できるようにしています。

今後の予定としては、各エリアに格納するコンテンツで、サムネイルにマウスカーソルをホバーした時にそれを少し拡大させたり、ぼやけていた画像がはっきり映ったりする効果を試してみたいと思います。
また、スクロールスパイで表示エリアのリンクをハイライトさせるようにしたいと思っています。

全体的なバランスで実装を見送るかもしれませんが、とりあえず全部乗せして要らないものを削るくらいでちょうどよい気もするのでまずはやってみます。

今回は以上になります。
次回もよろしくお願いします。