こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、画面上に指定した文字列が自動的に表示されるAuto Text機能のスタイリングを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 |
<!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>Auto Text Effect</title> </head> <body> <h1 id="text">Starting...</h1> <div> <label for="speed">Speed:</label> <input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1"> </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 |
// 要素を取得する const textEl = document.getElementById('text') const speedEl = document.getElementById('speed') // 初期値設定 const text = "Show must go on!(やめるわけにはいかない)" let idx = 1 let speed = 300 / speedEl.value // テキスト書き込み処理 writeText() function writeText() { // 画面に文字を埋め込む textEl.innerHTML = text.slice(0, idx) // インクリメント! idx++ if(idx > text.length) { // 初期値に戻す idx = 1 } // 指定時間(speed)毎にwriteTextを実行 setTimeout(writeText, speed) } // 時間調整 speedEl.addEventListener('input', (e) => speed = 300 / e.target.value) |
スタイリング
これからCSSでスタイリングをしていきます。項目に出てくるbodyやdivは、HTML要素です。
全体の設定
|
1 2 3 4 5 6 7 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* paddingとborderの高さをwidthとheightに含める */ box-sizing: border-box; } |
bodyの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body { background-color: darksalmon; font-family: "Roboto", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねて配置する */ flex-direction: column; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸にアイテムを配置 */ justify-content: center; height: 100vh; overflow: hidden; margin: 0; } |
divの設定
|
1 2 3 4 5 6 7 |
div { position: absolute; bottom: 20px; background: rgba(0, 0, 0, 0.1); padding: 10px 20px; font-size: 18px; } |
inputの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
input { width: 50px; padding: 5px; font-size: 18px; background-color: darksalmon; border: none; text-align: center; } /* フォーカスを当てた時 */ input:focus { /* 青線を非表示にする */ outline: none; } |
これで、完成です。
おわりに
今日は、少し簡単すぎましたか？いやいや、皆さんのレベルが上がったんですよ^^(私も含めて、ね)
毎日手を動かしていると段々とわかるようになってきますよね。何も考えなくても実装ができるようになるというか。
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 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* paddingとborderの高さをwidthとheightに含める */ box-sizing: border-box; } body { background-color: darksalmon; font-family: "Roboto", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねて配置する */ flex-direction: column; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸にアイテムを配置 */ justify-content: center; height: 100vh; overflow: hidden; margin: 0; } div { position: absolute; bottom: 20px; background: rgba(0, 0, 0, 0.1); padding: 10px 20px; font-size: 18px; } input { width: 50px; padding: 5px; font-size: 18px; background-color: darksalmon; border: none; text-align: center; } /* フォーカスを当てた時 */ input:focus { /* 青線を非表示にする */ outline: none; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。