CSSでKeyCode画面のスタイリングを実装する

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

以前、JavaScriptで学習したKeyCodeイベント取得画面のスタイリングを紹介します。

demoは、「こちら」で確認できます。

ワークスペース

必要なファイルは、以下の通りです。

HTML&JavaScript

このHTMLをブラウザ上で表示すると以下のようになります。

ページ表示時
KeyCode取得時

スタイリング

これからCSSでスタイリングをしていきます。項目に出てくるbodyやkeyは、HTMLに設定した要素です。

全体の設定

全体の設定をスタイリングします。

body

bodyのスタイリングをします。

key

keyのスタイリングをします。

small

smallのスタイリングをします。smallは、JavaScriptで付与します。

これで、完成です。

おわりに

今回は、ブロックがたくさん出てきたので、flexスタイルの使い方に慣れる絶好のチャンスだと思います。

keyに設定した「display: inline-flex;」を「display: flex;」にしたらどうなるのかなど、色々試してみてください。

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す