こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
CSSでブロックをスタイリングしましょう^^
demoは、「こちら」で確認できます。
JavaScript版
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css └── sounds |
音声(sounds)は「こちら」で取得できます。
開発
ページの作成
最初にページを作成しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!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>Sound Board</title> </head> <body> <audio id="applause" src="sounds/applause.mp3"></audio> <audio id="boo" src="sounds/boo.mp3"></audio> <audio id="gasp" src="sounds/gasp.mp3"></audio> <audio id="tada" src="sounds/tada.mp3"></audio> <audio id="victory" src="sounds/victory.mp3"></audio> <audio id="wrong" src="sounds/wrong.mp3"></audio> <div id="buttons"></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 |
// 音源ボタンの元(これはbuttonのIDにもなっている) const sounds = ['applause', 'boo', 'gasp', 'tada', 'victory', 'wrong'] // 音源ボタンを作成 sounds.forEach(sound => { // button要素を作成 const btn = document.createElement('button') // btnクラスを追加 btn.classList.add('btn') // buttonのラベルを設定 btn.innerText = sound // clickイベントを登録 btn.addEventListener('click', () => { // 音楽を止める stopSongs() // playで音楽が流せる document.getElementById(sound).play() }) // buttonsIDの子要素としてbuttonを追加 document.getElementById('buttons').appendChild(btn) }) function stopSongs() { sounds.forEach(sound => { const song = document.getElementById(sound) // 音楽を止める song.pause() // 最初に巻き戻す song.currentTime = 0; }) } |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイリング
CSSでスタイリングをしていきます。項目に出てくるbodyやbtnは、HTML要素です。
全体の設定
全体の設定をスタイリングします。
|
1 2 3 4 5 6 7 8 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap"); * { /* ボックス要素のサイズを算出 paddingとborderをwidthとheightに含める */ 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 |
body { background-color: rgb(161, 100, 223); font-family: "Poppins" m sans-serif; /* flexボックスにする */ display: flex; /* flexアイテムの折り返しを指定 */ flex-wrap: wrap; /* flexアイテムを中央寄せにする */ align-items: center; justify-content: center; text-align: center; /* ページビューに対して高さ100% */ height: 100vh; /* はみ出を非表示 */ overflow: hidden; margin: 0; } |
btn
btnのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.btn { background-color: rebeccapurple; border-radius: 5px; border: none; color: #fff; margin: 1rem; padding: 1.5rem 3rem; font-size: 1.2rem; font-family: inherit; cursor: pointer; } /* ボタンを乗せた時 */ .btn:hover { opacity: 0.9; } /* ボタンを押した時 */ .btn:focus { /* 青線を非表示 */ outline: none; } |
これで、完成です。
ちなみに、ページを縮めるとこんな感じになります。
おわりに
今回は、結構簡単でしたね。今までで一番簡単だったかもしれません^^
それでは、また！
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 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap"); * { /* ボックス要素のサイズを算出 paddingとborderをwidthとheightに含める */ box-sizing: border-box; } body { background-color: rgb(161, 100, 223); font-family: "Poppins" m sans-serif; /* flexボックスにする */ display: flex; /* flexアイテムの折り返しを指定 */ flex-wrap: nowrap; /* flexアイテムを中央寄せにする */ align-items: center; justify-content: center; text-align: center; /* ページビューに対して高さ100% */ height: 100vh; /* はみ出を非表示 */ overflow: hidden; margin: 0; } .btn { background-color: rebeccapurple; border-radius: 5px; border: none; color: #fff; margin: 1rem; padding: 1.5rem 3rem; font-size: 1.2rem; font-family: inherit; cursor: pointer; } /* ボタンを乗せた時 */ .btn:hover { opacity: 0.9; } /* ボタンを押した時 */ .btn:focus { /* 青線を非表示 */ outline: none; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。