ペット飼育の喜びを解き放ちましょう：Pet's House を発見しましょう

はじめに

私たちは、ペット愛好者にとって心地よいオンライン空間を作る旅に出ます。私たちの舞台である「ペットパラダイス」には、元気で情報豊富なウェブサイトを通じてペット飼い主同士をつなぐ夢を持つ登場人物である「イノベーターのアレックス」がいます。アレックスの目標は、ペットサービスを紹介し、ストーリーを共有し、コミュニティを作ることです。このシナリオは、アレックスのビジョンをデジタル現実に変えるプロセスを学生たちに導き、魅力的なものになるようにデザインされています。

まずは、小さなプロジェクトを通じてHTMLの基本を学び、簡単なウェブページを作成するプロセスを導く3つの実験を重点的に学びます。

この実験では、「ペットハウス」のヘッダーセクションとホームページのレイアウトを作成します。このセクションは、強い第一印象を与えるために重要です。ヘッダーにはナビゲーションメニューが含まれ、ホームレイアウトはウェブサイトを訪れた人に紹介します。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") subgraph Lab Skills html/basic_elems -.-> lab-271712{{"ヘッダーとホームのレイアウト"}} html/head_elems -.-> lab-271712{{"ヘッダーとホームのレイアウト"}} html/lang_decl -.-> lab-271712{{"ヘッダーとホームのレイアウト"}} html/layout -.-> lab-271712{{"ヘッダーとホームのレイアウト"}} html/nav_links -.-> lab-271712{{"ヘッダーとホームのレイアウト"}} html/doc_flow -.-> lab-271712{{"ヘッダーとホームのレイアウト"}} end

HTML ドキュメント構造

ユーザーがインターネットを通じてウェブを閲覧するとき、彼らは文章、リンク、チャート、画像など、さまざまな形式のコンテンツに出会います。

あなたはこれまで、ブラウザがこのページコンテンツをどのように表示するか疑問に思ったことがありますか？ページのソースコードを表示するには、F12 を押すことができます。以下の図に示すようになります。

上の図から、すべての文字コンテンツが角括弧 < と > の中に囲まれていることがわかります。このようなコンテンツはタグと呼ばれ、<> は開始タグを表し、</> は終了タグを表します。

HTML は、要素で構成される言語であり、要素はタグで表されます。

HTML（HyperText Markup Language）は、ウェブページとそのコンテンツの構造を定義するために使用されるコードです。

ハイパー：「ハイパー」は「線形」と対照的です。以前のコンピュータプログラムは主に線形で、上から下に順番に実行する必要がありました。一方、HTML で作成されたウェブページは、ハイパーリンクを通じてページ間を移動できます。
テキスト：C、C++、Java などのコンパイル型のプログラミング言語とは異なり、HTML はテキストベースのスクリプト言語です。そのソースコードは、コンパイルする必要なく、ブラウザで直接解釈されて実行されます。
マークアップ：HTML の基本原理は、マークアップ（角括弧で構成されるタグ）を使用して、ウェブページのコンテンツがブラウザでどのように表示されるかを記述することです。
言語：HTML は言語ですが、解釈型でコンパイル型ではありません。そのすべてのマークアップタグは、ブラウザによって最終的な表示結果に変換されます。

このステップでは、まずウェブページの基本構造を設定します。コマンド touch ~/project/index.html を使用して、ディレクトリ /home/labex/project に新しい HTML ファイル index.html を作成します。好きなテキストエディタでこのファイルを開き、基本的な HTML ドキュメント構造を追加します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!-- 次のステップでここにコンテンツを追加します -->
  </body>
</html>

<!DOCTYPE html> 宣言は、ブラウザに期待されるドキュメントの種類を伝えます。
<html lang="en"> 要素は、HTML ドキュメントのルート要素です。
<head> 要素には、タイトルや文字セットなどのメタデータ（ドキュメントに関するデータ）が含まれています。
<title> 要素は、ウェブページのタイトルを指定します。
<meta charset="UTF-8"> 要素は、ウェブページの文字エンコーディングを指定します。
<body> 要素には、ウェブページの表示可能なコンテンツが含まれています。

環境の右下隅にある Go Live をクリックしてポート 8080 を開き、環境の左上隅にある Web 8080 をクリックしてページ結果を表示します。

注：現在のページには効果がありません。body は現在空であるため、より多くのタグを学ぶときにページの効果を確認できます。

✨ 解答を確認して練習

意味的要素

ウェブページのレイアウトは通常、いくつかの重要な部分で構成されており、それぞれが明確な目的を果たして、ユーザーインターフェイスがクリーンで機能的であることを保証します。

