HTML 基礎の確立

HTMLタグの基本

まずはHTMLの基本から学んでいきましょう。
HTMLは、ウェブページを作成するための言語です。
この言語では、「タグ」と呼ばれる特別な印を使用して、テキストに追加情報を付与します。
タグを使うことで、テキストは単なる文字列から「見出し」、「リンク」、「画像」など特定の役割を持った内容へと変化します。

HTMLでは、ほとんどのタグが開始タグと終了タグのペアで構成されます。
開始タグで要素の開始を示し、終了タグでその終了を示します。
たとえば、テキストを見出しとして表示する場合、以下のように書きます。

この例では、<h1>が開始タグ、</h1>が終了タグです。
このタグに囲まれたテキストは、ウェブページ上で「見出し1」として表示されます。
見出しタグ (<h1>, <h2>, ..., <h6>) は1から6まであり、<h1>が最も大きな見出しを表し、数字が大きくなるにつれて小さな見出しを示します。

段落の作成: <p> 要素,<h2> 要素との関連

<p>要素は、ウェブページ上で一つの段落を作成するために使用されます。
このタグに囲まれたテキストは自動的に新しい行から始まり、終了タグの後にも新しい行が始まります。
これにより、段落間には視覚的な空間が生まれ、テキストの読みやすさが向上します。

<h2> タグは「見出し2」として使用され、セクションタイトルや重要なトピックヘッダーを示すのに適しています。
<h2> タグや <p> タグで囲まれたテキストは、どちらも新しい行から始まりますが、目的が異なります。

<h2>:
セクションのタイトルやサブヘッダーを示し、内容の概要を提供します。

<p>:
長いテキストを適切な長さの段落に分割し、読みやすくします。

p 要素について(例：①)：
このコードでは、二つの段落が作成されており、ブラウザではこれらの段落が別々のブロックとして表示されます。

h2 要素との関連(例：②)：
この例では、<h2> タグが新しいセクションの開始を告げ、直後の <p> タグでそのセクションの詳細が説明されています。
この構造により、情報が整理され、ユーザーが内容を理解しやすくなります。

結論
<p> 要素はテキストを段落に分割し、情報のブロックを形成するのに理想的です。
一方、<h2> タグは情報のカテゴリーや重要なポイントを明確にするために使用されます。
適切にこれらのタグを使用することで、内容の構造が明確になり、読者の理解を助けます。

HTMLコメントの基本

HTMLコメントは、<!-- で始まり --> で終わります。 コメントを使用することで、コードに注釈を加えることができ、その部分が何をするものかを記述できます。 また、デバッグプロセス中に特定のHTML要素を一時的に無効にする際にも役立ちます。

このコメントタグの中に書かれたテキストはウェブページに表示されません。
HTML文書で説明やメモを残すための便利な方法です。
この例では、見出しと段落に簡単な説明がコメントとして付けられています。
また、画像のHTMLコードはコメントアウトされており、必要に応じてコメントを解除することで画像が表示されるようになります。

コメントの利点
コードの説明:
コメントを使ってコードの各部分が何をするのかを説明できます。
これは他の開発者がコードを理解するのに役立ちます。

デバッグの助け:
コードの一部を一時的に無効化することで、問題の原因を特定しやすくなります。

チームワークの向上:
チームプロジェクトにおいて、コメントを通じて他のメンバーに注意を促したり指示を出すことができます。

結論
HTMLのコメントは、コード内に非表示のメモや指示を加えるための強力なツールです。
見えない部分で強く作用し、開発の効率化やチーム間のコミュニケーションを助けます。
適切に使用することで、より清潔で、理解しやすいコードを維持することができます。

リンクの作成

※セキュリティ上の理由から、リンクの確認は別画面（プレビュー）を開いて行ってください。
本ページからは直接リンク先に移動できないようになっています。

リンクを作成する基本的な形式は以下の通りです:
<a href="URL">リンクテキスト</a>
<a>:
アンカー要素の開始タグです。

href属性:
この属性にはリンク先のURLを指定します。

リンクテキスト:
リンクとして表示されるテキストです。この部分がユーザーにクリックされます。

</a>:
アンカー要素の終了タグです。

例: KiCodeへのリンクを作成する
以下のコードは、"KiCode"というテキストリンクを作成し、クリックするとKiCodeのホームページに飛ぶように設定しています。

※セキュリティ上の理由から、リンクの確認は別画面（プレビュー）を開いて行ってください。
本ページからは直接リンク先に移動できないようになっています。

新しいタブで開くリンク
リンクを新しいブラウザタブで開かせたい場合は、target="_blank"属性を追加します。

結論
<a>要素を使用することで、HTMLドキュメントにおいてテキストや画像を介して他のページへのリンクを簡単に挿入できます。
href属性でリンク先のURLを指定し、必要に応じてtarget属性でリンクの開き方を制御します。
これらの基本をマスターすることで、効果的なウェブナビゲーションを設計できます。

属性について

・属性とは
属性はHTMLタグに追加情報を提供し、ブラウザに対してそのHTML要素の振る舞いをどう制御するか指示します。
例えば、<a>タグ（アンカータグ）のhref属性は、リンク先のURLをブラウザに伝えるために使用します。

