おはようございます！

8月5日月曜日。例のごとく晴れ🌞
最高気温35℃（東京）。暑い！！
終わりなき夏💦年々夏が長くなってる気がする。。

そんな愚痴をグチグチいっても仕方がないので今日も学んでまいります。

今日の教材も例のごとくこちら

よしやっていこう！

CHAPTER２　Webの基本構造を作る！HTMLの基本

CHAPTER２－１２

より使いやすいフォームにしよう

◆フォームのラベルを作る

ラベルを付けることでより使いやすいフォームになる。ラベルは<label>タグを使う。for属性をつけ、関連付けたいフォームのパーツにid属性をつけて同じ値（識別名）にすればパーツ同士が関連付けられる。

<input type=”checkbox” name=”travel” value=”日本国内” id=”japan”>
<lavel for=”japan”>日本国内</lavel>

<input type=”checkbox” name=”travel” value=”ヨーロッパ” id=”europe”>
<lavel for=”europe”>ヨーロッパ</lavel>

<input type=”checkbox” name=”travel” value=”東南アジア” id=”asia”>
<lavel for=”asia”>東南アジア</lavel>

実装すると

日本国内ヨーロッパ東南アジア

ん？

なんで？

テキスト部分をクリックしてもなんも起こらんが？？

・

・・

・・・

みなさんはもうすでにお気づきかと思いますが、
私はこれで30分ハマりました。。

×「lavel」
〇「label」

Copilotって意外と使えるな。。
上のコードをポンと貼り付けるだけで他の文章を添えなくてもちゃんと回答が返ってきた。

「コードを確認しましたが、問題は「lavel」タグのスペルミスにあるようです。」とのこと。

すません

<input type=”checkbox” name=”travel” value=”日本国内” id=”japan2″>
<label for=”japan2″>日本国内</label>

<input type=”checkbox” name=”travel” value=”ヨーロッパ” id=”europe2″>
<label for=”europe2″>ヨーロッパ</label>

<input type=”checkbox” name=”travel” value=”東南アジア” id=”asia2″>
<label for=”asia2″>東南アジア</label>

※上のコードと競合しちゃうので値に「2」をつけてます。

実装すると

日本国内ヨーロッパ東南アジア

※識別名を付けるときの注意点

識別名は必ず一対になる必要があり、同じファイル内で1か所にのみ使用でき、重複はできない。

CHAPTER２－１３

グループ分けをしよう

◆グループ分けとは？

Webサイトは様々な構成要素を組み合わせて作られている。

例えば、

<h4>明日の天気</h4>
　<p>明日は相変わらず灼熱でしょう</p>

<h5>おすすめの着こなし</h5>
　<p>できれば何も着ないで出かけたいところですがお巡りさんにつかまってしまうのでそれはやめておいたほうがよいでしょう</p>

実装すると

明日の天気

明日は相変わらず灼熱でしょう

明日の天気

明日は相変わらず灼熱でしょう

明日の天気

明日は相変わらず灼熱でしょう

ウェブサイトのタイトル

※リンク先にはつながりませんので悪しからず。

◆ナビゲーションメニューを作る

<nav>タグは、ウェブページ内のナビゲーションリンクをグループ化するために使用されるセマンティックな要素。
主にサイトのヘッダーやサイドバーに配置され、ユーザーがサイト内を移動するためのリンクを含む。

基本的にメインではないメニュー部分には使わない。

＜特徴＞

ナビゲーションの明示：ブラウザや検索エンジンに対して「ここがナビゲーション部分です」という目印を示す。
複数回使用可能：サイト内で複数のナビゲーションセクションがある場合、複数回使用することができる。
他のタグとの組み合わせ：通常、<ul>タグや<li>タグと組み合わせて使用され

＜記述例＞

<nav>
　<ul>
　　<li><a href=”#section1″>セクション1</a></li>
　　<li><a href=”#section2″>セクション2</a></li>
　　<li><a href=”#section3″>セクション3</a></li>
　</ul>
</nav>

実装すると

※リンクは繋がってませんので悪しからず。

<nav>タグを使うことで、Webページのナビゲーションを明確にし、ユーザーがサイト内を簡単に移動できるようになる。

◆読み物、記事の部分を作る

<article>タグは、HTML5で導入された要素で、独立したコンテンツのブロックを表す。「article」は英語で「記事」を意味し、ページ内の記事となる部分、そこだけを見ても独立したページとして成り立つような内容に使われる。

＜特徴＞

独立したコンテンツ:ニュース記事、ブログ投稿、フォーラムの投稿など、独立して意味を持つコンテンツを囲むために使用される。
再利用可能：他の場所でも再利用できるコンテンツを示す。
セマンティック：検索エンジンやスクリーンリーダーにとって、コンテンツの意味を理解しやすくする。

＜記述例＞

<article>
　<h4>ブログのタイトル</h4>
　<p>この記事の内容は、最新の夏の気温の情報！つまり天気予報！！</p>
</article>

