2014-01-derive-html-css

ここまでできる！HTML＋CSS

CodeGridの「ここまでできる！HTML＋CSS」の記事内で使用しているサンプルです。

各サンプルの解説については上記記事をご確認ください。

動作環境

記事を参照してください。

サンプルの内容

各ディレクトリのサンプルは以下のような仕様です。

typing-game

• 1 NoJS Typing Game
• 2 シーン切り替え
• 3 正解チェック機能付き足し算
• 4 未入力チェック機能付きフォーム
• 5 delayを使ったシーン切り替え

css-variables

• 1 変数の使用
• 2 変数を使用したレイアウトの書き換え

css-regions

• 1 無理してレイアウトしたサンプル
• 2 CSS Regionsを用いたサンプル
• 3 region-fragmentとoverflowの組み合わせ
• 4 CSS RegionsとCSS3 Media Queriesの組み合わせ
• 5 @regionsルールの利用

css-shapes

• 0 shape-outsideとshape-insideの違い
• 1 shape-outsideプロパティの利用
• 2 複雑な図形の作成
• 3 CSS RegionsとShapesを利用したレイアウト