

HTML・CSSの腕試し
progate、ドットインストールをされている方、それらを終えた方、また模写作業中の方、ポートフォリオを作りたい方達の為の腕試しを用意いたしました。
上記2つのサービスに掲載されていないコンテンツをふんだんに用意してます。
これらの用意された問題は、全て私がweb業界で案件実務内実装したものです。
ですので、絶対と言っていいほど今見ている方にとっても通らなければならない道となります。
ここにあるコンテンツは、全て無料でできます。
ただし解答ソース、解説を見る際にはパスワードがございますので忍者CODEのツイッターアカウントのフォロー後、DMいただければ当日中にお渡しいたします。(日中は、30分以内でお渡し可)
初級〜上級まで日々、アップデートを重ね用意させていただきます。
こういう問題が欲しいというご要望がございましたらツイッターまでDMご要望ください。

現在の問題数
- 初級コース
- 53問
- 中級コース
- 23問
- 上級コース
- 15問
忍者CODEのやり方/遊び方
初級コース
- 1:aタグの文字色を変えよう
- 2:hover時に文字を透過にしよう
- 3:block要素に影をつけよう
- 4:ドットボーダーをつけよう
- 5:プレイスホルダーを設定しよう
- 6:文字を浮かせて真ん中に配置しよう
- 7:CSSのセレクタをマスターしよう/その1
- 8:before/afterを活用しよう
- 9:dl,dt,ddをマスターしよう
- 10:2段目のインデントを1文字ずらそう
- 11:テキストボックスの文字を変化させよう
- 12:文字をY軸の真ん中にしてみよう
- 13:画面いっぱいにキービジュアル表示しよう
- 14:CSSのセレクタをマスターしよう/その2
- 15:文字を隠してみよう
- 16:簡易テーブルを作成しよう
- 17:styleの優先順位を変更しよう
- 18:リストをボーダーで区切ろう
- 19:画像にぼかしを入れてみよう
- 20:背景だけ透過にしてみよう
- 21:プルダウンに生年月日をいれよう
- 22:タグを表出してみよう
- 23:文字を縦書きしよう
- 24:最低の幅を担保しよう
- 25:hoverしたら画像を大きくしよう
- 26:カラーピッカーを表示しよう
- 27:floatを使おう
- 28:テーブルのカラムを結合させよう
- 29:一覧画面にあるリスト形式の遷移タブを実装しよう
- 30:beforeを使って画像を出そう
- 31:afterを使ってアイコンを設置しよう
- 32:CSSのみで×を表現してみよう
- 33:CSSで画像をトリミングしよう
- 34:pxを指定せずfont-sizeを変更しよう
- 35:文字横の間隔を空けてみよう
- 36:文字縦の間隔を空けてみよう
- 37:動画を表出しましょう
- 38:sectionの中にある1番目のpタグの文字色を変更しよう
- 39:テキストシャドーをつけよう
- 40:要素の幅と高さを変更せずpaddingを入れよう
- 41:N番目以降にスタイルを適用させよう
- 42:電話発信用リンクを設置しよう
- 43:CSSを使って要素の順番を変えよう
- 44:スクロールを実装しよう
- 45:テキストボックス内に影をつけよう
- 46:要素の高さに縛りをつけよう
- 47:【レスポンシブ】スマホ時の挙動を変える
- 48:【レスポンシブ】ipad対応をしよう
- 49:要素を回転させよう
- 50:高さを保ったまま要素を消してみよう
- 51:gridレイアウトの基礎
- 52:スクロールバーを装飾しよう
- 53:画像の遅延読み込みをしよう
中級コース
- 1:2カラム3カラムのブロックを作成しよう
- 2:calcを使用してみよう
- 3:丸い要素を作成しよう
- 4:丸い要素を色んな場所に配置してみよう
- 5:カード要素を並べてみよう
- 6:テキストに3点リーダーを反映させよう
- 7:ドロップキャップ(先頭文字を大きく)しよう
- 8:固定ヘッダーを作成しよう
- 9:カルーセルを実装しよう
- 10:チェックしたら文字をハイライト化
- 11:クリックしたら画像を大きくしよう
- 12:文字を極小にしてみよう
- 13:テーブルの操作をしよう
- 14:ハンバーガーメニューのアイコン実装
- 15:アンカーリンクを設定しよう
- 16:タイトル毎に固定ヘッダーを変更しよう
- 17:【レスポンシブ】PC時/SP時の挙動変更
- 18:【レスポンシブ】レスポンシブの挙動を変更しよう
- 19:【レスポンシブ】要素の順番を変えよう
- 20:円グラフを作成しよう
- 21:文字色をアニメーションで変化させよう
- 22:クリックして文字色アニメーションを実装しよう
- 23:要素を永遠に回転させよう
上級コース
- 1:背景の画像を固定しよう
- 2:斜め線のデザインを作成しよう
- 3:CSSのみでアコーディオンを実装しよう
- 4:マルチボーダーを作成しよう
- 5:モーダルを作成しよう
- 6:ピタッと止まるスクロールスナップを実装しよう
- 7:カレンダーにありそうな回転文字表記を実装しよう
- 8:4つ葉のクローバーを実装しよう
- 9:縦に回るボックスアニメーションを実装しよう
- 10:ハンバーガーメニューを実装しよう
- 11:スタンプアニメーションを実装しよう
- 12:アイコンやタグを設置しよう
- 13:チェックボックスをカスタムしよう
- 14:フェーズ毎のアニメーションを実装しよう
- 15:クリックしたら要素を回したり止めたりしよう