【超有料級】元プロ講師が教える🔥Webページの作り方講座｜第1回【HTMLの基礎】

2024年3月1日 10:36

⭐経歴＆実績⭐
・小中学生プログラミング教室の校責任者として、200名以上に個別授業
・中高大生プログラミング教室の校責任者として、100名以上に集団授業
・教育企業の管理職向けDX研修担当者として、50名以上に集団研修
・教育業界の現状を変えるため退職、無職クリエイター活動開始🤞

皆さん、こんにちは！
「元プロ講師が教える🔥Webページの作り方講座」、記念すべき第1回は、【HTMLの基礎】の解説です！

👇 本記事は、配信動画を見ながら進めると、よりスムーズに理解できます👇

今回の目標

事前準備

Visual Studio Codeをダウンロード

Mac
拡張子を表示、パスバーを表示、Dockに固定

Windows
「エクスプローラー」開く＞上部「表示」クリック＞「ファイル名拡張子」チェック

ファイルの作成

HTMLとは？
HyperText Markup Language、Webページの骨組み

ファイルとフォルダとは？
ファイルはデータそのもの、フォルダは入れモノ
（folding：折りたたみが語源）

タグの解説前に、まずはフォルダとHTMLファイルを作成しましょう！
（Macのファイル作成は各アプリから）

ブラウザでHTMLファイルのページを表示しましょう！
HTMLファイルにHelloWorldを入力、VSCodeで保存、ブラウザで更新して、文字を表示します。
（ショートカットキー、Mac：Command + S、Windows：Ctrl + S）

タグの概念　h1 ～ h6

タグ == 役割を示すために使います！
（HyperText Markup Languageのどこ？）

<〇〇>「開始タグ」、</〇〇>「終了タグ」と呼びます！
役割を持った塊のことを「要素」と呼びます！
〇〇の部分を書き換えて、それぞれのタグの役割を見ていきます。
（開始タグそのものが役割を果たす要素は、終了タグがない）

HTMLファイルに以下を入力、ページを表示しましょう！
（heading：見出しを表す、h1〜h6まで、h7以降はエラー）

<h1>h1タグ</h1>
<h2>h2タグ</h2>
<h3>h3タグ</h3>
<h4>h4タグ</h4>
<h5>h5タグ</h5>
<h6>h6タグ</h6>
<h7>h7タグ</h7>
<h8>h8タグ</h8>

!DOCTYPE html　html　head　body

<!DOCTYPE html>
DOCTYPE宣言（文書型宣言）が無いとHTML だと認識してくれない可能性があります。
（開始タグそのものが役割を果たす要素は、終了タグがない）

<html>DOCTYPE宣言以外の全要素が入る箱</html>
　<head>Webクライアントに解析させる情報が入る箱</head>
　<body>ユーザーに見せる全要素が入る箱</body>

HTMLファイルに「!」を入力すると、一発で自動入力してくれます！
コメントアウトは、メモとして活用できます！
HTMLのコメントアウトは、
（ショートカットキー、Mac：Command + /、Windows：Ctrl + /）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>第1回HTMLの基礎</title>
    </head>
    <body>
    </body>
</html>

title　meta　header　footer

<head>の子要素として、以下の要素が入ります。
　<meta charset="UTF-8">　※文書の様々な情報を設定
　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　<title>文書の題名</title>

<body>の子要素として、以下の要素が入ります。
　<header>最上部の表示領域</header>
　<footer>最下部の表示領域</footer>

外側の要素を「親要素」、内側の要素を「子要素」、同じ親要素をもつ要素同士を「兄弟要素」と呼びます！
子要素の子要素を「孫要素」、孫から見たら「祖先要素」と呼びます！
（その先は、「ひ孫」「玄孫やしゃご」「来孫らいそん」「昆孫こんそん」「仍孫じょうそん」「雲孫うんそん」）

複数のタグがある時に見やすいように、終了タグが改行されています！
また、プログラムの構造がパッと見て分かりやすい、タグの閉じ忘れなどに気付きやすいため、インデント（字下げ）はとても重要です。
インデント（字下げ）は、Tabキーで入れることができます。

