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

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

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

 本記事の内容

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

  1. 忍者CODE HTML × CSS 初級 まとめ
    1. 01 タイトル通りaタグの色を変更してみよう！
    2. 02 hover時に文字を透過にしよう
    3. 03 block要素に影をつけよう
    4. 04 ドットボーダーをつけよう
    5. 05 プレイスホルダーを設定しよう
    6. 06 文字を浮かせて真ん中に配置しよう
    7. 07 CSSのセレクタをマスターしよう/その1
    8. 08 before/afterを活用しよう
    9. 09 dl,dt,ddをマスターしよう
    10. 10 2段目のインデントを1文字ずらそう
    11. 11 テキストボックスの文字を変化させよう
    12. 12 文字をY軸の真ん中にしてみよう
    13. 13 画面いっぱいにキービジュアル表示しよう
    14. 14 CSSのセレクタをマスターしよう/その2
    15. 15 文字を隠してみよう
    16. 16 styleの優先順位を変更しよう
    17. 17 リストをボーダーで区切ろう
    18. 18 画像にぼかしを入れてみよう
    19. 19 背景だけ透過にしてみよう
    20. 20 プルダウンに生年月日をいれよう
    21. 21 タグを表出してみよう
    22. 22 文字を縦書きしよう
  2. まとめ

忍者CODE HTML × CSS 初級 まとめ

忍者CODEはエンジニアを目指す人の為のプログラミング問題集です。問題数は120問以上。
エンジニアになるために必要なポイントを抑えた問題が多数。
HTML,CSS学習の無料問題集 | 忍者CODE
HTML,CSS学習の無料問題集コース一覧。独学者や初心者向けの「初級コース」から「上級コース」まで全91問の問題を用意しました。HTMLとCSSはWeb制作を行なう上で必須となるスキルですので、解説を見ながら一つ一つ学習しましょう。
ninjacode.work

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

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.

21 タグを表出してみよう

See the Pen
21 タグを表出してみよう by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

22 文字を縦書きしよう

See the Pen
22 文字を縦書きしよう by AllOne’sLife – Toshi – (@pingye072y)
on CodePen.

まとめ

Toshi
Toshi

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

コメント

テキストのコピーはできません。