・属性の書き方 属性をHTMLタグに追加するには、開始タグの中に属性名とその値を設定します。基本的な構文は次のようになります
<タグ名 属性名="属性値">
タグ名: HTMLの要素名です（例: a, img, divなど）。
属性名: その要素に設定したい属性の名前です（例: href, src, altなど）。
属性値: 属性に設定したい値です。属性値はダブルクォーテーション(")で囲みます。

・属性値をダブルクォーテーションで囲む理由
HTMLでは、属性値をダブルクォーテーションで囲むのが一般的です。
これは、属性値内にスペースや特定の記号が含まれている場合に、その値を正確に区切るためです。
例えば、class="btn btn-primary"のようにクラス属性を設定する場合、複数のクラス名をスペースで区切って一つの属性値として設定します。

・注意点
属性名は小文字で書くことが推奨されています（HTML5では大文字と小文字を区別しませんが、一貫性のため）。

JavaScriptでは、属性値にシングルクォーテーション(')を使用することもありますが、HTML内ではダブルクォーテーション(")の使用が一般的です。

値がブール値の属性（例：disabled, checkedなど）は、属性名のみを記述することも可能です（例：<input type="checkbox" checked>）。

画像の表示

HTMLで画像を表示するには、<img>要素を使用します。
この要素は画像を埋め込むために設計されており、src属性を用いて画像のURLを指定することで画像が表示されます。
<img>タグはテキストを含まない単独のタグであるため、終了タグは不要です。
以下にその使用方法をよりわかりやすく解説します。

<img>タグは、Webページに画像を挿入する際に使用します。基本的な構文は以下の通りです
<img src="画像のURL">
src（sourceの略）: 画像ファイルのURLを指定します。
このURLには、インターネット上の画像のアドレス（例: https://www.example.com/image.jpg）またはローカルファイルシステム上のパス（例: /path/to/image.jpg）が使用されます。

リストの作成

HTMLでリストを作成するには、<li>要素（List Itemの略）を使用します。 リストアイテムは、テキストやその他の内容を箇条書き形式で整理する際に用います。 これらの<li>要素を親要素である<ul>（Unordered Listの略、順序なしリスト）または<ol>（Ordered Listの略、順序ありリスト）で囲むことで、リストの形式を定義します。 以下にその詳細と使用例を示します。

・<li>要素の基本
<li>要素は、リスト内の各項目を表します。
この要素だけではリストとしての形式は完成せず、<ul>や<ol>といったリストの親要素の中に置かれる必要があります。

・リストの種類
順序なしリスト (<ul>):
<ul>要素に囲まれた<li>要素は、各項目の先頭に黒点（ディスク）が付きます。
主に順序を要しないリストアイテムを表示するのに使います。

順序ありリスト (<ol>):
<ol>要素に囲まれた<li>要素は、各項目の先頭に連番（数字）が付きます。
手順や順序を示すリストを作成する際に適しています。

・入れ子の概念
入れ子（Nesting）:
一つの要素を別の要素の中に入れることを指します。
この場合、外側の要素を「親要素」、内側の要素を「子要素」と呼びます。
<li>要素は常に親要素（<ul>や<ol>）の中に置かれます。

注意点
<li>要素は、リストを形成するために必ず<ul>または<ol>の子として使用する必要があります。
<li>タグ自体は終了タグが必要です（<li></li>）。
リストを使う際は、視覚的な整理だけでなく、Webアクセシビリティを向上させるためにも<ul>や<ol>を適切に使い分けることが重要です。

インデントについて

HTMLにおいて入れ子構造（ネスティング）を持つ要素がある場合、インデント（字下げ）を用いることが一般的です。
インデントをする主な目的は、親子関係を明確にし、構造が複雑になってもコードの読みやすさを保つためです。
ここでは、HTMLでのインデントの基本とその方法について解説します。

・インデントの目的
インデントは、以下のような利点を提供します：

視覚的なクリアネス:
入れ子になっている要素がどの要素の子であるか一目で理解できます。

整理整頓:
コードが整理されていて、エラーを見つけやすくなります。

保守性の向上:
他の開発者がコードを理解しやすくなり、チームでの協力がスムーズに進みます。

・インデントの方法
HTMLでインデントを行う際の基本的な方法は以下の通りです：
タブキーの使用:
行の先頭で「Tab」キーを押すことで、簡単にインデントを追加できます。
通常、タブはスペース4個分の幅を持ちますが、エディタによって異なる場合があります。

スペースキーの使用:
代わりにスペースキーを使って手動でスペースを4個入力することも一般的です（特に、コーディング規約でタブの使用が禁止されている場合）。

注意点
一貫性:
全ての入れ子構造で同じレベルのインデント（同じ数のスペースまたはタブ）を使用することが重要です。

設定の統一:
開発チーム内でタブとスペースのどちらを使用するか、その数はいくつかを統一することで、コードの一貫性を保つことができます。
インデントはシンプルですが、HTMLコードの読みやすさと整理整頓に非常に大きな役割を果たします。
適切に使用することで、よりプロフェッショナルなコードを書くことができます。