こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、Image CarouselアプリをCSSでスタイリングします。
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 |
<!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>Image Carousel</title> </head> <body> <div class="carousel"> <div class="image-container" id="imgs"> <img src="https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80" alt="first-image" /> <img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="second-image" /> <img src="https://images.unsplash.com/photo-1599423300746-b62533397364?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="third-image" /> <img src="https://images.unsplash.com/photo-1599561046251-bfb9465b4c44?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1492&q=80" alt="fourth-image" /> </div> <div class="buttons-container"> <button id="left" class="btn">Prev</button> <button id="right" class="btn">Next</button> </div> </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 48 49 50 51 52 53 54 |
// 要素を取得する const imgs = document.getElementById('imgs') const leftBtn = document.getElementById('left') const rightBtn = document.getElementById('right') const img = document.querySelectorAll('#imgs img') // 画像のインデックスを初期値 let idx = 0 // run関数を2秒間隔で実行 let interval = setInterval(run, 2000) function run() { // インデックスを切り替えることで画像を切り替える idx++ // 画像切り替え changeImage() } function changeImage() { // インデックスがイメージの最大数を超えていないか // インデックスと配列は0から始まるので-1する if(idx > img.length - 1) { // 初期化 idx = 0 // インデックスがマイナスになった場合 } else if(idx < 0) { idx = img.length -1 } // translateXを設定 imgs.style.transform = `translateX(${-idx * 500}px)` } // setIntervalをクリアする function resetInterval() { clearInterval(interval) interval = setInterval(run, 2000) } // Nextボタン rightBtn.addEventListener('click', () => { idx++ changeImage() resetInterval() }) // Prevボタン leftBtn.addEventListener('click', () => { idx-- changeImage() resetInterval() }) |
スタイリング
CSSでスタイリングをしていきます。bodyやimgは、HTMLの要素です。
全体の設定
|
1 2 3 4 5 6 7 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* padding/borderをwidht/heightに含める */ box-sizing: border-box; } |
bodyの設定
|
1 2 3 4 5 6 7 8 9 10 11 |
body { font-family: "Roboto", sans-serif; /* flexアイテムにする */ display: flex; /* flex重点にアイテムを配置する */ align-items: center; /* flex横軸中央にアイテムを配置する */ justify-content: center; height: 100vh; margin: 0; } |
imgの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 |
img { width: 500px; height: 500px; /* 置換要素をコンテナーにどのようにはめ込むかを設定 coverはアスペクト比を維持したまま、要素のコンテンツボックス全体を 埋めるように拡大縮小する。 オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、 オブジェクトの方が合うように切り取る */ object-fit: cover; } |
carouselの設定
|
1 2 3 4 5 6 7 |
.carousel { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); height: 530px; width: 500px; /* はみ出た要素を非表示 */ overflow: hidden; } |
image-containerの設定
|
1 2 3 4 5 |
.image-container { display: flex; transform: translateX(0); transition: transform 0.5s ease-in-out; } |
buttons-containerの設定
|
1 2 3 4 5 6 7 |
.buttons-container { display: flex; /* 各アイテムを均等に配置し 最初のアイテムは先頭に寄せ、 最後のアイテムは末尾に寄せる */ justify-content: space-between; } |
btnの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.btn { background-color: rebeccapurple; color: #fff; border: none; padding: 0.5rem; cursor: pointer; width: 49.5%; } .btn:hover { opacity: 0.9; } .btn:focus { outline: none; } |
おわりに
CSSの記事を書いてますが、仕事ではあまりデザインに関わりません。APIの実装やDockerなどを使った環境構築作業がメインです。
しかし、時たま、HTML & 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 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* padding/borderをwidht/heightに含める */ box-sizing: border-box; } body { font-family: "Roboto", sans-serif; /* flexアイテムにする */ display: flex; /* flex重点にアイテムを配置する */ align-items: center; /* flex横軸中央にアイテムを配置する */ justify-content: center; height: 100vh; margin: 0; } img { width: 500px; height: 500px; /* 置換要素をコンテナーにどのようにはめ込むかを設定 coverはアスペクト比を維持したまま、要素のコンテンツボックス全体を 埋めるように拡大縮小する。 オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、 オブジェクトの方が合うように切り取る */ object-fit: cover; } .carousel { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); height: 530px; width: 500px; /* はみ出た要素を非表示 */ overflow: hidden; } .image-container { display: flex; transform: translateX(0); transition: transform 0.5s ease-in-out; } .buttons-container { display: flex; /* 各アイテムを均等に配置し 最初のアイテムは先頭に寄せ、 最後のアイテムは末尾に寄せる */ justify-content: space-between; } .btn { background-color: rebeccapurple; color: #fff; border: none; padding: 0.5rem; cursor: pointer; width: 49.5%; } .btn:hover { opacity: 0.9; } .btn:focus { outline: none; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。