年末まで毎日webサイトを作り続ける大学生 〜16日目 Ap●le 公式サイトのファーストビューを真似して作ってみる〜

はじめに

こんにちは！
年末まで毎日webサイトを作っている者です。
今日はゆくゆくwebサイト制作でお金をもらうための練習ということで、Ap●leのファーストビューをソースコードを見ずに動きを見て模倣してみました。（fontだけはソースみました)
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は16日目。(2019/11/3)
よろしくお願いします。

サイトURL

やったこと

Ap●leのファーストビューを真似してみました。
まずは結果からどうぞ (gif)↓

以下順番に説明していきます。

1. レスポンシブなメニューの表示変更の方法
2. 動画の挿入方法と注意点
3. JavaScriptを用いて要素を作る

1. レスポンシブなメニューの表示変更の方法

ちょうどheaderのメニューの数が変わるのが767pxと768pxでした。
なのでまずはcssのメディアクエリで大きさによってスタイルを変更します。

/* ↓これでサイズごとにメニューの数を変更する */
@media screen and (max-width:767px) {
    #width767px {
        display: flex;
        justify-content: space-around;
        min-width: 320px;
        width: 100%;
    }
.headerItem1 {
/* ↓メニューの切り替えはこれで行う */
    display: none;
}
}
@media screen and (min-width:768px) {
    #width_1000px {
        display: flex;
        justify-content: space-around;
        min-width: 768px;
        max-width: 1000px;
        width: 100%;
    }
    .headerItem2 {
/* ↓メニューの切り替えはこれで行う */
        display: none;
    }
}

あらかじめふた通りのdomとデザインを用意しておいて、あるpx以上ならこっちを消す、違う時はこっちを消すということをdisplayのnoneで実現しています。

2. 動画の挿入方法と注意点

次に動画の挿入ですが、これは基本的にhtmlで書きます。全体に表示したいなど細かいところはcssの出番です。
html ↓

     <video id="first_video" muted autoplay loop>
            <source src="sample1.mp4">
     </video>

#first_video {
/* ↓固定する */
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
/* ↓headerを隠さないようにz-indexを指定する */
    z-index: -100;
/* ↓画面全体に表示されるようにする */
    background-size: cover;
}

htmlの方で1つ注意点があります。属性にmutedを入れないと動画が自動再生されなくなるので、自動再生したいなら必ず入れましょう。（ちなみにmutedと全く関係ないですが、sourceタグを使わずvideoタグ内にsrc属性を書こうとして30分ぐらい奮闘しました。srcをvideoに直接書いたらダメなんですね・・・）

3. JavaScriptを用いて要素を作る

これはおまけというか、必ずしもしなくていいですが、将来を見越してスクリプトからDOMをいじる練習をしました。

window.onload = function () {

    let width_1000px = document.getElementById('width_1000px');
    let width767px = document.getElementById('width767px');
    let text = ['#ロゴ',
        'Mac',
        'iPad',
        'iPhone',
        'Watch',
        'TV',
        'Music',
        'サポート',
        '#検索',
        '#バッグ'
    ];
    let text2 = ['#メニュ', '#ロゴ', 'バッグ'];


    for (var i = 0; 10 > i; i++) {
        var headerItem = document.createElement('div');
        var headerItemText = document.createTextNode(text[i]);
        console.log(headerItemText);
        headerItem.appendChild(headerItemText);
        headerItem.setAttribute('class', 'headerItem headerItem1');
        width_1000px.appendChild(headerItem);
    }

    for (var i = 0; 3 > i; i++) {
        var headerItem = document.createElement('div');
        var headerItemText = document.createTextNode(text2[i]);
        headerItem.appendChild(headerItemText);
        headerItem.setAttribute('class', 'headerItem headerItem2');
        width767px.appendChild(headerItem);
    }
}

サイズごとに2パターンの要素を作るように書いています。
長いのでもうちょっと簡単に書けそうですね。(というか他に方法がある気がする)

感想

今日は外見だけ真似をして動作までは実装していません。だからサイズが小さくなった時にハンバーガーメニューを押してもメニューは出てきません。サイトを作るのはなかなか大変だなぁと思いつつも、実際に目に見える形になると嬉しいですね。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願いします。

参考

1. Free Stock Video Footage HD Royalty-Free Videos Download (https://mazwai.com/#/grid)

動画使わせていただきました。ありがとうございます！