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

こんにちは。KOUKIです。

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

<目次>

実装するもの

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

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

ワークスペース

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

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

$ tree

├── index.html

├── script.js

└── style.css

JavaScript

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

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>Mobile Tab Navigation</title>
  </head>
  <body>
    <div class="phone">
      <img src="https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80" alt="home" class="content show">
      <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="work" class="content">
      <img src="https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80" alt="blog" class="content">
      <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" alt="about" class="content">
      <nav>
        <ul>
          <li class="active">
            <i class="fas fa-home"></i>
            <p>Home</p>
          </li>
          <li>
            <i class="fas fa-box"></i>
            <p>Work</p>
          </li>
          <li>
            <i class="fas fa-book-open"></i>
            <p>Blog</p>
          </li>
          <li>
            <i class="fas fa-users"></i>
            <p>About Us</p>
          </li>
        </ul>
      </nav>
    </div>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Mobile Tab Navigation</title>

</head>

<body>

<nav>

<ul>

</li>

<li>

</li>

<li>

</li>

<li>

<p>About Us</p>

</li>

</ul>

</nav>

</div>

</body>

</html>

// 要素取得
const contents = document.querySelectorAll('.content')
const listItems = document.querySelectorAll('nav ul li')

// クリックイベントの登録
listItems.forEach((item, idx) => {
    item.addEventListener('click', () => {
        // 初期化
        hideAllContents()
        hideAllItems()

        // 選択されたタブをアクティブにする
        item.classList.add('active')
        // 選択されたタブの画像を表示する
        contents[idx].classList.add('show')
    })
})

// 初期化処理
function hideAllContents() {
    contents.forEach(content => content.classList.remove('show'))
}

function hideAllItems() {
    listItems.forEach(item => item.classList.remove('active'))
}

// 要素取得

const contents = document.querySelectorAll('.content')

const listItems = document.querySelectorAll('nav ul li')

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

listItems.forEach((item, idx) => {

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

// 初期化

hideAllContents()

hideAllItems()

// 選択されたタブをアクティブにする

item.classList.add('active')

// 選択されたタブの画像を表示する

contents[idx].classList.add('show')

})

// 初期化処理

function hideAllContents() {

contents.forEach(content => content.classList.remove('show'))

}

function hideAllItems() {

listItems.forEach(item => item.classList.remove('active'))

}

スタイリング

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

全体の設定

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

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

/* フォント */

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

* {

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

box-sizing: border-box;

}

bodyの設定

body {
  background-color: rgba(155, 89, 182, 0.7);
  font-family: "Open Sans", sans-serif;
  height: 100vh;
  margin: 0;
  /* flexアイテムにする */
  display: flex;
  /* flex重点にアイテムを配置 */
  align-items: center;
  /* flex横線中央にアイテムを配置 */
  justify-content: center;
}

body {

background-color: rgba(155, 89, 182, 0.7);

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

height: 100vh;

margin: 0;

/* flexアイテムにする */

display: flex;

/* flex重点にアイテムを配置 */

align-items: center;

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

justify-content: center;

}

phoneの設定

.phone {
  position: relative;
  overflow: hidden;
  border: 3px solid #eee;
  border-radius: 15px;
  height: 600px;
  width: 340px;
}

.phone {

position: relative;

overflow: hidden;

border: 3px solid #eee;

border-radius: 15px;

height: 600px;

width: 340px;

}

phone .contentの設定

.phone .content {
  /* 透明にする */
  opacity: 0;
  /* 配置コンテンツのアスペクト比を維持したまま、要素の
  コンテンツボックス全体に収まるように拡大縮小する */
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 60px);
  width: 100%;
  transition: opacity 0.4s ease;
}

.phone .content {

/* 透明にする */

opacity: 0;

/* 配置コンテンツのアスペクト比を維持したまま、要素の

コンテンツボックス全体に収まるように拡大縮小する */

object-fit: cover;

position: absolute;

top: 0;

left: 0;

height: calc(100% - 60px);

width: 100%;

transition: opacity 0.4s ease;

}

phone .content.showの設定

.phone .content.show {
  opacity: 1;
}

.phone .content.show {

opacity: 1;

}

navの設定

nav {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-top: -5px;
  width: 100%;
}

nav {

position: absolute;

bottom: 0;

left: 0;

margin-top: -5px;

width: 100%;

}

nav ulの設定

nav ul {
  background-color: #fff;
  display: flex;
  /* ●を削除 */
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 60px;
}

nav ul {

background-color: #fff;

display: flex;

/* ●を削除 */

list-style-type: none;

padding: 0;

margin: 0;

height: 60px;

}

nav li の設定

nav li {
  color: #777;
  cursor: pointer;
  /* アイテムが同じ大きさになるように調整 */
  flex: 1;
  padding: 10px;
  text-align: center;
}

