CSSでNETFLIXのモバイルナビゲーションをスタイリングしよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、NETFLIXのモバイルナビゲーションのスタイリングをします。

demoは「こちら」で確認できます。

ワークスペース

必要なファイルは、以下の通りです。

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

JavaScript版

JavaScriptでNETFLIXのモバイルナビゲーションを作ろう!

HTML & JavaScript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Netflix Mobile Navigation</title>
  </head>
  <body>
    <button class="nav-btn open-btn">
      <i class="fas fa-bars"></i>
    </button>

    <img src="https://logos-download.com/wp-content/uploads/2016/03/Netflix_logo.png" alt="Logo" class="logo">

    <p class="text">Mobile Navigation</p>

    <div class="nav nav-black">
      <div class="nav nav-red">
        <div class="nav nav-white">
          <button class="nav-btn close-btn">
            <i class="fas fa-times"></i>
          </button>

          <img src="https://logos-download.com/wp-content/uploads/2016/03/Netflix_logo.png" alt="Logo" class="logo">

          <ul class="list">
            <li><a href="#">Teams</a></li>
            <li><a href="#">Locations</a></li>
            <li><a href="#">Life at Netflix</a></li>
            <li>
              <ul>
                <li><a href="#">Netflix culture memo</a></li>
                <li><a href="#">Work life balance</a></li>
                <li><a href="#">Inclusion & diversity</a></li>
                <li><a href="#">Blog</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Netflix Mobile Navigation</title>

</head>

<body>

</button>

<p class="text">Mobile Navigation</p>

</button>

<li><a href="#">Teams</a></li>

<li><a href="#">Locations</a></li>

<li><a href="#">Life at Netflix</a></li>

<li>

<ul>

<li><a href="#">Netflix culture memo</a></li>

<li><a href="#">Work life balance</a></li>

<li><a href="#">Inclusion & diversity</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

// 要素の取得
const open_btn = document.querySelector('.open-btn')
const close_btn = document.querySelector('.close-btn')
const nav = document.querySelectorAll('.nav')

// クリックイベントの登録
open_btn.addEventListener('click', () => {
    nav.forEach(nav_el => nav_el.classList.add('visible'))
})

close_btn.addEventListener('click', () => {
    nav.forEach(nav_el => nav_el.classList.remove('visible'))
})

// 要素の取得

const open_btn = document.querySelector('.open-btn')

const close_btn = document.querySelector('.close-btn')

const nav = document.querySelectorAll('.nav')

// クリックイベントの登録

open_btn.addEventListener('click', () => {

nav.forEach(nav_el => nav_el.classList.add('visible'))

})

close_btn.addEventListener('click', () => {

nav.forEach(nav_el => nav_el.classList.remove('visible'))

})

スタイリング

これからCSSでスタイリングをしていきます。項目に出てくるbodyやtextは、HTMLの要素です。

全体の設定

/* フォント */
@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

* {
  /* padding/borderをwidth/heightに含める */
  box-sizing: border-box;
}

/* フォント */

@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

* {

/* padding/borderをwidth/heightに含める */

box-sizing: border-box;

}

bodyの設定

body {
  font-family: "Muli", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

body {

font-family: "Muli", sans-serif;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

}

textの設定

.text {
  /* 文字を大文字にする */
  text-transform: uppercase;
}

.text {

/* 文字を大文字にする */

text-transform: uppercase;

}

ロゴの設定

.logo {
  width: 150px;
}

.logo {

width: 150px;

}

nav-btnの設定

.nav-btn {
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 20px;
}

.nav-btn {

border: none;

background-color: transparent;

cursor: pointer;

font-size: 20px;

}

open-btnの設定

.open-btn {
  /* 位置固定 */
  position: fixed;
  top: 10px;
  left: 10px;
}

.open-btn {

/* 位置固定 */

position: fixed;

top: 10px;

left: 10px;

}

.navの設定

.nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  /* 要素を二次元平面上の水平方向で再配置します
  ここでは、画面外に出す */
  transform: translateX(-100%);
  /* アニメーション */
  transition: transform 0.3s ease-in-out;
}

.nav {

position: fixed;

top: 0;

left: 0;

height: 100vh;

/* 要素を二次元平面上の水平方向で再配置します

ここでは、画面外に出す */

transform: translateX(-100%);

/* アニメーション */

transition: transform 0.3s ease-in-out;

}

