[progate] HTML/CSS 初級 「 HTMLに触れてみよう」のまとめ

[progate] HTML/CSS初級,progate,レビュー

三島 某

progateのHTML/CSS初級の導入となります。簡単なHTMLをコーディングすることで以降のセクションをスムーズに進めることができます。

HTML/CSS 初級の構成での「HTMLに触れてみよう」の位置付け

  • HTMLに触れてみよう ← 今回ここ
  • CSSに触れてみよう
  • レイアウトを作ろう
  • ヘッダーを作ろう
  • フッターを作ろう
  • コンテンツを作ろう
  • 問い合わせフォームを作ろう

まとめ

  • HTML/CSS初級の「HTMLに触れてみよう」はprogateのチュートリアル的な扱いのセッションになっています。
  • HTMLを初めて触る人に、どんなものなのかを直感的に知ってもらうことができます。
  • HTMLにてコンテンツの中心となるタグについて記述することができます。

「HTMLに触れてみよう」の解説

本セクションでは、代表的なHTMLのタグを学習していきます。

1つ1つは非常にシンプルですので、数分で終了します。気軽にトライしていきましょう!

  1. HTMLに触れてみよう
  2. 見出しと段落
  3. リンク
  4. 画像
  5. リスト

1.HTMLに触れてみよう

HTMLの基本的な書き方について説明しています。

タグの記載方法は、以下のパターンがあるのですが、最もシンプルなものだけ説明しています。

  • 2つのタグで表示するコンテンツを挟むもの ex. <h1> 表示するコンテンツ </h1> ← これだけ
  • タグのみで機能するもの ex.<br/>
  • 複数のタグを組み合わせて機能するもの ex. 入力フォーム <form>タグ関連
学習タグ

<h1>

2.見出しと段落

複数のタグを指定して、コンテンツがどのように表示されるのかを学習します。

見出しと段落の概念を知ることで、HTMLが基本的には階層構造的であることを説明しています。

またタグによって、文字の大きさの変化することに気づくことができます。

学習タグ

<h1>〜<h6>, <p>

3.リンク(本当はアンカー)

<a>のタグの書き方について学習します。リンクだと<link>とかぶるのミスリードですね・・

ここではタグ内の属性を指定することで、タグを制御すること学習します。

hrefについては、以下のような種類の指定が行えるのですが、本セクションでは最もシンプルな外部URLのみの指定となっています。

  • 外部URL ← ここだけ
  • サイト内のWebページ
  • ページ内の特定の場所
  • メールの起動など

ブラウザによって、この辺りのサポートは変わるのですが、大枠は説明があってもいいかなと。またtarget属性を活用できません(当然ですが・・)

学習タグ

<a>

画像

<img>のタグの書き方について学習します。

学習者は可能であれば、width, height属性、アクセシビリティ用のalt属性についても学習するようにしましょう。

学習タグ

<img>

リスト

HTMLのリストでは「unordered list」と「ordered list」の2種類があります。

本レッスンでは、<ul>タグについてのみ学習しています。

学習者は、「ol」についても試し見ることをお勧めします。

学習タグ

<ul>, <li>

Try it !

各セクションで是非チャレンジしてみてください。HTMLについて発見と理解が深まります。

スライドTry
見出しと段落
  • 見出しのタグを<h2>→<h1>→<h3>で記述すると、文字の大きさはどうなりますか?
  • <p>で囲んだ文中で改行した場合、どのような表示となりますか?
リンク
  • <a>タグで<img src="https://prog-8.com/assets/packs/dist/images/notification_off-0daa21c0f6603688a60c..svg" />を挟むと、どのような表示になりますか?
  • <a>タグのhrefに”mailto:info@htmq.com"を指定するとどのようになりますか?
  • <a>タグのtarget属性について調べてみましょう(progateでは動作しません・・)
画像
  • <img>のsrcに存在しないURLを指定した場合、どのような表示となりますか?
  • <img>タグにwidth, height属性を指定した場合、どのような表示となりますか?
リスト
  • <ul>タグの代わりに、<ol>タグを使ってみましょう。

HTMLに触れてみよう」では学ばないこと

本コースはprogateでもっとも初歩的なものです。そのため初歩的なことしか学びません。

しかし初歩的なことが上級のコースでも説明されていないとなると話は別です。

以降は、この段階で知っておく必要があることについて記載しておきます。

Webページがどのようにして表示されているか

Webページがどのように表示されるかについての説明がありません。そのため学習者はCSSファイルをどこに配置し、HTMLファイルからどのように指定するかわかりません。

みんなが欲しかった! ITパスポートの教科書&問題集 2021年度   316P
みんなが欲しかった! ITパスポートの教科書&問題集 2021年度 316P

progateではコーディング技術しか説明してくれませんので、ネットや参考書で理解しておく必要があります。

HTMLのタグについての説明が非常にざっくりしている

HTMLファイルは様々なタグがあり、それぞれ明確な役割があります。

シンプルな機能のタグであっても、その利用方法を間違うと、想定した効果を得ることができません。

  • 何事につけ代表的な1パターンしか説明していない。
  • 説明したタグに何を書くものか説明がない。段落って何を書くんでしょう・・
  • タグの説明は必要最低限・・・無料版で終わる場合はそれ以降の計画をしっかり立てましょう。

参加ランキング

PVアクセスランキング にほんブログ村