3分で出来る選択式練習問題でHTMLとCSSの基礎知識をチェックしてみよう

今回は比較的間違えやすくよく使うCSSプロパティや値の選択問題を作ってみました。スマホやタブレットでも簡単にできるようにしていますので気軽に試してみてください。

まずは一般的によく使われるCSSプロパティの意味をチェックしましょう。初心者の方は全問正解を目指して頑張りましょう!中級者、上級者にとってみれば復習程度のレベルかと思います(^^;

問題は随時追加していきます。もし問題の内容に不備等ございましたらコメントからご指摘くださいm(__)m

CSS知識レベルチェック [プロパティの意味]

CSSのプロパティ理解度をチェックしましょう!

全13問

CSS知識レベルチェック [Flexbox編]

Flexboxに関する理解度をチェックしましょう!

全10問

CSS知識レベルチェック [アニメーション編]

CSS3のアニメーションに関する知識レベルをチェックしましょう!

全11問

まとめ

今回はCSSプロパティの選択問題を作ってみましたがいかがでしたでしょうか?

初心者の方でわからない問題が多かったという方はドットインストールProgateなどの学習サイトで勉強をするのもオススメです。

ドットインストールとProgateのどちらを選べば良いかわからない時はドットインストールとProgateを徹底比較の記事もご参照ください。

CSS3から新しくFlexboxやanimationプロパティが追加され、覚えるのは大変ではありますがCSSだけでもjavascriptのような動的なサイトも作れるように進化していますので、使えるようになって損はないと思います!

ちなみに今回の練習問題はベンダープレフィックスについては省略しておりますのでご注意ください!

実際にFlexboxやanimationプロパティを動作させる際はブラウザのバージョンによっては動作しない恐れもありますので、全てのブラウザで正しく表示させるにはベンダープレフィックスという処理をしなければいけません。

参考:ベンダープレフィックスとは?|HTMLクイックリファレンス

その他のCSS練習問題

[初心者向け練習問題] HTMLとCSSでレイアウトを構成する

[CSS練習問題] hoverでクールなマウスオーバーエフェクトを作ろう

[CSS練習問題] flexboxでレイアウトを綺麗に整えよう

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です