nav.visibleの設定

.nav.visible {
  /* ハンバーガーメニューを押下したとき、
  メニューを出す */
  transform: translateX(0);
}

.nav.visible {

/* ハンバーガーメニューを押下したとき、

メニューを出す */

transform: translateX(0);

}

nav-blackの設定

.nav-black {
  background-color: rgb(34, 31, 31);
  width: 60%;
  max-width: 480px;
  min-width: 320px;
  /* トランジションを開始するまでの時間
  （遅延時間）を指定 */
  transition-delay: 0.4s;
}

.nav-black.visible {
  transition-delay: 0;
}

.nav-black {

background-color: rgb(34, 31, 31);

width: 60%;

max-width: 480px;

min-width: 320px;

/* トランジションを開始するまでの時間

（遅延時間）を指定 */

transition-delay: 0.4s;

}

.nav-black.visible {

transition-delay: 0;

}

nav-redの設定

.nav-red {
  background-color: rgb(229, 9, 20);
  width: 95%;
  transition-delay: 0.2s;
}

.nav-red.visible {
  transition-delay: 0.2s;
}

.nav-red {

background-color: rgb(229, 9, 20);

width: 95%;

transition-delay: 0.2s;

}

.nav-red.visible {

transition-delay: 0.2s;

}

nav-whiteの設定

.nav-white {
  background-color: #fff;
  width: 95%;
  padding: 40px;
  /* 要素の位置の起点にする */
  position: relative;
  transition-delay: 0s;
}

.nav-white.visible {
  transition-delay: 0.4s;
}

.nav-white {

background-color: #fff;

width: 95%;

padding: 40px;

/* 要素の位置の起点にする */

position: relative;

transition-delay: 0s;

}

.nav-white.visible {

transition-delay: 0.4s;

}

close-btnの設定

.close-btn {
  opacity: 0.3;
  position: absolute;
  top: 40px;
  right: 30px;
}

.close-btn {

opacity: 0.3;

position: absolute;

top: 40px;

right: 30px;

}

listの設定

.list {
  list-style-type: none;
  padding: 0;
}

.list {

list-style-type: none;

padding: 0;

}

list liの設定

.list li {
  margin: 20px 0;
}

.list li {

margin: 20px 0;

}

list li aの設定

.list li a {
  color: rgb(34, 31, 31);
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
}

.list li a {

color: rgb(34, 31, 31);

font-size: 14px;

text-decoration: none;

text-transform: uppercase;

}

list ulの設定

.list ul {
  list-style-type: none;
  padding-left: 20px;
}

.list ul {

list-style-type: none;

padding-left: 20px;

}

これで、完成です。

おわりに

このアプリを動かすと、黒・赤・白のナビゲーションが順番に横スクロールして表示されます。

それを可能にしているのが、「transition-delay: XXs;」です。

これは、面白いですね^^

実務でもチャンスがあれば、取り入れてみたいと思います!

それでは、また!

CSSまとめ

CSS学習記事まとめ

CSSソースコード

/* フォント */
@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

* {
  /* padding/borderをwidth/heightに含める */
  box-sizing: border-box;
}

