こんにちは。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 |
HTML & JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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>Random Choice Picker</title> </head> <body> <div class="container"> <h3>Enter all of the choices divided by a comma (','). <br> Press enter when you're done</h3> <textarea placeholder="Enter choices here..." id="textarea"></textarea> <div id="tags"></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 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 |
// 要素を取得する const tagsEl = document.getElementById('tags') const textarea = document.getElementById('textarea') // textareaにフォーカス textarea.focus() // keyupイベントを登録する textarea.addEventListener('keyup', (event) => { // event.target.valueは、textareaに打ち込んだ文字列を取得できる createTags(event.target.value) // EnterKeyイベントを検知する if(event.key === 'Enter') { // 10ミリ秒後にtextareaの文字列を空にする setTimeout(() => { event.target.value = '' }, 10) randomSelect() } }) function createTags(input) { // 文字列をコンマ区切りで分割し、配列に格納する // choice1,choice2,choice3 => ["choice1","choice2","choice3"] let tags = input.split(',') // スペースを打ち込まれた時対策 // 空文字の場合は除外する tags = tags.filter(tag => tag.trim() !== '').map(tag => tag.trim()) // タグを表示するエリアを初期化 // keyupイベントが発生するたびに、タグを作り直すため tagsEl.innerHTML = '' // tag毎にループ tags.forEach(tag => { // htmlのspan要素を要素を作成 const tagEl = document.createElement('span') // tagクラスを追加 tagEl.classList.add('tag') // タグ要素にラベルを追加 tagEl.innerHTML = tag // "tagsEl"であることに注意：子要素として追加 tagsEl.appendChild(tagEl) }) } // タグをランダムに選択する関数 function randomSelect() { // ハイライト付け替え処理の時間 const times = 30 // ハイライトを付け替えする処理 // JavaScriptは、変数内に関数を格納できる const doOnOff = () => { // タグをランダムに選択 const randomTag = pickRandomTag() // 選択したタグにハイライトをつける highlightTag(randomTag) // 100ミリ秒経過後、タグのハイライトを消す setTimeout(() => { unHighlightTag(randomTag) }, 100) } // 100ミリ秒単位でdoOnOffを実行する const interval = setInterval(doOnOff, 100); // intervalの停止 setTimeout(() => { // intervalを停止させる clearInterval(interval) // 最終的に一つのタグをハイライトする setTimeout(() => { const randomTag = pickRandomTag() highlightTag(randomTag) }, 100) }, times * 100) // => 30 * 100ミリ秒 => 3秒後停止 } // タグをランダムに選択 function pickRandomTag() { // tagクラスがついている全てのHTML要素を習得 // 配列で格納する const tags = document.querySelectorAll('.tag') // Math.randomは、ランダムの数値を返してくれる // 配列はインデックスを指定すると値が取得できる => tags[0]とかtags[1] return tags[Math.floor(Math.random() * tags.length)] } // タグにハイライトをつける function highlightTag(tag) { // highlightクラスを付与 tag.classList.add('highlight') } // タグからハイライトを消す function unHighlightTag(tag) { // highlightクラスを除去 tag.classList.remove('highlight') } |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイリング
これからCSSでスタイリングをしていきます。項目に出てくるbodyやh3は、HTMLの要素です。
全体の設定
全体の設定をします。
|
1 2 3 4 5 6 7 8 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Muli&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 |
body { background-color: #2b88f0; font-family: "Muli", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; /* flex重軸の中央にflexアイテムを配置 */ align-items: center; /* flexアイテムをページ横軸中央に配置 */ justify-content: center; /* ページビューに対して100%の高さにする */ height: 100vh; /* スクロールを消す */ overflow: hidden; margin: 0; } |
h3
h3のスタイリングをします。
|
1 2 3 4 5 6 7 |
h3 { color: #fff; /* 上 左右 下 */ margin: 10px 0 20px; /* テキストを中央寄せ */ text-align: center; } |
container
containerのスタイリングをします。
|
1 2 3 |
.container { width: 500px; } |
textarea
textareaのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
textarea { /* 枠線を消す */ border: none; /* block要素にする */ display: block; width: 100%; height: 100px; font-family: inherit; padding: 10px; /* 上 左右 下 */ margin: 0 0 20px; font-size: 16px; } |
tag
tagのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.tag { background-color: #f0932b; color: #fff; /* 縁を丸く */ border-radius: 50px; /* 上下 左右 */ padding: 10px 20px; /* 上 | 右 | 下 | 左 */ margin: 0 5px 10px 0; font-size: 14px; display: inline-block; } .tag.highlight { background-color: #273c75; } |
これで、完成です。
おわりに
13個目のアプリケーションのスタイリングで、けっこう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 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); * { /* ボックスの大きさを算出 paddingとborderをwidthとheightに含める */ box-sizing: border-box; } body { background-color: #2b88f0; font-family: "Muli", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; /* flex重軸の中央にflexアイテムを配置 */ align-items: center; /* flexアイテムをページ横軸中央に配置 */ justify-content: center; /* ページビューに対して100%の高さにする */ height: 100vh; /* スクロールを消す */ overflow: hidden; margin: 0; } h3 { color: #fff; /* 上 左右 下 */ margin: 10px 0 20px; /* テキストを中央寄せ */ text-align: center; } .container { width: 500px; } textarea { /* 枠線を消す */ border: none; /* block要素にする */ display: block; width: 100%; height: 100px; font-family: inherit; padding: 10px; /* 上 左右 下 */ margin: 0 0 20px; font-size: 16px; } .tag { background-color: #f0932b; color: #fff; /* 縁を丸く */ border-radius: 50px; /* 上下 左右 */ padding: 10px 20px; /* 上 | 右 | 下 | 左 */ margin: 0 5px 10px 0; font-size: 14px; display: inline-block; } .tag.highlight { background-color: #273c75; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。