CSSでDrawingアプリをスタイリングしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、CSSでDrawingアプリケーションのスタイリング方法を学びました。

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

ワークスペース

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

JavaScript版

HTML & CSS

スタイリング

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

全体の設定

bodyの設定

canvasの設定

toolboxの設定

toolbox子要素の設定

toolbox末要素の設定

これで、完成です。

おわりに

CSSは、デザイン力が命だと思います。しかし、デザイン力はいかにして高められるのか?日々葛藤していますね。

仕事で管理画面の開発もしているので、少しずつ学んだ知識を活用していこうと思っています。

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す