HTML5 の Aside タグをマスターする

はじめに

この手順に従った実験では、HTMLの<aside>タグの使い方を学びます。このタグは、メインコンテンツに関連するが必須ではないコンテンツを表示するために使用されます。

注: index.htmlでコーディングを練習し、Visual Studio CodeでHTMLを書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でウェブサービスを実行します。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

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/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70703{{"HTML コンテンツのサイド"}} html/head_elems -.-> lab-70703{{"HTML コンテンツのサイド"}} html/text_head -.-> lab-70703{{"HTML コンテンツのサイド"}} html/para_br -.-> lab-70703{{"HTML コンテンツのサイド"}} html/lists_desc -.-> lab-70703{{"HTML コンテンツのサイド"}} html/layout -.-> lab-70703{{"HTML コンテンツのサイド"}} html/doc_flow -.-> lab-70703{{"HTML コンテンツのサイド"}} html/inter_elems -.-> lab-70703{{"HTML コンテンツのサイド"}} end

HTMLページのセットアップ

コードエディタを開き、index.htmlという名前の新しいファイルを作成し、次の基本的なHTML構造を追加します。

<!doctype html>
<html>
  <head>
    <title>HTML Aside Tag Tutorial</title>
  </head>
  <body></body>
</html>

メインコンテンツの作成

<body>タグの中に、いくつかのメインコンテンツを作成しましょう。次のコードを追加します。

<h1>Welcome to my blog!</h1>
<p>
  In this article, we'll explore the benefits of using HTML5. HTML5 is a markup
  language used for structuring and presenting content on the World Wide Web.
</p>

サイドコンテンツの追加

次に、メインコンテンツに関する追加情報を含む<aside>タグを追加しましょう。手順2の段落の下にこのコードを追加します。

<aside>
  <h2>About this article</h2>
  <p>
    This article was written by John Doe, a web developer who has been working
    in the industry for more than 8 years. He is passionate about web
    development and loves to share his knowledge with others.
  </p>
</aside>

上記のコードを追加することで、記事に関する情報を含む<aside>タグを作成しました。この情報はメインコンテンツに関連していますが、必須ではありません。

`<aside>`タグのスタイリング

次に、<aside>タグにいくつかのスタイルを与えるために以下のCSSを追加します。

<style>
  aside {
    width: 300px;
    margin-left: 30px;
    padding: 10px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
  }
</style>

このCSSを追加することで、<aside>タグにいくつかのスタイルを与えました。幅を300pxに設定し、マージンを30pxに設定し、薄い灰色の背景と境界線があります。

記事に追加コンテンツを追加する

<aside>タグがどのように使用されるかをよりよく視覚化できるように、記事にさらにいくつかのコンテンツを追加しましょう。<aside>タグの下に次のコードを追加します。

<p>
  HTML5 is an important update to the HTML language. It offers new features and
  functionality, making it easier for developers to create web pages and
  applications. Some of the new features in HTML5 include:
</p>
<ul>
  <li>New semantic tags such as header, footer, article, and section</li>
  <li>Improved support for multimedia with video and audio tags</li>
  <li>Better accessibility with the nav and main tags</li>
</ul>

上記のコードを追加することで、メインの記事にいくつかの追加コンテンツを追加しました。HTML5に関する情報が含まれた箇条書きのリストがあります。

まとめ

この手順に沿った実験では、HTMLの<aside>タグを使ってWebページのメインコンテンツに関連する追加コンテンツを追加する方法を学びました。また、CSSを使ってタグにいくつかのスタイルを追加する方法も学びました。<aside>タグを使用することで、検索エンジンやWebブラウザがどのコンテンツが必須でどのコンテンツが必須でないかを理解するのに役立ちます。

HTML コンテンツのサイド