実装すると

ブログのタイトル

この記事の内容は、最新の夏の気温の情報！つまり天気予報！！

◆テーマを持ったグループを作る

<section>タグは、文書の中で意味的に関連する内容をグループ化するために使われる。<article>タグと似ているが、記事とは異なり、その部分だけを見ても完結しない。そのひと固まりに１つのテーマがある。

＜特徴＞

意味的なグループ化：<section>タグは、文書の中で意味的に関連する内容をまとめるために使用される。例えば、記事の章やウェブページのセクションなど。
見出しの使用：各<section>には通常、見出しが含まれます。これによりセクションの内容が明確になる。
ネスト可能：他のセクションやコンテナ要素の中にネストすることができる。

＜記述例＞

<section>
　<h4>その他のオススメの記事</h4>
　<ul>
　　<li><a href=”#”>スマートウォッチって使える？</a></li>
　　<li><a href=”#”>ウォーキングにはこのシューズ！！</a></li>
　</ul>
</section>

実装すると

その他のオススメの記事

スマートウォッチって使える？
ウォーキングにはこのシューズ！！

※リンク先はありませんので悪しからず。

◆ページのメインコンテンツを作る

<main>タグは、HTML5で導入されたセマンティックな要素で、ウェブページの主要なコンテンツを示すために使用される。通常、ヘッダー、ナビゲーション、サイドバー、フッターなどの共有コンテンツを除いた部分が対象。

＜特徴＞

セマンティックな意味：<main>タグは、ページの主要なコンテンツを明示的に示すため、検索エンジンやスクリーンリーダーにとって有益。
1ページに1つだけ：各ページには1つの<main>タグのみを使用することが推奨される。
アクセシビリティの向上：スクリーンリーダーを使用するユーザーが、ページの主要なコンテンツに直接アクセスしやすくなる。

＜記述例＞

<main>
　<article>
　　<h4>記事タイトル</h4>
　　<p>最新のスマートフォン情報！最新機種続々！！</p>
　</article>

　<section>
　　<h5>その他のオススメ記事</h5>
　　　<ul>
　　　　<li><a href=”#”>スマートウォッチって使える？</a></li>
　　　　<li><a href=”#”>ウォーキングにはこのシューズ！！</a></li>
　　　</ul>
　</section>
</main>

実装すると

記事タイトル

最新のスマートフォン情報！最新機種続々！！

その他のオススメ記事

スマートウォッチって使える？
ウォーキングにはこのシューズ！！

※リンクは繋がってませんので悪しからず。

◆メインコンテンツではない補足情報

<aside>タグは、HTML5で導入された要素で、主にページのメインコンテンツとは直接関連しない補足的な情報を提供するために使用される。主にサイドバーや補足情報、広告、引用、関連リンクなどを表示するために使用。

＜特徴＞

補足的な内容：<aside>タグは、メインコンテンツに関連するが、直接的には関係しない補足的な情報を表示するために使用される。
セマンティックな意味：ブラウザや検索エンジンに対して、ここが補足情報のセクションであることを明示できる。
アクセシビリティの向上：スクリーンリーダーを使用するユーザーにとって、ページの異なるセクションを認識しやすくなる。
スタイリングが容易：CSSを使用して、<aside>タグ内のコンテンツを簡単にスタイリングできる。

＜記述例＞

実装すると

※リンクは繋がっていませんので悪しからず。

◆ページ下部のフッター部分を作る

<footer>タグは、HTML5で導入された要素で、ウェブページやセクションのフッター部分を表すために使用される。通常、ページの下部に配置され、著作権情報、著者の連絡先、関連リンクなどを含むことが多い。

＜特徴＞

セマンティックな意味：<footer>タグは、ブラウザや検索エンジンに対して、ここがフッター部分であることを明示する。
複数回使用可能：ページ内で複数の<footer>タグを使用することができるが、入れ子にすることはできない。
スタイリングが容易：CSSを使用して、<footer>タグ内のコンテンツを簡単にスタイリングできる。

<記述例＞

実装すると

※上記メールアドレスには送信できませんので悪しからず。

◆意味を持たない部分をまとめる

<div>タグは、特に意味を持たないタグ。最も基本的かつ重要な要素の一つで、ブロック要素を作成するためだけに使用される。
他のHTML要素をグループ化し、スタイルやレイアウトを適用するために使用される。

＜特徴＞

ブロック要素：<div>タグはブロック要素であり、他のブロック要素と同様に、幅全体を占め、次の要素は新しい行に表示される。
スタイルの適用：CSSを使用して、<div>タグ内のコンテンツにスタイルを適用できます。例えば、背景色、余白、境界線など。
レイアウトの構築：ウェブページのレイアウトを構築するために頻繁に使用される。特に、FlexboxやGridレイアウトと組み合わせることで、複雑なレイアウトを簡単に作成できる。

＜記述例＞