HTML のタグ | ウェブ開発チュートリアル

はじめに

HTMLのタグは、スタイリングの目的で要素をグループ化するために使用されます。フレージングコンテンツの汎用コンテナと考えることができます。タグは<div>タグに似ていますが、<div>がブロックレベル要素であるのに対し、はインライン要素です。タグ自体は何も表していません。この実験では、タグを使ってスタイリングの目的で要素をグループ化する方法を学びます。

注: 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/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/LayoutandSectioningGroup -.-> html/access_cons("Accessibility Considerations") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70839{{"HTML のを使った要素のスタイリング"}} html/head_elems -.-> lab-70839{{"HTML のを使った要素のスタイリング"}} html/para_br -.-> lab-70839{{"HTML のを使った要素のスタイリング"}} html/nav_links -.-> lab-70839{{"HTML のを使った要素のスタイリング"}} html/doc_flow -.-> lab-70839{{"HTML のを使った要素のスタイリング"}} html/access_cons -.-> lab-70839{{"HTML のを使った要素のスタイリング"}} html/inter_elems -.-> lab-70839{{"HTML のを使った要素のスタイリング"}} html/custom_attr -.-> lab-70839{{"HTML のを使った要素のスタイリング"}} end

HTMLコードの追加

index.htmlファイルで、<body>タグの中に次のコードを追加します。

<p>This is a <span>simple</span> example of using the span tag.</p>

ここでは、タグの中に「simple」という単語が含まれた段落を作成しました。これにより、このタグの使い方を実際に理解するのに役立ちます。

``要素のスタイリング

では、タグの中に含まれるコンテンツにスタイルを付ける方法を見てみましょう。たとえば、「simple」という単語に色を付けたい場合、CSSのcolorプロパティを使うことができます。

<head>タグの中に次のCSSコードを追加します。

<style>
  span {
    color: red;
  }
</style>

このCSSコードは、タグの中に含まれるすべてのコンテンツの色を赤色に変更します。「simple」という単語をタグの中に含めているので、赤色で表示されます。

他のHTMLタグとの``の使用

タグは、他のHTML要素とも併用できます。<a>タグと併用する方法を見てみましょう。

<body>タグの中に次のHTMLコードを追加します。

<p>
  This is a <span><a href="#">link</a></span> example.
</p>

これにより、「link」という単語がタグの中に含まれ、URL # にリンクされた段落が作成されます。

リンクされたテキストのスタイリング

では、リンクされたテキストにスタイルを付ける方法を見てみましょう。<head>タグの中に次のCSSコードを追加します。

<style>
  span a {
    color: green;
    text-decoration: none;
  }
</style>

このCSSコードは、<a>タグの中のテキストの色を緑色に設定し、下線を付けないようにします。

イベント属性の追加

タグはグローバル属性とイベント属性の両方をサポートしています。グローバル属性のclassを使ってスタイルを適用する方法を見てみましょう。

次のように、「simple」という単語を囲むタグにclass属性を追加します。

<p>
  This is a <span class="example"><a href="#">link</a></span> example.
</p>

<head>タグの中に次のCSSコードを追加します。

<style>
  .example {
    font-size: 20px;
  }
</style>

このCSSコードは、classがexampleであるタグの中のコンテンツのフォントサイズを大きくします。

意味論的な目的で``タグを使用する

タグ自体には固有の意味はありませんが、その中に含まれるテキストの意味を伝えるために使用できます。たとえば、日付やパーセンテージを囲むことで、その中のテキストが特別な意味を持つことを示すことができます。

たとえば、index.htmlファイルに次のコードを追加します。

<p>My final score is <span class="score" aria-label="90 percent">90</span>.</p>

この例では、90がタグの中に囲まれ、scoreというクラス名が付けられています。これにより、タグの中のテキストが特別な意味を持つことが伝えられます。また、画面リーダーにアクセシビリティ情報を提供するために、aria-label属性が追加されています。

まとめ

この実験では、HTMLのタグを使って要素をグループ化してスタイリングする方法を学びました。また、タグの中に囲まれたコンテンツにスタイルを付ける方法、他のHTMLタグと併用する方法、グローバル属性とイベント属性の使い方、および意味論を伝えるためのタグの使い方についても学びました。

HTML の<span>を使った要素のスタイリング

はじめに

Skills Graph

HTMLコードの追加

`<span>`要素のスタイリング

他のHTMLタグとの`<span>`の使用

リンクされたテキストのスタイリング

イベント属性の追加

意味論的な目的で`<span>`タグを使用する

まとめ

HTML の<span>を使った要素のスタイリング

はじめに

Skills Graph

HTMLコードの追加

<span>要素のスタイリング

他のHTMLタグとの<span>の使用

リンクされたテキストのスタイリング

イベント属性の追加

意味論的な目的で<span>タグを使用する

まとめ

`<span>`要素のスタイリング

他のHTMLタグとの`<span>`の使用

意味論的な目的で`<span>`タグを使用する