body {
  font-family: "Muli", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.text {
  /* 文字を大文字にする */
  text-transform: uppercase;
}

.logo {
  width: 150px;
}

.nav-btn {
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 20px;
}

.open-btn {
  /* 位置固定 */
  position: fixed;
  top: 10px;
  left: 10px;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  /* 要素を二次元平面上の水平方向で再配置します
  ここでは、画面外に出す */
  transform: translateX(-100%);
  /* アニメーション */
  transition: transform 0.3s ease-in-out;
}

.nav.visible {
  /* ハンバーガーメニューを押下したとき、
  メニューを出す */
  transform: translateX(0);
}

.nav-black {
  background-color: rgb(34, 31, 31);
  width: 60%;
  max-width: 480px;
  min-width: 320px;
  /* トランジションを開始するまでの時間
  （遅延時間）を指定 */
  transition-delay: 0.4s;
}

.nav-black.visible {
  transition-delay: 0;
}

.nav-red {
  background-color: rgb(229, 9, 20);
  width: 95%;
  transition-delay: 0.2s;
}

.nav-red.visible {
  transition-delay: 0.2s;
}

.nav-white {
  background-color: #fff;
  width: 95%;
  padding: 40px;
  /* 要素の位置の起点にする */
  position: relative;
  transition-delay: 0s;
}

.nav-white.visible {
  transition-delay: 0.4s;
}

.close-btn {
  opacity: 0.3;
  position: absolute;
  top: 40px;
  right: 30px;
}

.list {
  list-style-type: none;
  padding: 0;
}

.list li {
  margin: 20px 0;
}

.list li a {
  color: rgb(34, 31, 31);
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
}

.list ul {
  list-style-type: none;
  padding-left: 20px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

/* フォント */

@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

* {

/* padding/borderをwidth/heightに含める */

box-sizing: border-box;

}

body {

font-family: "Muli", sans-serif;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

}

.text {

/* 文字を大文字にする */

text-transform: uppercase;

}

.logo {

width: 150px;

}

.nav-btn {

border: none;

background-color: transparent;

cursor: pointer;

font-size: 20px;

}

.open-btn {

/* 位置固定 */

position: fixed;

top: 10px;

left: 10px;

}

.nav {

position: fixed;

top: 0;

left: 0;

height: 100vh;

/* 要素を二次元平面上の水平方向で再配置します

ここでは、画面外に出す */

transform: translateX(-100%);

/* アニメーション */

transition: transform 0.3s ease-in-out;

}

.nav.visible {

/* ハンバーガーメニューを押下したとき、

メニューを出す */

transform: translateX(0);

}

.nav-black {

background-color: rgb(34, 31, 31);

width: 60%;

max-width: 480px;

min-width: 320px;

/* トランジションを開始するまでの時間

（遅延時間）を指定 */

transition-delay: 0.4s;

}

.nav-black.visible {

transition-delay: 0;

}

.nav-red {

background-color: rgb(229, 9, 20);

width: 95%;

transition-delay: 0.2s;

}

.nav-red.visible {

transition-delay: 0.2s;

}

.nav-white {

background-color: #fff;

width: 95%;

padding: 40px;

/* 要素の位置の起点にする */

position: relative;

transition-delay: 0s;

}

.nav-white.visible {

transition-delay: 0.4s;

}

.close-btn {

opacity: 0.3;

position: absolute;

top: 40px;

right: 30px;

}

.list {

list-style-type: none;

padding: 0;

}

.list li {

margin: 20px 0;

}

.list li a {

color: rgb(34, 31, 31);

font-size: 14px;

text-decoration: none;

text-transform: uppercase;

}

.list ul {

list-style-type: none;

padding-left: 20px;

}

CSSでNETFLIXのモバイルナビゲーションをスタイリングしよう!

実装するもの

ワークスペース

JavaScript版

HTML & JavaScript

スタイリング

全体の設定

bodyの設定

textの設定

ロゴの設定

nav-btnの設定

open-btnの設定

.navの設定

nav.visibleの設定

nav-blackの設定

nav-redの設定

nav-whiteの設定

close-btnの設定

listの設定

list liの設定

list li aの設定

list ulの設定

おわりに

CSSまとめ

CSSソースコード

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

2021年5月
月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

実装するもの

ワークスペース

JavaScript版

HTML & JavaScript

スタイリング

全体の設定

bodyの設定

textの設定

ロゴの設定

nav-btnの設定

open-btnの設定

.navの設定

nav.visibleの設定

nav-blackの設定

nav-redの設定

nav-whiteの設定

close-btnの設定

listの設定

list liの設定

list li aの設定

list ulの設定

おわりに

CSSまとめ

CSSソースコード

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

Go言語/Selenium - Invalid session idが発生す…

[Golang]Map処理(get, pop,push,delete)を自作…

[Go言語]ginフレームワークでアプリ開発~バリデーションとDAO編~

Django REST frameworkでアプリケーション開発 ～ Com…

[React]~Admin画面1:ダッシュボードの作成 ~

Go言語とVue.jsで作るユーザー認証アプリ~バックエンド開発編Vol3~

TypeScript ~基礎編~ インターフェース

CSSでネオンボードアプリのスタイリングをしよう!

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル

Django REST frameworkでアプリケーション開発～ Com…