ゲーム感覚でCSSセレクタを学べる
Webサービス 「CSS Diner」。
Web制作の基礎とも言えるHTMLの要素選択、
CSSセレクタをゲーム感覚で楽しく学習できます。
リンク先
遊び方
リンク先を開くと2つのお皿が揺れています。
この2つのお皿をCSSセレクタで指定すればクリアとなります。
画面左下はCSSを記述する場所、右下はHTMLコードとなっていて
お皿がどのように配置されているか構成を確認できます。
画面右側にはヒントが書かれていて問題が進むにつれて重要になってきます。
しっかりと確認しておきましょう。
1つ目の問題では
クラス(table)というDIV要素の中に
plateタグが並んでいます。
お題は2つのお皿をCSSで指定してあげればよいので答えは・・・
plateと指定してエンターを押します。
これは簡単ですね。ページ全体の要素を一括で指定する場合などに便利で
よく見かけるシーンとしては
bodyやH1タグなどで一括で指定してページ全体を構成する場合などに便利です。
クリアすると2問目が表示されます。
次はお弁当とお皿が並んでいて、このお弁当だけを指定します。
1問目と同じような考え方で答えます。
答えは「bento」でタグ全体を選択できます。
次は左側のお皿だけを選択します。
1問目の様に「plate」だけだと2枚のお皿を選択してしまいます。
HTMLを見るとid属性が付いているので、
「#fancy」と入力すれば正解になります。
id属性は「＃」、class属性は「.」で覚えておきましょう。
次から少し難しくなってきますが、実際のHTMLコードはこれぐらいの
要素になってくるのでより実践的になってきます。
真ん中のリンゴだけ選択します。
お皿は指定してはダメです。
div要素(table)の中のplateタグの中のappleタグを指定してあげます。
「apple」と回答すると右側のappleも選択してしまいます。
「plate」と回答するとお皿とリンゴだけになってしまいます。
この場合には「plate > apple」と回答してあげます。
plateタグの中のappleタグという意味になります。
次は真ん中のお皿のピクルスだけを選択します。
先ほどのように「plate > pickle」と選択すると
真ん中と右側の2つのピクルスを選択してしまいます。
よくHTMLコードを見ると真ん中のplateにはid属性がついています。
id属性fancyのplateの中のpickleと指定してみます。
「plate#fancy > pickle」で正解となります。
これがclass属性のfancyなら
「plate.fancy > pickle」となります。
HTMLコードのid属性やclass属性などを応用して回答していきます。
実際に様々なHTMLコードを見てもidやclass属性を使い分けて
記述しているシーンを多く見かけます。
レビュー
問題が進むにつれて難しくなってきます。
階層も増えてきてどんな風に選択するのが一番かと迷います。
CSSのセレクタは答えは1つではなく、色んな指定方法があります。
CSSを記述するのにまず最初に書くのがこのセレクタ、
基礎をゲーム感覚で楽しく学習できそうです。
コメント