CSSでタグに装飾をしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、CSSでタグにスタイリングする方法を勉強します。

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

JavaScript版

ワークスペース

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

HTML & JavaScript

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

スタイリング

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

全体の設定

全体の設定をします。

body

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

h3

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

container

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

textarea

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

tag

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

これで、完成です。

おわりに

13個目のアプリケーションのスタイリングで、けっこうCSSに慣れてきましたね。個々のプロパティの意味を調べなくても理解できるようになってきました。

やはり、反復練習が大切ですね^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す