p　br　a　img

<p>特徴のない文章</p>
（paragraph：段落を表す）

<br>　※コード上で改行しても空白ができるだけ
（break：強制改行を表す、開始タグそのものが役割を果たす）

<a href="https://google.com">リンク</a>
（anchor：現ページからリンク先のページへ繋ぐ役割が船の錨っぽい）
（Uniform Resource Locator：インターネット上の情報資源の位置特定）
（hypertext reference：リンク先のURLを指定）

<img src="source.png">
（image：画像を埋め込む、source：大元の出所、resource：資源）

    <body>
        <header>ヘッダー</header>
            <p>特徴のない文章です。</p><p>特徴のない文章です。</p><p>特徴のない文章です。</p>
            <p>特徴のない文章です。<br>特徴のない文章です。<br>特徴のない文章です。</p>
            <a href="https://www.youtube.com/@nojobsensei">アリキタのYouTube</a>
            <img src="https://yt3.googleusercontent.com/OB9uysqTxGHI551qmOfSG4__MAboe-MIzXeFONx03TgvdzJ2J95t8hb9U0Circva1EM-Mg4M=s176-c-k-c0x00ffffff-no-rj">
        <footer>フッター</footer>
    </body>

ul / ol / li　table / tr / th / td　div　span

<ul>箇条書き</ul>
（unordered list：箇条書きのリスト）
<ol>順位書き</ol>
（ordered list：順位書きのリスト）
　<li>リストの要素</li>
　（list item：リストの要素）

<table>表を作る箱</table>　※表形式のデータを記入する時に使用
　<tr>表の行</tr>
　（table row：表の行）
　　<th>表の見出し</th>
　　（table header：表の見出し）
　　<td>表のデータ</td>
　　（table data：表のデータ）

<div>グループ化する箱</div>
（division：区分を表す）

<span>要素をスタイル付けする箱</span>
（span：範囲を表す）

    <body>
        <header>ヘッダー</header>
            <h3>箇条書き</h1>
            <ul>
                <li>リスト1</li>
                <li>リスト2</li>
                <li>リスト3</li>
            </ul>
            <h3>順位書き</h1>
            <ol>
                <li>リスト1</li>
                <li>リスト2</li>
                <li>リスト3</li>
            </ol>
            <table>
                <tr>
                    <th>商品</th>
                    <th>価格</th>
                </tr>
                <tr>
                    <td>ニベア</td>
                    <td>150円</td>
                </tr>
                <tr>
                    <td>生茶</td>
                    <td>120円</td>
                </tr>
            </table>
            <div>
                <p>ニベア150円</p>
                <p>生茶<span>120円</span></p>
            </div>
        <footer>フッター</footer>
    </body>

まとめ

HyperText Markup Language、Webページの骨組み
<〇〇>「開始タグ」</〇〇>「終了タグ」
役割を持った塊のこと「要素」
<html>DOCTYPE宣言以外の全要素が入る箱</html>
<head>Webクライアントに解析させる情報が入る箱</head>
<body>ユーザーに見せる全要素が入る箱</body>
外側の要素「親要素」、内側の要素「子要素」
子要素の子要素を「孫要素」、孫から見たら「祖先要素」

今回は、【HTMLの基礎】を解説しました。
沢山のインプットで頭がパンクしそうな人もいるかもしれませんが、ご安心ください！やってくうちに慣れていきます！
これから一緒に、レベルアップしていきましょう！

少しでも良かったなと思った方は、チャンネル登録よろしくお願いします！
第2回は【CSSの基礎】を配信します。それでは、また次回〜！🖐️

この記事が気に入ったらサポートをしてみませんか？

【超有料級】元プロ講師が教える🔥Webページの作り方講座｜第1回【HTMLの基礎】

今回の目標

事前準備

ファイルの作成

タグの概念 h1 ～ h6

!DOCTYPE html html head body

title meta header footer

p br a img

ul / ol / li table / tr / th / td div span

まとめ

タグの概念　h1 ～ h6

!DOCTYPE html　html　head　body

title　meta　header　footer

p　br　a　img

ul / ol / li　table / tr / th / td　div　span