ペットの家へようこそ | 個別化されたペットサービス

はじめに

この実験では、ウェブサイトの主なコンテンツ領域に焦点を当てます。このセクションでは、「ペットの家」のサービスを紹介しています。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links") html/MultimediaandGraphicsGroup -.-> html/fig_cap("Figure and Caption Association") subgraph Lab Skills html/basic_elems -.-> lab-271713{{"ペットサービスを紹介するウェブサイト"}} html/text_head -.-> lab-271713{{"ペットサービスを紹介するウェブサイト"}} html/para_br -.-> lab-271713{{"ペットサービスを紹介するウェブサイト"}} html/layout -.-> lab-271713{{"ペットサービスを紹介するウェブサイト"}} html/nav_links -.-> lab-271713{{"ペットサービスを紹介するウェブサイト"}} html/fig_cap -.-> lab-271713{{"ペットサービスを紹介するウェブサイト"}} end

会社概要レイアウト

会社概要セクションは、画像部分とテキストコンテンツ部分に分けることができます。画像を追加するには <img> タグを、タイトルを追加するには <h2> タグを、テキスト段落を追加するには <p> タグを使用します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Header Content-->
    <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 Content-->
    <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>
        <section id="about" class="story-sect">
          <div class="section-text">
            <h2>About Us</h2>
            <p>
              we're about creating a community of happy pets and happier pet
              owners. <br /><br />
              Our exceptional customer service team is dedicated to providing
              you with a seamless shopping experience, offering expert support
              from browsing to delivery and beyond. <br /><br />We understand
              the importance of fast, reliable service, which is why we offer
              expedited shipping options and hassle-free returns.
            </p>
          </div>
          <div class="box-feature circle">
            <img src="images/intro.png" />
          </div>
        </section>
      </div>
    </main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

id グローバル属性は、識別子（ID）を定義します。これは、文書全体で一意でなければなりません。class と同じように、要素の名前のようなものですが、違いは、id が一意であり、id 属性にはブックマークを設定する機能もあります。これを後の実験で使用します。
<h1> から <h6> までの HTML 要素は、セクション見出しの 6 つのレベルを表します。
<br> HTML 要素は、テキスト内で改行（キャリッジ・リターン）を生成します。詩や住所を書く場合に便利で、行の区切りが重要な場合に使用します。

✨ 解答を確認して練習

展示レイアウト

主に画像とテキストで構成される展示ページでは、このページを 3 つのセクションに分けることができます。それぞれのセクションは画像とテキストで構成されています。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Header Content-->
    <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 Content-->
    <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>
        <section id="about" class="story-sect">
          <div class="section-text">
            <h2>About Us</h2>
            <p>
              we're about creating a community of happy pets and happier pet
              owners. <br /><br />
              Our exceptional customer service team is dedicated to providing
              you with a seamless shopping experience, offering expert support
              from browsing to delivery and beyond. <br /><br />We understand
              the importance of fast, reliable service, which is why we offer
              expedited shipping options and hassle-free returns.
            </p>
          </div>
          <div class="box-feature circle">
            <img src="images/intro.png" />
          </div>
        </section>
        <section id="display" class="samples">
          <div class="section-text">
            <h2>Display</h2>
          </div>
          <div class="services">
            <div class="service">
              <figure>
                <img src="images/service-1.png" alt="Dog walking services" />
                <figcaption>Provide pet care services.</figcaption>
              </figure>
            </div>

            <div class="service">
              <figure>
                <img src="images/service-2.png" alt="Pet check-up services" />
                <figcaption>Provide pet check-up services.</figcaption>
              </figure>
            </div>

            <div class="service">
              <figure>
                <img src="images/service-3.png" alt="Pet washing services" />
                <figcaption>Provide pet washing services.</figcaption>
              </figure>
            </div>
          </div>
        </section>
      </div>
    </main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

<figure> HTML 要素は、キャプション（オプション）付きの独立したコンテンツを表します。キャプションは <figcaption> 要素を使用して指定します。図、そのキャプション、およびそのコンテンツは、1 つの単位として参照されます。

✨ 解答を確認して練習

まとめ

この実験では、ウェブサイトのメインセクションを開発する方法を案内しました。そこでは、「ペットの家」のサービスを紹介しました。このステップは、ウェブサイトが提供するものを詳細に説明し、構造化されたコンテンツと美学的な要素を通じてサイトの訪問者に対する価値を高めるために重要でした。