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

こんにちは朱夏です。

今回から、今まで学習してきたことを元にして、パララックスサイトのテンプレートを作成してみたいと思います。

仕事として作成したものではないかもしれませんが、自分のできることを見せることは出来るのではないかと思うので、一つアウトプットするつもりでやっていきます。

今回は最初に表示されるトップ画面、タイトル表示の部分を作りました。

コード

コードはこちらです。
まずはHTMLから。

<!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-01">
         <div style="height: 100%;">
            <div class="titlename">
               <h1 class="sitetitle">サイトタイトル</h1>
            </div>
         </div>
      </div>
      <nav>ナビ</nav>
      <!----- ヘッダー END ----->
      <!----- メインコンテンツ ----->
      <div class="">
         <h1>パララックスサイト練習</h1>
         <div class="">
            <!-- <h2>コンテンツタイトル</h2>
            <p>コンテンツの内容</p> -->
         </div>
      </div>
      <!----- メインコンテンツ 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>

<h1>パララックスサイト練習</h1>

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

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

</div>

</footer>

</body>

</html>

次にCSSです。

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

.bg-01 {
    height: 90vh;
    background-image: url("../img/S__25337859.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: 5vw;
    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);}
}

.background {

background-position: center top;

background-repeat: no-repeat;

background-attachment: fixed;

background-size: cover;

}

.bg-01 {

height: 90vh;

background-image: url("../img/S__25337859.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: 5vw;

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);}

}

今回はHTMLとCSSのみで書きました。

解説

備忘のために各要素についてざっくりと解説を残します。

<!DOCTYPE html>

html宣言してます。
現在では、HTMLのコードを書くときは最初にこれが必要です。

<head>～</head>

ここに書かれたコードは、基本的に画面には表示されません。
文字コード指定、タイトル（ブラウザのタイトルバーに表示されるもの）、Bootstrapや自信で作成したCSSファイルなどの呼び出しなどを行っています。

<body>～</body>

画面に表示される内容を書いている部分です。
色々試行錯誤していて、直接タグにstyleを指定している部分もあります。
この辺は後日綺麗にまとめたいと思います。

<footer>～</footer>

ここは今のところコピーライト表示を入れてるだけの枠です。
後々サイトマップなどを入れ込みたいと思います。

.background {～}

ここからはCSSの説明です。
トップの背景部分のスタイルを指定しています。
位置の指定、繰り返し表示するか、スクロールに合わせて画像を移動させるか、背景のサイズ（縦横比を維持するかも含む）をそれぞれ指定しています。

.bg-01 {～}

背景画像の表示高さ、背景画像の指定、配置方法(相対位置か絶対位置かなど)を指定しています。

.titlename {～}

こちらはサイトタイトルに指定されたスタイルです。
配置方法(今回は絶対表示)、タイトルテキストのセンター表示に4行使っています。

.sitetitle {～}

サイトタイトルのテキストサイズや色、陰影を指定しています。
併せて、タイトルをフェードインさせるための時間、繰り返し回数、アニメーション終了後の状態などを指定しています。

@keyframes title {～}

サイトタイトルをアニメーションさせる初期状態(0％)と、完了状態(100％)を指定できます。
今回は、サイトタイトルの透明度を0から1へ、表示位置を50px上から0pxまで移動させる動きを付けています。

課題
0％と100％の間に、50％などの中間状態を入れて動きに変化を付けることは可能なのか、今後検証したいと思います。

あとがき

今回は、サイトタイトルを上下の中央に配置する方法と、背景の高さを割合で表示させる方法を見つけ出すのに苦戦しました。
そのおかげで”vw”、”vh”というpxや％以外での指定方法の使い方を詳しく知る事が出来ました。

個人的な趣味ですが、影を付けたり、フェードインさせたりするのが楽しくなってしまうので、やり過ぎに注意しながら作り込んでいきたいと思います。

今回はここまでです。
次回もよろしくお願いします。