こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、CSSでSticky Navigationのスタイリング方法を学びました。
demoは「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
1 2 3 4 5 6 |
$ 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 |
<!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="style.css" /> <title>Sticky Navigation</title> </head> <body> <nav class="nav"> <div class="container"> <h1 class="logo"><a href="/index.html">My Website</a></h1> <ul> <li><a href="#" class="current">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> <div class="hero"> <div class="container"> <h1>Welcome To My Website</h1> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?</p> </div> </div> <section class="container content"> <h2>Content One</h2> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem voluptates eveniet tempora ut cupiditate magnam, sapiente, hic quo in ipsum iste soluta eaque perferendis nihil recusandae dolore officia aperiam corporis similique. Facilis quos tempore labore totam! Consectetur molestiae iusto ducimus error reiciendis aspernatur dolor, modi dolorem sit architecto, voluptate magni sunt unde est quas? Voluptates a dolorum voluptatum quo perferendis aut sit. Aspernatur libero laboriosam ab eligendi omnis delectus earum labore, placeat officiis sint illum rem voluptas ipsum repellendus iste eius recusandae quae excepturi facere, iure rerum sequi? Illum velit delectus dicta et iste dolorum obcaecati minus odio eligendi!</p> <h3>Content Two</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur provident nostrum possimus inventore nisi laboriosam consequatur modi nulla eos, commodi, omnis distinctio! Maxime distinctio impedit provident, voluptates illo odio nostrum minima beatae similique a sint sapiente voluptatum atque optio illum est! Tenetur tempora doloremque quae iste aperiam hic cumque repellat?</p> </section> <script src="script.js"></script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 要素を取得する const nav = document.querySelector('.nav') // scrollイベントの登録 window.addEventListener('scroll', fixNav) // Navigation Barの反転処理 function fixNav() { // scrollYはページのスクロール位置 // offsetHeightは、Navigation Barの位置 if (window.scrollY > nav.offsetHeight + 150) { // activeクラスを付与 nav.classList.add('active') } else { // activeクラスを除去 nav.classList.remove('active') } } |

スタイリング
CSSでスタイリングをしていきましょう。
なお、項目に出てくるbodyやcontainerは、HTMLの要素です。
全体の設定
1 2 3 4 5 6 7 8 9 10 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Open+Sans"); * { /* ボックスサイズを算出 padding/borderをwidth/hightに含める */ box-sizing: border-box; margin: 0; padding: 0; } |

bodyの設定
1 2 3 4 5 |
body { font-family: "Open Sans", sans-serif; color: #222; padding-bottom: 50px; } |

containerの設定
1 2 3 4 |
.container { max-width: 1200px; margin: 0 auto; } |

navの設定
1 2 3 4 5 6 7 8 9 10 |
.nav { background-color: #222; /* 位置を固定 */ position: fixed; top: 0; left: 0; right: 0; /* アニメーションをつける */ transition: all 0.3s ease-in-out; } |

navのcontainer設定
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.nav .container { /* flexアイテムにする */ display: flex; /* 各アイテムを均等に配置し 最初のアイテムは先頭に寄せ、 最後のアイテムは末尾に寄せる */ justify-content: space-between; /* flex重点中央にアイテムを配置 */ align-items: center; /* 上下 | 左右 */ padding: 20px 0; transition: all 0.3 ease-in-out; } |

navのul設定
1 2 3 4 5 6 7 8 |
.nav ul { display: flex; /* リストの●を消す */ list-style-type: none; align-items: center; /* flex横軸中央にアイテムを配置 */ justify-content: center; } |

navのa設定
1 2 3 4 5 6 7 |
.nav a { color: #fff; /* リンクの下線を消す */ text-decoration: none; padding: 7px 15px; transition: all 0.3s ease-in-out; } |

その他のnav設定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.nav.active { background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .nav.active a { color: #000; } .nav.active .container { padding: 10px 0; } .nav a.current, .nav a:hover { color: #c0392b; font-weight: bold; } |

heroの設定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.hero { height: 100vh; /* 背景イメージの設定 */ background-image: url("https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"); /* 要素サイズに応じて画像の縦横比を合わせる */ background-size: cover; /* 背景色の初期位置を定める */ background-position: bottom center; /* 画像の繰り返しなし */ background-repeat: no-repeat; color: #fff; display: flex; justify-content: center; align-items: center; /* テキスト中央 */ text-align: center; /* アイテムの起点位置に設定 */ position: relative; margin-bottom: 20px; /* 要素のz軸方向の表示順を変更 */ z-index: -2; } |

hero::beforeの設定
1 2 3 4 5 6 7 8 9 10 11 |
/* オーバーレイをかける */ .hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: -1; } |

heroのh1設定
1 2 3 4 |
.hero h1 { font-size: 46px; margin: -20px 0 20px; } |

heroのp設定
1 2 3 4 |
.hero p { font-size: 20px; letter-spacing: 1px; } |

contentの設定
1 2 3 4 5 6 7 8 9 10 11 |
.content h2, .content h3 { font-size: 150%; margin: 20px 0; } .content p { color: #555; line-height: 30px; letter-spacing: 1.2px; } |

おわりに
最近仕事でページ作成業務があったのですが、ここで学んだことを生かして、かっこいいページを作りました^^
写経している感じですが、結構手が覚えていて、スラスラとページレイアウトができるようになっています。
この調子で、勉強していこうと思いました。
それでは、また!
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 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Open+Sans"); * { /* ボックスサイズを算出 padding/borderをwidth/hightに含める */ box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Open Sans", sans-serif; color: #222; padding-bottom: 50px; } .container { max-width: 1200px; margin: 0 auto; } .nav { background-color: #222; /* 位置を固定 */ position: fixed; top: 0; left: 0; right: 0; /* アニメーションをつける */ transition: all 0.3s ease-in-out; } .nav .container { /* flexアイテムにする */ display: flex; /* 各アイテムを均等に配置し 最初のアイテムは先頭に寄せ、 最後のアイテムは末尾に寄せる */ justify-content: space-between; /* flex重点中央にアイテムを配置 */ align-items: center; /* 上下 | 左右 */ padding: 20px 0; transition: all 0.3 ease-in-out; } .nav ul { display: flex; /* リストの●を消す */ list-style-type: none; align-items: center; /* flex横軸中央にアイテムを配置 */ justify-content: center; } .nav a { color: #fff; /* リンクの下線を消す */ text-decoration: none; padding: 7px 15px; transition: all 0.3s ease-in-out; } .nav.active { background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .nav.active a { color: #000; } .nav.active .container { padding: 10px 0; } .nav a.current, .nav a:hover { color: #c0392b; font-weight: bold; } .hero { height: 100vh; /* 背景イメージの設定 */ background-image: url("https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"); /* 要素サイズに応じて画像の縦横比を合わせる */ background-size: cover; /* 背景色の初期位置を定める */ background-position: bottom center; /* 画像の繰り返しなし */ background-repeat: no-repeat; color: #fff; display: flex; justify-content: center; align-items: center; /* テキスト中央 */ text-align: center; /* アイテムの起点位置に設定 */ position: relative; margin-bottom: 20px; /* 要素のz軸方向の表示順を変更 */ z-index: -2; } /* オーバーレイをかける */ .hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: -1; } .hero h1 { font-size: 46px; margin: -20px 0 20px; } .hero p { font-size: 20px; letter-spacing: 1px; } .content h2, .content h3 { font-size: 150%; margin: 20px 0; } .content p { color: #555; line-height: 30px; letter-spacing: 1.2px; } |
コメントを残す
コメントを投稿するにはログインしてください。