1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

「数億規模スタートアップのCTO講師」と「エンジニアキャリア専門のポテパン」が贈る、実践型Rubyスクール。

CSS Diner(シーエスエスダイナー)の口コミ・評判

CSS Dinerの口コミ・評判
Pocket

CSS Diner(シーエスエスダイナー)は動いているお皿や食べ物のイラストの要素をCSSのセレクタで指定していくサイトです。全部で26ステージあり、CSSのセレクタを一通りゲーム感覚で学ぶことができます。CSSのセレクタがよくわからない人やCSSのコードをコピペで済ませていた人にオススメです。

カテゴリ Webサイト
レベル 初心者~中級者
無料体験 あり
価格 0円
期間 5分~1日
講師 なし
教材 オリジナル
言語 CSS

※本サイトは英語表記ですが、ビジュアルでの操作がメインのため英語が苦手な方でも楽しむことができます。

CSS Dinerの公式サイトを見る

CSS Dinerの特徴

  • ゲーム感覚でセレクタを学べる!
  • ヒントがあるので、初心者でも安心
  • 全問クリアでCSSセレクタをマスター!

ゲーム感覚でセレクタを学べる!

①上のイラストを見て、動いている要素(Select〜で支持されている要素)を確認します。
②上の指示に従い、右下のHTML viewerでコードを確認しながら、CSS Editorにセレクタを記述します。
③最後に、CSS editor右上にある「Enter」ボタンを押します。指定したセレクタが正解した場合は、次のステージに進めます。

CSS Diner 使い方

ヒントがあるので、初心者でも安心

画面右側にヒントが書いてあるので、初心者の方でも安心です。今回のステージですと、子孫要素(Descendant)とIDセレクタ(ID Selectors)を組み合わせることで解決できそうですね。

CSS Diner ヒント

全問クリアでCSSセレクタをマスター!

問題を解くにつれ、ステージのレベルが上がっていきます。前半は比較的簡単ですぐに解けるのですが、後半になるとセレクタを細かく指定する問題が増え、難しくなります。ステージを全問をクリアできれば、CSSのセレクタに関しては十分なレベルまで到達できるでしょう。また、最後のステージまで行っても右上のメニューから全ステージを一覧でき、過去のステージにも戻れるので、何度でも復習することができます。

CSS Diner ステージ一覧
CSS Dinerの公式サイトを見る

CSS Dinerの口コミ・評判

口コミを募集しております。こちらよりお願いいたします。

CSS Dinerの運営者情報

設立 2014年2月
代表 Luke Pacholski
CSS Dinerの公式サイトを見る
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ
ページ上部へ戻る