minablog

hugo/github/wordpress/プログラミング言語/美容/ビジネス/マーケティングなど、ミレニアム世代やZ世代に有益な情報を共有するブログ。

小学生でもわかるHTML/CSSタグ講座 練習問題(初心者向け)

皆さんこんにちは!minablog管理人のみなです。

今回は「小学生でもわかるHTML/CSSタグ講座」の実践編として、練習問題をご用意しました!

インプットだけ進めていても身に付きません。

アウトプットが大切ですよ、皆さん!

 

ということで、今回は2つの練習問題を作りましたので、ぜひ試してみてください。

この練習問題はプログラミング始めたばっかりの方に向けたものですが、もうわかっている方もぜひ基本を思い出す意味でどうぞ。

 

なお、練習問題を解いている最中はなるべくほかの講座を見ずに、自力で解くようにしてくださいね。

たくさん悩んだ結果、自力ではわからない!と思ったときは、こちらのページから調べてください。

www.mkmkblog.site

 

 

練習問題① 基本のタグとリストタグ

f:id:mkmkblog:20200106210530j:plain

まずはHTMLの中でも超基本のタグとリストタグを使ってみましょう。

 

この文章のなかには、

・自分で書いたHTMLをブラウザに表示すること

・見出しと本文を書くこと

・リストを作ること

この3つのテクニックが使われています。

 

ちなみに、このコーヒー情報はついさっき見ていたキュレーションサイトについていた情報です。

 

答えはこちら。

 

練習問題② 入力フォームの作成

f:id:mkmkblog:20200106215010j:plain



次に入力フォームを作ってみましょう。

ちょっと難しそうに見えますが、基本さえマスターしていれば難しいことは全くありません。

 

この文章のなかには

・実際に入力できるフォームを作る

・ちょっとした高度テクニック(デフォルトで記載例を表示させる)

この2つのテクニックが使われています。

 

デフォルトで記載例を表示させるタグは「小学生でもわかるHTML/CSSタグ講座」のなかでご紹介していますので、どうしてもわからない場合は調べてみてください。

 

答えはこちら。

 

練習問題① 答え

f:id:mkmkblog:20200106211635j:plain

 

《チェックポイント》

・正しくHTMLを宣言することができていますか?

・headとbodyに分けられていますか?

・ブラウザ上に表示される言葉はすべてbody内に書かれていますか?

・見出し・本文・リストタグが正しく使われていますか?

 

このチェックポイントに沿って確認するようにしてください。

特にタグを書いた後に閉じタグを忘れることが多いので注意が必要です。

また、今回は説明付きリストを書いていただきましたが、リストの種類は3種類あるのですべて書けるようにしましょう。

 

リストタグの記事はこちら。

www.mkmkblog.site

 

なお、文章中に1行空欄をつくりたかったので、今回は<br>タグを使いました。

これはbreak(改行)の略で使用頻度の高いタグなので、覚えておいてください。

 

練習問題② 答え

f:id:mkmkblog:20200106215023j:plain

 

《チェックポイント》

・参加者名の入力フォームに記入例が設定されていますか?

・正しくチェックボックスが使えていますか?

・人数入力フォームには数値のみ入力できる<input type="number">タグを使っていますか?

 

練習問題①よりは少し難易度があがって難しいかと思いますが、皆さんどうでしたか?

難関はplaceholderだと予想していましたが意外と楽勝だったかもしれません。

入力フォームは基本的にinputタグさえ使えてれば出来ちゃうので、inputタグでできることを覚えるようにしましょう。

 

ちょっと難しいと感じた方は、こちらの記事を参考にしてみてください。

www.mkmkblog.site

 

まとめ

いかがでしたか?

プログラミング始めたばかりの方向けに、練習問題を2つご用意しました。

かなり簡単なので、プログラミングをすることを職業としている方であれば5分以内で書けるような内容です。

ぜひ皆さんも10分以内で書くことを目標にやってみてくださいね。

 

f:id:mkmkblog:20191226170308j:plain