nav ul li:hover,
nav ul li.active {
  color: #8e44ad;
}

nav li {

color: #777;

cursor: pointer;

/* アイテムが同じ大きさになるように調整 */

flex: 1;

padding: 10px;

text-align: center;

}

nav ul li:hover,

nav ul li.active {

color: #8e44ad;

}

nav ul li pの設定

nav ul li p {
  font-size: 12px;
  margin: 2px 0;
}

nav ul li p {

font-size: 12px;

margin: 2px 0;

}

これで、完成です。

おわりに

今回は、flexアイテムや画面横幅(width)の調整に神経を使いそうですよね。

実務では、こういうページの認識合わせをクライアントとすると手直しがたくさん入って、修正が大変になるんですよね^^;

保守しやすいCSSの実装を勉強して、実務に活かしていきたいと思います!

それでは、また!

CSSまとめ

CSS学習記事まとめ

CSSソースコード

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

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

body {
  background-color: rgba(155, 89, 182, 0.7);
  font-family: "Open Sans", sans-serif;
  height: 100vh;
  margin: 0;
  /* flexアイテムにする */
  display: flex;
  /* flex重点にアイテムを配置 */
  align-items: center;
  /* flex横線中央にアイテムを配置 */
  justify-content: center;
}

.phone {
  position: relative;
  overflow: hidden;
  border: 3px solid #eee;
  border-radius: 15px;
  height: 600px;
  width: 340px;
}

.phone .content {
  /* 透明にする */
  opacity: 0;
  /* 配置コンテンツのアスペクト比を維持したまま、要素の
  コンテンツボックス全体に収まるように拡大縮小する */
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 60px);
  width: 100%;
  transition: opacity 0.4s ease;
}

.phone .content.show {
  opacity: 1;
}

nav {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-top: -5px;
  width: 100%;
}

nav ul {
  background-color: #fff;
  display: flex;
  /* ●を削除 */
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 60px;
}

nav li {
  color: #777;
  cursor: pointer;
  /* アイテムが同じ大きさになるように調整 */
  flex: 1;
  padding: 10px;
  text-align: center;
}

nav ul li:hover,
nav ul li.active {
  color: #8e44ad;
}

nav ul li p {
  font-size: 12px;
  margin: 2px 0;
}

/* フォント */

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

* {

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

box-sizing: border-box;

}

body {

background-color: rgba(155, 89, 182, 0.7);

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

height: 100vh;

margin: 0;

/* flexアイテムにする */

display: flex;

/* flex重点にアイテムを配置 */

align-items: center;

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

justify-content: center;

}

.phone {

position: relative;

overflow: hidden;

border: 3px solid #eee;

border-radius: 15px;

height: 600px;

width: 340px;

}

.phone .content {

/* 透明にする */

opacity: 0;

/* 配置コンテンツのアスペクト比を維持したまま、要素の

コンテンツボックス全体に収まるように拡大縮小する */

object-fit: cover;

position: absolute;

top: 0;

left: 0;

height: calc(100% - 60px);

width: 100%;

transition: opacity 0.4s ease;

}

.phone .content.show {

opacity: 1;

}

nav {

position: absolute;

bottom: 0;

left: 0;

margin-top: -5px;

width: 100%;

}

nav ul {

background-color: #fff;

display: flex;

/* ●を削除 */

list-style-type: none;

padding: 0;

margin: 0;

height: 60px;

}

nav li {

color: #777;

cursor: pointer;

/* アイテムが同じ大きさになるように調整 */

flex: 1;

padding: 10px;

text-align: center;

}

nav ul li:hover,

nav ul li.active {

color: #8e44ad;

}

nav ul li p {

font-size: 12px;

margin: 2px 0;

}

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

実装するもの

ワークスペース

JavaScript

HTML&JavaScript

スタイリング

全体の設定

bodyの設定

phoneの設定

phone .contentの設定

phone .content.showの設定

navの設定

nav ulの設定

nav li の設定

nav ul li pの設定

おわりに

CSSまとめ

CSSソースコード

シェア！

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

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

2021年4月
月	火	水	木	金	土	日
			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

実装するもの

ワークスペース

JavaScript

HTML&JavaScript

スタイリング

全体の設定

bodyの設定

phoneの設定

phone .contentの設定

phone .content.showの設定

navの設定

nav ulの設定

nav li の設定

nav ul li pの設定

おわりに

CSSまとめ

CSSソースコード

シェア！

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

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

[Go言語]Factoryパターン~後編~

Go言語で作るWebアプリのテンプレート2~Staticファイル~

Kubernetes(k8s)を学ぼう! Microservices編~De…

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

GitLab RunnerのパイプラインでDocker daemonに接続で…

[React]~Admin画面8:Productページの実装~

CSSでフィルタリングアプリをスタイリングしよう!

[React]useReducerの使い方メモ

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

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