CSSでDrag And Dropアプリのスタイリングをしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、CSSでDrag And Dropのスタイリングを学びました。

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

ワークスペース

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

JavaScript版

HTML & JavaScript

現在は、何も表示されていません。

スタイリング

CSSでスタイリングしていきましょう。項目のbodyやemptyは、HTML要素です。

全体の設定

bodyの設定

emptyの設定

fillの設定

Drag And Dropの設定

ここは、スクショが撮れませんでした。実際に、Drag And Dropをして確認ください。

メディアクエリの設定

これで完成です。

おわりに

CSSのスタイリングはやはり面白いと思います。

画面開発も仕事の内なので、ここで学んだ知識をフル活用中です^^
もっとかっこいいWebページを作れるようになりたい。

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す