はじめに
この手順に従った実験では、HTMLの<aside>
タグの使い方を学びます。このタグは、メインコンテンツに関連するが必須ではないコンテンツを表示するために使用されます。
注:
index.html
でコーディングを練習し、Visual Studio CodeでHTMLを書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でウェブサービスを実行します。その後、Web 8080タブを更新して、ウェブページをプレビューできます。
この手順に従った実験では、HTMLの<aside>
タグの使い方を学びます。このタグは、メインコンテンツに関連するが必須ではないコンテンツを表示するために使用されます。
注:
index.html
でコーディングを練習し、Visual Studio CodeでHTMLを書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でウェブサービスを実行します。その後、Web 8080タブを更新して、ウェブページをプレビューできます。
コードエディタを開き、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ブラウザがどのコンテンツが必須でどのコンテンツが必須でないかを理解するのに役立ちます。