HTML

【課題付き】練習問題で定着!HTMLの初級編の総復習をする

どうも、つよぽんです!

今回は今まで学習してきたHTMLの初級編の内容を定着させることを目的にした記事となります。

この記事の想定読者は次のとおりです。

想定読者
  • HTMLの基本の復習をしたい人
  • HTMLの初級編の最終課題に挑戦したい人

練習問題は以下の記事から確認することが出来るので、今すぐ課題に取り組みたい方は以下のリンクから早速課題ページにアクセスして取り組んでいただけたらと思います。

これからHTMLを学び始めようと思っている方も以下のリンク先に、課題を解決するための学習コンテンツのリンクが貼ってあるので、そちらで課題解決に必要な知識を学習することが出来ます。

あわせて読みたい
【エクササイズ】ここまで学んできたHTMLの復習その2HTML初級編の総復習のために課題を出します。この課題をクリアして初級編で学んだ内容を定着させて、中級編の学習に進みましょう。...

上のリンクから課題をやってもらうのがこの記事の最終的な目的となりますが、今まで学んできた初級編の内容をあらためてふりかえってみます。

今回の内容は以下のとおりです。

今回の内容
  • HTML初級編で学習してきた内容をふりかえる

HTML初級編で学習してきた内容をふりかえる

開発環境の構築と練習問題についての記事を除いて、これまでHTML初級編で学んできたことは5つありました。

学んだ5つの内容
  1. HTMLの構造を理解する
  2. HTMLのブロックレベルとインラインを理解する
  3. HTMLのさまざまなリスト表示(箇条書き)のやり方を覚える
  4. HTMLのdivタグとspanタグの使い方を知る
  5. HTMLの属性(アトリビュート)を理解する

上記5つそれぞれで学んだ内容をでざっくりまとめてみます。復習のつもりで記事を読み進めてもらえたらと思います。

学習した記事リンクも貼っているので、わからないところ、忘れているところがあればリンク先の記事を読んで思い出してみましょう。

HTMLの構造を理解する

あわせて読みたい
【入門】HTMLの構造を基本から理解する【初心者・未経験者向け】HTMLがどのような構造で作られているか?htmlタグ、headタグ、bodyタグの役割はなんなのか?今回の記事はこれからWeb開発を学ぼうと思っている人、HTMLの基本的な仕組みを知りたい人が学習する際に最初に知っておくと良いことをまとめています。...

この記事では、まだHTMLをやったことがなく、これからHTMLの学習を始めようと思っている方に向けて書きました。

この記事で学習したことをまとめると次のとおりです。

この記事で学んだこと
  • HTMLにはタグと呼ばれるものを組み合わせて、タグを使ってページを作る
  • タグには様々な種類があり1つ1つのタグ異なる意味を持つ
  • HTMLは大きく分けるとメタ情報部分(headタグ)表示部分(bodyタグ)に分かれる

上記のように、この記事ではWebページを作るために必要なHTMLのタグや構造の説明をしました。

HTMLの構造を理解することは、HTMLを学習する上で基本中の基本の知識になるので、いきなりHTMLのコードを書き始める前にはまずおさえておきたいポイントです。

HTMLのブロックレベルとインラインを理解する

あわせて読みたい
図とコードで理解!HTMLのブロックレベルとインラインの違い「ブロックレベル要素」と「インライン要素」が何か説明できますか?ブロックレベルとインラインを理解はWebページを組み立てるのに重要な概念となってきます。なんとなくで利用しているタグがブロックレベルかインラインか知ることでHTMLスキルも向上します。...

前の記事では、HTMLを作り上げるにはさまざまな種類のタグを組み合わせると説明しました。

そして、この記事では、複数存在するタグは大きく分けて、2つの種類に分けられることを説明しました。その2つというのが「ブロックレベル」と「インライン」です。

この記事で学習したことをまとめると次のとおりです。

この記事で学んだこと
  • ブロックレベルは常に新しい行から始まり、ページ横幅いっぱいに広がる
  • インラインは内包するコンテンツ(テキストなど)の幅分だけ横幅をとる

上記のように、ブロックレベルと、インラインの特徴を説明して、HTMLのページはこの「ブロックレベル」と「インライン」をうまく使い分けてページを作り上げていきます。

HTMLのさまざまなリスト表示(箇条書き)のやり方を覚える

