CSSでSticky Navigationをスタイリングしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、CSSでSticky Navigationのスタイリング方法を学びました。

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

ワークスペース

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

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

$ tree

├── index.html

├── script.js

└── style.css

JavaScript版

JavaScript(あとCSS)でSticky Navigationを実装しよう!

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="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>

<!DOCTYPE html>

<head>

<title>Sticky Navigation</title>

</head>

<body>

<h1 class="logo"><a href="/index.html">My Website</a></h1>

<ul>

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

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

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

</ul>

</div>

</nav>

<h1>Welcome To My Website</h1>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?</p>

</div>

<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>

</body>

</html>

// 要素を取得する
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')
  }
}

// 要素を取得する

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の要素です。

全体の設定

/* フォント */
@import url("https://fonts.googleapis.com/css?family=Open+Sans");

* {
  /* ボックスサイズを算出
  padding/borderをwidth/hightに含める */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* フォント */

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

* {

/* ボックスサイズを算出

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

box-sizing: border-box;

margin: 0;

padding: 0;

}

bodyの設定

body {
  font-family: "Open Sans", sans-serif;
  color: #222;
  padding-bottom: 50px;
}

body {

font-family: "Open Sans", sans-serif;

color: #222;

padding-bottom: 50px;

}

containerの設定

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.container {

max-width: 1200px;

margin: 0 auto;

}

navの設定

.nav {
  background-color: #222;
  /* 位置を固定 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* アニメーションをつける */
  transition: all 0.3s ease-in-out;
}

.nav {

background-color: #222;

/* 位置を固定 */

position: fixed;

top: 0;

left: 0;

right: 0;

/* アニメーションをつける */

transition: all 0.3s ease-in-out;

}

navのcontainer設定

.nav .container {
  /* flexアイテムにする */
  display: flex;
  /* 各アイテムを均等に配置し
     最初のアイテムは先頭に寄せ、
     最後のアイテムは末尾に寄せる */
  justify-content: space-between;
  /* flex重点中央にアイテムを配置 */
  align-items: center;
  /* 上下 | 左右 */
  padding: 20px 0;
  transition: all 0.3 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設定

.nav ul {
  display: flex;
  /* リストの●を消す */
  list-style-type: none;
  align-items: center;
  /* flex横軸中央にアイテムを配置 */
  justify-content: center;
}

.nav ul {

display: flex;

/* リストの●を消す */

list-style-type: none;

align-items: center;

/* flex横軸中央にアイテムを配置 */

justify-content: center;

}

navのa設定

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

.nav a {

color: #fff;

/* リンクの下線を消す */

text-decoration: none;

padding: 7px 15px;

transition: all 0.3s ease-in-out;

}

その他のnav設定

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

.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の設定

.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 {

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の設定

/* オーバーレイをかける */
.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::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設定

.hero h1 {
  font-size: 46px;
  margin: -20px 0 20px;
}

.hero h1 {

font-size: 46px;

margin: -20px 0 20px;

}

heroのp設定

.hero p {
  font-size: 20px;
  letter-spacing: 1px;
}

.hero p {

font-size: 20px;

letter-spacing: 1px;

}

contentの設定

.content h2,
.content h3 {
  font-size: 150%;
  margin: 20px 0;
}

.content p {
  color: #555;
  line-height: 30px;
  letter-spacing: 1.2px;
}

.content h2,

.content h3 {

font-size: 150%;

margin: 20px 0;

}

.content p {

color: #555;

line-height: 30px;

letter-spacing: 1.2px;

}

おわりに

最近仕事でページ作成業務があったのですが、ここで学んだことを生かして、かっこいいページを作りました^^

写経している感じですが、結構手が覚えていて、スラスラとページレイアウトができるようになっています。

この調子で、勉強していこうと思いました。

それでは、また！

CSSまとめ

CSS学習記事まとめ

CSSソースコード

/* フォント */
@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;
}

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;

}

CSSでSticky Navigationをスタイリングしよう!

実装するもの

ワークスペース

JavaScript版

HTML & JavaScript

スタイリング

全体の設定

bodyの設定

containerの設定

navの設定

navのcontainer設定

navのul設定

navのa設定

その他のnav設定

heroの設定

hero::beforeの設定

heroのh1設定

heroのp設定

contentの設定

おわりに

CSSまとめ

CSSソースコード

シェア！

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

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

2021年3月
月	火	水	木	金	土	日
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の設定

containerの設定

navの設定

navのcontainer設定

navのul設定

navのa設定

その他のnav設定

heroの設定

hero::beforeの設定

heroのh1設定

heroのp設定

contentの設定

おわりに

CSSまとめ

CSSソースコード

シェア！

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

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

Django開発~ブログ構築編3~スタイル

JavaScriptでaudioタグの音楽再生処理を実装しよう!

JavaScriptとGo言語でToDoリストアプリを作ろう!~検索機能~

Kubernetes~記事まとめ~

Django REST frameworkでアプリケーション開発 ～カスタム…

[Go言語]Mediatorパターンを学ぼう!

[Golang]Adapterパターンを学ぼう!~Version 2~

[Go言語]Builderパターン ~Facets~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

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

Django REST frameworkでアプリケーション開発～カスタム…