[progate] HTML/CSS 初級 「 HTMLに触れてみよう」のまとめ
progateのHTML/CSS初級の導入となります。簡単なHTMLをコーディングすることで以降のセクションをスムーズに進めることができます。
HTML/CSS 初級の構成での「HTMLに触れてみよう」の位置付け
- HTMLに触れてみよう ← 今回ここ
- CSSに触れてみよう
- レイアウトを作ろう
- ヘッダーを作ろう
- フッターを作ろう
- コンテンツを作ろう
- 問い合わせフォームを作ろう
まとめ
- HTML/CSS初級の「HTMLに触れてみよう」はprogateのチュートリアル的な扱いのセッションになっています。
- HTMLを初めて触る人に、どんなものなのかを直感的に知ってもらうことができます。
- HTMLにてコンテンツの中心となるタグについて記述することができます。
「HTMLに触れてみよう」の解説
本セクションでは、代表的なHTMLのタグを学習していきます。
１つ１つは非常にシンプルですので、数分で終了します。気軽にトライしていきましょう！
- HTMLに触れてみよう
- 見出しと段落
- リンク
- 画像
- リスト
1.HTMLに触れてみよう
HTMLの基本的な書き方について説明しています。
タグの記載方法は、以下のパターンがあるのですが、最もシンプルなものだけ説明しています。
- ２つのタグで表示するコンテンツを挟むもの 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 |
| 見出しと段落 |
|
| リンク |
|
| 画像 |
|
| リスト |
|
「HTMLに触れてみよう」では学ばないこと
本コースはprogateでもっとも初歩的なものです。そのため初歩的なことしか学びません。
しかし初歩的なことが上級のコースでも説明されていないとなると話は別です。
以降は、この段階で知っておく必要があることについて記載しておきます。
Webページがどのようにして表示されているか
Webページがどのように表示されるかについての説明がありません。そのため学習者はCSSファイルをどこに配置し、HTMLファイルからどのように指定するかわかりません。
progateではコーディング技術しか説明してくれませんので、ネットや参考書で理解しておく必要があります。
HTMLのタグについての説明が非常にざっくりしている
HTMLファイルは様々なタグがあり、それぞれ明確な役割があります。
シンプルな機能のタグであっても、その利用方法を間違うと、想定した効果を得ることができません。
- 何事につけ代表的な１パターンしか説明していない。
- 説明したタグに何を書くものか説明がない。段落って何を書くんでしょう・・
- タグの説明は必要最低限・・・無料版で終わる場合はそれ以降の計画をしっかり立てましょう。
参加ランキング