あわせて読みたい
【図解付き】HTMLで複数種類の箇条書き・リストの実装【入れ子含む】HTMLを使ってリスト(箇条書き)を実装するには大きく3つの種類があります。1. 順序付けリスト, 2. 番号なしリスト, 3. 入れ子(ネスト)構造なリスト。今回はこれらの作り方をサンプルコードと図を交えて解説します。...

この記事では、Webページ上で箇条書きを実現するためにさまざまな方法を説明しました。

この記事で学習したことをまとめると次のとおりです。

この記事で学んだこと
  • 順序付けリストを作るにはolタグとliタグを使う
  • 番号なしリストを作るにはulタグとliタグを使う
  • 入れ子構造なリストを作るにはliタグの中でulタグ(もしくはolタグ)を使う

上記の通り、リスト(箇条書き)を実装する場合、順序付けリストの作り方と、番号なしのリストの作り方で利用するタグが異なることを学習しました。

また、少し複雑な形になりますが、入れ構造なリストを作るやり方についても説明しました。

HTMLのdivタグとspanタグの使い方を知る

あわせて読みたい
【初心者向け】図解付き!HTMLのdivとspanの使い方を知るHTMLで使うことが多い「div」と「span」。divとspanがなんのために用意されたタグか知っていますか?今回の記事ではdivとspanの構造的な意味を解説します。意味を知ることでなんとなくで使っていたdivとspanを正しく使えるようになります。...

この記事では、なんとなくで使いがちなdivタグspanタグを構造的な意味から理解して、どんな場面で使うのが正しいのかを学習しました。

この記事で学習したことをまとめると次のとおりです。

この記事で学んだこと
  • divタグとspanタグは構造的な意味を持たない「汎用コンテナー
  • 汎用コンテナーはスタイルの変更を行うCSSと組み合わせて使わないと意味がない
  • divタグはブロックレベル要素、spanはインライン要素

上記のように、divタグspanタグは汎用コンテナーと呼ばれるもので、他のタグと異なり構造的な意味を持たず、主にCSSと組み合わせてスタイルの変更に使われることを目的としたタグになります。

また、divタグとspanタグはそれぞれ、ブロック要素インライン要素になり、以前に学習した「HTMLのブロックレベルとインラインを理解する」の記事の知識を使うことで、divタグspanタグの使い分けができるようになります。

HTMLの属性(アトリビュート)を理解する

あわせて読みたい
【図解付き】HTMLタグの属性とは?属性を使って出来ることを知るHTMLの属性とは?そんな疑問に答えつつ、属性を使ってできることを図、サンプルコードを交えながら解説します。この記事を読むことでHTMLで出来ることの表現の幅が広がるので是非覚えておきましょう!...

この記事では、HTMLのタグ内に埋め込む属性について解説しました。

この記事で学習したことをまとめると次のとおりです。

この記事で学んだこと
  • 属性を使うことでHTMLの表現の幅が広がる
  • HTMLの属性はタグのようにさまざまな種類がある
  • class属性は主にCSSと主に連動して使われる
  • src属性は決められたタグでのみ使われて、ファイルの読み込みを行う

上記のように、この記事ではたくさんある属性の中からclass属性とsrc属性を例に属性の使い方を学習しました。

まとめ

今回の記事は、今まで学んできたHTML初級編の総復習を目的とした記事で、あらためて今まで学習してきた内容5つをふりかえりました。

ふりかえった5つの内容
  1. HTMLの構造を理解する
  2. HTMLのブロックレベルとインラインを理解する
  3. HTMLのさまざまなリスト表示(箇条書き)のやり方を覚える
  4. HTMLのdivタグとspanタグの使い方を知る
  5. HTMLの属性(アトリビュート)を理解する

上記内容をふりかえり、今まで学んできたHTML初級編の内容を定着させるために、以下の記事で練習問題にとりかかってみてください。

あわせて読みたい
【エクササイズ】ここまで学んできたHTMLの復習その2HTML初級編の総復習のために課題を出します。この課題をクリアして初級編で学んだ内容を定着させて、中級編の学習に進みましょう。...

頭では理解してても実際に手を動かしてみて手が進まないところがあれば、それは理解が不十分だということを意味します。

練習問題をやっててわからないところ、質問したいところがあればお気軽に以下からご連絡いただけたらと思います^^

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...

それでは、課題頑張ってください!

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です