こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、モバイルタブナビゲーションのスタイリングをしたいと思います。
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="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> |
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 |
// 要素取得 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の要素です。
全体の設定
1 2 3 4 5 6 7 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap"); * { /* padding/borderをwidth/heightに含める */ box-sizing: border-box; } |
bodyの設定
1 2 3 4 5 6 7 8 9 10 11 12 |
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の設定
1 2 3 4 5 6 7 8 |
.phone { position: relative; overflow: hidden; border: 3px solid #eee; border-radius: 15px; height: 600px; width: 340px; } |

phone .contentの設定
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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の設定
1 2 3 |
.phone .content.show { opacity: 1; } |

navの設定
1 2 3 4 5 6 7 |
nav { position: absolute; bottom: 0; left: 0; margin-top: -5px; width: 100%; } |

nav ulの設定
1 2 3 4 5 6 7 8 9 |
nav ul { background-color: #fff; display: flex; /* ●を削除 */ list-style-type: none; padding: 0; margin: 0; height: 60px; } |

nav li の設定
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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の設定
1 2 3 4 |
nav ul li p { font-size: 12px; margin: 2px 0; } |

これで、完成です。
おわりに
今回は、flexアイテムや画面横幅(width)の調整に神経を使いそうですよね。
実務では、こういうページの認識合わせをクライアントとすると手直しがたくさん入って、修正が大変になるんですよね^^;
保守しやすいCSSの実装を勉強して、実務に活かしていきたいと思います!
それでは、また!
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 |
/* フォント */ @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; } |
コメントを残す
コメントを投稿するにはログインしてください。