こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、CSSでかっこいいスライド画面をスタイリングします。
demoは「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!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>Background Slider</title> </head> <body> <div class="slider-container"> <div class="slide active" style=" background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'); " ></div> <div class="slide" style=" background-image: url('https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80'); " ></div> <div class="slide" style=" background-image: url('https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'); " ></div> <div class="slide" style=" background-image: url('https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80'); " ></div> <div class="slide" style=" background-image: url('https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'); " ></div> <button class="arrow left-arrow" id="left"> <i class="fas fa-arrow-left"></i> </button> <button class="arrow right-arrow" id="right"> <i class="fas fa-arrow-right"></i> </button> </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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
// 要素を取得する const body = document.body const slides = document.querySelectorAll('.slide') const leftBtn = document.getElementById('left') const rightBtn = document.getElementById('right') // アクティブになっているバックグランド // 配列形式なので0から始まる // この数値を変えることで、切り替えを行う let activeSlide = 0 // クリックイベントを登録 rightBtn.addEventListener('click', () => { activeSlide++ if(activeSlide > slides.length - 1) { activeSlide = 0 } setBgToBody() setActiveSlide() }) leftBtn.addEventListener('click', () => { activeSlide-- if(activeSlide < 0) { activeSlide = slides.length - 1 } setBgToBody() setActiveSlide() }) setBgToBody() // Bodyに画像をセット function setBgToBody() { body.style.backgroundImage = slides[activeSlide].style.backgroundImage } // スライドをアクティブにする function setActiveSlide() { slides.forEach(slide => { // activeクラスを除去 slide.classList.remove('active') }) // activeクラスを付与 slides[activeSlide].classList.add('active') } |
CSSでスタイリング
これからCSSでスタイリングをしていきます。項目に出てくるbodyやslideは、HTMLの要素です。
全体の設定
全体の設定をします。
|
1 2 3 4 5 6 7 |
/* フォント */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { /* ボックスの計算方法を指定 */ box-sizing: border-box; } |
bodyの設定
bodyの設定をします。
|
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 |
body { font-family: 'Roboto', sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねて配置 */ flex-direction: column; /* flex重点に配置 */ align-items: center; /* flex横中央に配置 */ justify-content: center; /* ページビューに対して100%の高さ */ height: 100vh; /* 横スクロールを消す */ overflow: hidden; margin: 0; /* 画像の配置 center: 画像を中央揃え X軸:center Y軸: center */ background-position: center center; /* 画像の縦横比を崩すことなく 画像ができるだけ大きくなるよう拡大縮小 画像の縦横比が要素と異なる場合 空き領域が残らないように上下 または左右のどちらかを切り取りる。 */ background-size: cover; /* アニメーション */ transition: 0.4s; } |
疑似クラスの設定
疑似クラスの設定をします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
body::before { content: ''; /* 要素の絶対位置 */ position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.7); z-index: -1; } |
slider-containerの設定
slider-containerの設定をします。
|
1 2 3 4 5 6 7 8 9 |
.slider-container { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); height: 70vh; /* ページビューに対して横幅70% */ width: 70vw; /* 子要素absoluteの規定位置 */ position: relative; overflow: hidden; } |
slideの設定
slideの設定をします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.slide { /* 要素を透明にする */ opacity: 0; height: 100vh; width: 100vw; background-position: center center; background-size: cover; position: absolute; top: -15vh; left: -15vh; transition: 0.4s ease; z-index: 1; } /* JavaScriptでactiveクラスを付与 */ .slide.active { /* 要素を不透明にする */ opacity: 1; } |
arrowの設定
arrowの設定をします。
|
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 |
.arrow { /* 要素の位置を固定 */ position: fixed; background-color: transparent; color: #fff; padding: 20px; font-size: 30px; border: 2px solid orange; top: 50%; transform: translateY(-50%); cursor: pointer; } /* ボタンを押した時 */ .arrow:focus { /* 青枠を非表示 */ outline: 0; } .left-arrow { left: calc(15vw - 65px); } .right-arrow { right: calc(15vw - 65px); } |
これで、完成です。
おわりに
HTML&CSS &JavaScriptだけで、スライド画面を作れるのは面白いですよね。
CSSのプロパティはたくさんの種類があると思いがちですが、主要なもの(flexとかtransitionなど)を覚えると結構いい感じのページが作れると思います!
Bootstrapなどもかなり便利ですが、仕組みを知る上でスクラッチ開発できる方が応用が効くと思うので、ぜひチャレンジしてみてください^^
それでは、また！
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 |
/* フォント */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { /* ボックスの計算方法を指定 */ box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねて配置 */ flex-direction: column; /* flex重点に配置 */ align-items: center; /* flex横中央に配置 */ justify-content: center; /* ページビューに対して100%の高さ */ height: 100vh; /* 横スクロールを消す */ overflow: hidden; margin: 0; /* 画像の配置 center: 画像を中央揃え X軸:center Y軸: center */ background-position: center center; /* 画像の縦横比を崩すことなく 画像ができるだけ大きくなるよう拡大縮小 画像の縦横比が要素と異なる場合 空き領域が残らないように上下 または左右のどちらかを切り取りる。 */ background-size: cover; /* アニメーション */ transition: 0.4s; } body::before { content: ''; /* 要素の絶対位置 */ position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.7); z-index: -1; } .slider-container { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); height: 70vh; /* ページビューに対して横幅70% */ width: 70vw; /* 子要素absoluteの規定位置 */ position: relative; overflow: hidden; } .slide { /* 要素を透明にする */ opacity: 0; height: 100vh; width: 100vw; background-position: center center; background-size: cover; position: absolute; top: -15vh; left: -15vh; transition: 0.4s ease; z-index: 1; } /* JavaScriptでactiveクラスを付与 */ .slide.active { /* 要素を不透明にする */ opacity: 1; } .arrow { /* 要素の位置を固定 */ position: fixed; background-color: transparent; color: #fff; padding: 20px; font-size: 30px; border: 2px solid orange; top: 50%; transform: translateY(-50%); cursor: pointer; } /* ボタンを押した時 */ .arrow:focus { /* 青枠を非表示 */ outline: 0; } .left-arrow { left: calc(15vw - 65px); } .right-arrow { right: calc(15vw - 65px); } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。