ヘッダー：これはウェブページの上部領域で、通常、サイトのロゴ、ナビゲーションメニュー、ログイン/登録リンクなどが含まれます。ヘッダーはユーザーが最初に注意するものの1つであるため、通常、目立つようにデザインされ、簡単なナビゲーションアクセスを提供します。
ナビゲーションバー：ナビゲーションバーはヘッダーの一部であることができますが、一部のデザインでは、ページの上部、側面、または下部にある別個のセクションでもあり得ます。ナビゲーションバーは、ウェブサイト内の内部リンクへの迅速なアクセスを提供し、ユーザーが興味のあるコンテンツを簡単に見つけるのを助けます。
メインコンテンツ：これはウェブページの核心部分で、ユーザーがページを訪問して見たい主要な情報またはコンテンツが含まれています。メインコンテンツは、記事、ブログ記事、商品表示など、いくつかのセクションにさらに分割することができ、ウェブサイトの目的とレイアウトに応じて異なります。
サイドバー：サイドバーは通常、メインコンテンツの横にあり（左または右のどちらか）、関連リンク、広告、検索ボックス、ソーシャルメディアリンクなど、追加の情報または機能を提供します。
フッター：ウェブページの下部に位置し、フッターには通常、著作権情報、連絡先、サイトマップへのリンク、プライバシーポリシー、ソーシャルメディアアイコンなどが含まれます。フッターは、ユーザーが画面を下にスクロールしたときに最後に見る部分であり、基本的なサイト情報と追加のナビゲーションオプションを提供します。

意味的要素 (header, main, footer) を追加して、コンテンツを論理的に整理します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--ヘッダーコンテンツ-->
    <header></header>
    <!--メインコンテンツ-->
    <main></main>
    <!--フッターコンテンツ-->
    <footer></footer>
  </body>
</html>

 はHTMLのコメントで、コードにメモや説明を追加するために使用されます。コードの機能には影響しませんし、ブラウザによって無視されます。
<header> HTML要素は、導入コンテンツを表し、通常、一連の導入またはナビゲーション支援要素で構成されます。
<main> HTML要素は、ドキュメントの <body> の主要なコンテンツを表します。メインコンテンツ領域は、ドキュメントの中心トピックに直接関連するか、それを拡張するコンテント、またはアプリケーションの中心機能から構成されます。
<footer> HTML要素は、最も近い祖先の区分化コンテンツまたは区分化ルート要素のフッターを表します。フッターには通常、区分の作成者に関する情報、著作権データ、または関連ドキュメントへのリンクが含まれます。

✨ 解答を確認して練習

ヘッダーセクション

ホームセクションには、次のコンポーネントが含まれる必要があります。

次に、ヘッダーセクションのレイアウトを実装する必要があります。このセクションには、ロゴ画像とナビゲーションが含まれます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--ヘッダーコンテンツ-->
    <header>
      <div class="logo-section">
        <img class="logo" src="images/logo.svg" alt="logo" />
      </div>
      <nav class="navigation-section">
        <ul class="navigation">
          <li>Home</li>
          <li>About Us</li>
          <li>Display</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
    <!--メインコンテンツ-->
    <main></main>
    <!--フッターコンテンツ-->
    <footer></footer>
  </body>
</html>

<div> と <nav> タグを使用して、ロゴとナビゲーションを2つの領域に分割します。
<img> HTML要素は、画像をドキュメントに埋め込みます。
<img> タグの src 属性は、画像へのパスを指定するために使用されます。
<img> タグの alt 属性は、画像を説明するために使用され、ページ上で画像が正常に表示できない場合、alt の内容が表示されます。
タグ内の class はグローバル属性であり、等号の後の内容は要素に与えられた名前に相当し、CSSによって特定の要素を識別し、指定された要素のスタイルを設定するために使用されます。
<ul> HTML要素は、項目の順序付きでないリストを表し、通常、箇条書きのリストとしてレンダリングされます。
<li> HTML要素は、リスト内の項目を表します。
<a> HTML要素は、ハイパーリンクを定義するために使用され、異なるページ間にリンクを作成します。

注：HTMLはウェブページにコンテンツを配置するために使用されますが、CSSは視覚的に魅力的なレイアウトを作成するために不可欠です。この実験では、HTMLコンテンツの学習に焦点を当てています。より良いページデザインを達成するために、完全な style.css ファイルも提供しています。

✨ 解答を確認して練習

ホームセクションのレイアウト

次に、ホームのレイアウトを完成させましょう。これは、タイトル、テキスト、画像の3つの部分で構成されています。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--ヘッダーコンテンツ-->
    <header>
      <div class="logo-section">
        <img class="logo" src="images/logo.svg" alt="logo" />
      </div>
      <nav class="navigation-section">
        <ul class="navigation">
          <li>Home</li>
          <li>About Us</li>
          <li>Display</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
    <!--メインコンテンツ-->
    <main>
      <div class="container">
        <section id="home" class="cover-sect">
          <div class="title-text">
            <h1>Welcome</h1>
            <p>~ This website offers personalised services for pets. ~</p>
          </div>
          <div class="box-feature">
            <img class="cover-image" src="images/cat.jpeg" alt="just a cat" />
          </div>
        </section>
      </div>
    </main>
    <!--フッターコンテンツ-->
    <footer></footer>
  </body>
</html>

<section> HTML要素は、ドキュメントの一般的な独立したセクションを表します。
<h1> HTML要素は、<section> 要素内のコンテンツの見出しを表します。
<p> HTML要素は、段落を表します。

✨ 解答を確認して練習

まとめ

この実験では、「Pet's House」のための歓迎感とナビゲーションが容易なインターフェイスを作成することに焦点を当てて、ヘッダーとホームページのレイアウトを構造化し、スタイリングする方法を学びました。この実験では、第一印象の重要性を強調し、ユーザーフレンドリーなウェブサイトの基礎を築きました。