こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、NETFLIXのモバイルナビゲーションのスタイリングをします。
demoは「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
1 2 3 4 5 |
$ tree . ├── index.html ├── script.js └── style.css |
JavaScript版
HTML & JavaScript
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 要素の取得 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の要素です。
全体の設定
1 2 3 4 5 6 7 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); * { /* padding/borderをwidth/heightに含める */ box-sizing: border-box; } |
bodyの設定
1 2 3 4 5 6 7 8 |
body { font-family: "Muli", sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } |

textの設定
1 2 3 4 |
.text { /* 文字を大文字にする */ text-transform: uppercase; } |

ロゴの設定
1 2 3 |
.logo { width: 150px; } |

nav-btnの設定
1 2 3 4 5 6 |
.nav-btn { border: none; background-color: transparent; cursor: pointer; font-size: 20px; } |

open-btnの設定
1 2 3 4 5 6 |
.open-btn { /* 位置固定 */ position: fixed; top: 10px; left: 10px; } |

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

nav.visibleの設定
1 2 3 4 5 |
.nav.visible { /* ハンバーガーメニューを押下したとき、 メニューを出す */ transform: translateX(0); } |

nav-blackの設定
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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の設定
1 2 3 4 5 6 7 8 9 |
.nav-red { background-color: rgb(229, 9, 20); width: 95%; transition-delay: 0.2s; } .nav-red.visible { transition-delay: 0.2s; } |

nav-whiteの設定
1 2 3 4 5 6 7 8 9 10 11 12 |
.nav-white { background-color: #fff; width: 95%; padding: 40px; /* 要素の位置の起点にする */ position: relative; transition-delay: 0s; } .nav-white.visible { transition-delay: 0.4s; } |

close-btnの設定
1 2 3 4 5 6 |
.close-btn { opacity: 0.3; position: absolute; top: 40px; right: 30px; } |

listの設定
1 2 3 4 |
.list { list-style-type: none; padding: 0; } |

list liの設定
1 2 3 |
.list li { margin: 20px 0; } |

list li aの設定
1 2 3 4 5 6 |
.list li a { color: rgb(34, 31, 31); font-size: 14px; text-decoration: none; text-transform: uppercase; } |

list ulの設定
1 2 3 4 |
.list ul { list-style-type: none; padding-left: 20px; } |

これで、完成です。
おわりに
このアプリを動かすと、黒・赤・白のナビゲーションが順番に横スクロールして表示されます。
それを可能にしているのが、「transition-delay: XXs;」です。
これは、面白いですね^^
実務でもチャンスがあれば、取り入れてみたいと思います!
それでは、また!
CSSまとめ
CSSソースコード
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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; } |
コメントを残す
コメントを投稿するにはログインしてください。