こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
以前、JavaScriptで学習したKeyCodeイベント取得画面のスタイリングを紹介します。
demoは、「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 |
$ 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 |
<!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>Event KeyCodes</title> </head> <body> <div id="insert"> <div class="key"> Press any key to get the keyCode </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 |
// 要素の取得 const insert = document.getElementById('insert') // keydownイベントを登録 window.addEventListener('keydown', (event) => { // KeyCodeーを挿入するテンプレートを作成 const template = ` <div class="key"> ${event.key === ' ' ? 'Space' : event.key} <small>event.key</small> </div> <div class="key"> ${event.keyCode} <small>event.keyCode</small> </div> <div class="key"> ${event.code} <small>event.code</small> </div> ` // insert領域に追加 insert.innerHTML = template }) |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイリング
これからCSSでスタイリングをしていきます。項目に出てくるbodyやkeyは、HTMLに設定した要素です。
全体の設定
全体の設定をスタイリングします。
|
1 2 3 4 5 6 7 8 9 10 |
/* フォント */ @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: #e1e1e1; font-family: "Muli", sans-serif; /* flexアイテムにする */ display: flex; /* flexの重軸の中央に配置 */ align-items: center; /* flexアイテムを横軸中央に配置 */ justify-content: center; /* テキストを中央に配置 */ text-align: center; /* ページビューに対して100%の高さ */ height: 100vh; /* スクロールを消す */ overflow: hidden; margin: 0; } |
key
keyのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.key { /* 枠線をつける */ border: 1px solid #999; background-color: #eee; /* 影をつける */ box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* インラインflex */ display: inline-flex; /* flexの重軸の中央に配置 */ align-items: center; /* flexアイテムを積み重なるように配置する */ flex-direction: column; font-size: 20px; font-weight: bold; padding: 20px; margin: 10px; min-width: 150px; /* 要素の位置の開始点 */ position: relative; } |
small
smallのスタイリングをします。smallは、JavaScriptで付与します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.key small { /* relativeからみた絶対位置 */ position: absolute; /* 上から-24px */ top: -24px; /* 左から0px */ left: 0; /* テキスト中央 */ text-align: center; width: 100%; color: #555; font-size: 14px; } |
これで、完成です。
おわりに
今回は、ブロックがたくさん出てきたので、flexスタイルの使い方に慣れる絶好のチャンスだと思います。
keyに設定した「display: inline-flex;」を「display: flex;」にしたらどうなるのかなど、色々試してみてください。
それでは、また！
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 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); * { /* ボックスサイズを算出 paddingとborderをwidthとheightに含める */ box-sizing: border-box; } body { background-color: #e1e1e1; font-family: "Muli", sans-serif; /* flexアイテムにする */ display: flex; /* flexの重軸の中央に配置 */ align-items: center; /* flexアイテムを横軸中央に配置 */ justify-content: center; /* テキストを中央に配置 */ text-align: center; /* ページビューに対して100%の高さ */ height: 100vh; /* スクロールを消す */ overflow: hidden; margin: 0; } .key { /* 枠線をつける */ border: 1px solid #999; background-color: #eee; /* 影をつける */ box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* インラインflex */ display: inline-flex; /* flexの重軸の中央に配置 */ align-items: center; /* flexアイテムを積み重なるように配置する */ flex-direction: column; font-size: 20px; font-weight: bold; padding: 20px; margin: 10px; min-width: 150px; /* 要素の位置の開始点 */ position: relative; } .key small { /* relativeからみた絶対位置 */ position: absolute; /* 上から-24px */ top: -24px; /* 左から0px */ left: 0; /* テキスト中央 */ text-align: center; width: 100%; color: #555; font-size: 14px; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。