【忍者CODE】HTML × CSS 初級 まとめ

CODE
Toshi
Toshi
最近、忍者CODEHTML×CSS 初級の問題を解いていきました。問題でわからなかったところは、調べて解いていったのですが、CodePenを使いながら「問題」「解説」+「メモ」といった形でまとめてみました。

今回解説していく内容は以下です!

 本記事の内容

・忍者CODE HTML × CSS 初級 まとめ


忍者CODE HTML × CSS 初級 まとめ

忍者CODEはエンジニアを目指す人の為のプログラミング問題集です。問題数は120問以上。
エンジニアになるために必要なポイントを抑えた問題が多数。

CodePenは、ユーザーが作成したHTML、CSS、JavaScriptのコードスニペットのテスト、および披露をするためのオンラインコミュニティである。 オンラインのコードエディタとオープンソースの学習環境として機能し、開発者は「ペン」と呼ばれるコードスニペットを作成してテストを行うことができる。

01 タイトル通りaタグの色を変更してみよう!

See the Pen
01 タイトル通りaタグの色を変更してみよう!
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

02 hover時に文字を透過にしよう

See the Pen
02 hover時に文字を透過にしよう
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

03 block要素に影をつけよう

See the Pen
03 block要素に影をつけよう
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

04 ドットボーダーをつけよう

See the Pen
04 ドットボーダーをつけよう
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

05 プレイスホルダーを設定しよう

See the Pen
05 プレイスホルダーを設定しよう
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

06 文字を浮かせて真ん中に配置しよう

See the Pen
06 文字を浮かせて真ん中に配置しよう
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

07 CSSのセレクタをマスターしよう/その1

See the Pen
07 CSSのセレクタをマスターしよう/その1
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

08 before/afterを活用しよう

See the Pen
08 before/afterを活用しよう
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

09 dl,dt,ddをマスターしよう

See the Pen
09 dl,dt,ddをマスターしよう
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

10 2段目のインデントを1文字ずらそう

See the Pen
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

11 テキストボックスの文字を変化させよう

See the Pen
11 テキストボックスの文字を変化させよう
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

12 文字をY軸の真ん中にしてみよう

See the Pen
12 文字をY軸の真ん中にしてみよう
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

13 画面いっぱいにキービジュアル表示しよう

See the Pen
13 画面いっぱいにキービジュアル表示しよう
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

14 CSSのセレクタをマスターしよう/その2

See the Pen
CSSのセレクタをマスターしよう/その2
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

15 文字を隠してみよう

See the Pen
15 文字を隠してみよう
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

16 styleの優先順位を変更しよう

See the Pen
16 styleの優先順位を変更しよう
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

17 リストをボーダーで区切ろう

See the Pen
17 リストをボーダーで区切ろう
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

18 画像にぼかしを入れてみよう

See the Pen
18 画像にぼかしを入れてみよう
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

19 背景だけ透過にしてみよう

See the Pen
18 画像にぼかしを入れてみよう
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

20 プルダウンに生年月日をいれよう

See the Pen
by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

随時更新。

まとめ

Toshi
Toshi

HTML、CSS共にしっかりと勉強してコードの書き方をみにつけましょう!

コメント

error:Content is protected !!