CSSでコンテンツボックスのスタイリングをしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、CSSでコンテンツボックスのスタイリング方法を学習しました。

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

JavaScript版

ワークスペース

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

HTML&JavaScript

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

スタイリング

CSSでスタイリングをします。項目に出てくるbodyやcontainerは、HTML要素です。

全体の設定

body

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

container

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

h3

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

joke

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

btn

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

これで、完成です。

おわりに

自分で言うのもなんですが、本記事のようにCSSコードとその結果(画像)を出してくれる記事があると非常に参考になりますね^^

自分でも後で見直して、アプリ開発の参考にしてます。スタイリングを自由自在に設定できるようになりたいですね。

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す