【基礎は簡単】初級2日目　通算2日目　HTML基本 | プログラミングスクールのカモをやってみた

今日からいよいよコーディングの講座に入っていきます。

講座によっては内容の軽い内容もあるので無理しない範囲でできる限り進めていきます

目標の作業量の目安は平日３時間、休日５時間です。

まずはHTMLとCSSからになります。

私はプロゲートでザックリとした基礎は学んでいますが、もう一度復習したいと思います。

目次非表示

HTMLとは

HTML（Hypertext Markup Language）は、ウェブページを作成するための標準的なマークアップ言語です。

HTMLは、テキストベースのコードで構成され、文書内の要素や構造を定義します。これにより、ウェブブラウザがコンテンツを解釈し、ユーザーに対して見やすい形で表示することが可能になります。

HTMLでは、タグ（<tag>と</tag>のような形式）を使用して文書の構造をマークアップします。例えば、以下は簡単なHTML文書の例です

HTML

<!DOCTYPE html>
<html>
<head>
    <title>ページのタイトル</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これは簡単なHTML文書の例です。</p>
</body>
</html>

<!DOCTYPE html>: 文書のDOCTYPEを指定し、HTML5文書であることを示します。
<html>: HTML文書の開始を示し、全体の文書構造を囲みます。
<head>: ページのメタ情報を含むヘッダーセクションです。
<meta charset="UTF-8">: 文字エンコーディングをUTF-8に指定します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: ビューポートの設定で、レスポンシブなデザインを可能にします。
<title>: ページのタイトルを指定します。

ここまでは定型的に覚えていけばいいかなと思います。

css,javascript,メディアクエリ、ライブラリを使うようになればheadの中身も変える必要がありますが、とりあえずhtml,head,meta,titleはコピペでいきます。

いよいよbodyの中身を書いていきます。

bodyが実際にホームページとして見える部分についてなります。

HTMLの多くは開始タグと終了タグで囲みます。

HTML

<h1>こんにちは、世界！</h1>

<h1>が開始タグ、</h1>が終了タグになります。

開始タグと終了タグの間の文字列が画面に表示されます。

よく使われるHTML要素
<header>, <footer>, <article>, <section>, <p>, <div>, <span>

などがあります。

なかには要素を囲まないタグがあります。

HTML


<img src="image.jpg" alt="代替テキスト">

よく使われる自己完結型のタグ

<img>: 画像を表示するための要素

<br>: 改行を表すための要素

<hr>: 水平線を描くための要素
<input>: フォームの入力フィールドを作成するための要素

HTMLでコメントを挿入するには、 で終わる形式を使います。コメントはブラウザに表示されませんが、コード内で説明やメモを残すのに便利です。

以下はHTMLでコメントを挿入する例です：

HTML

<!-- これはコメントです。 -->
<p>これは通常の段落です。</p>

<!--
複数行にまたがる
コメントの例です。
-->

<p>別の段落です。</p>

コメント内のテキストは無視され、ブラウザには表示されません。コメントはコードの可読性を向上させ、他の開発者や自分自身にとって説明やメモを残すのに役立ちます。

これはごく一般的なHTMLタグの一部です。実際のウェブページではこれに加えて、CSSやJavaScriptなどが利用され、ページのデザインや動的な振る舞いを制御します。HTMLは文書の構造を定義し、CSSはスタイルを管理し、JavaScriptは動的なコンテンツや振る舞いを制御します。