マークタグで強調表示されたテキスト

はじめに

HTML では、 タグを使用してテキストの一部を強調またはマークして、そのテキストの重要性を示します。この実験では、 タグを使用して強調表示されたテキストを作成する方法を学びます。

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70796{{"HTML で強調表示されたテキスト"}} html/head_elems -.-> lab-70796{{"HTML で強調表示されたテキスト"}} html/lang_decl -.-> lab-70796{{"HTML で強調表示されたテキスト"}} html/text_head -.-> lab-70796{{"HTML で強調表示されたテキスト"}} html/para_br -.-> lab-70796{{"HTML で強調表示されたテキスト"}} html/layout -.-> lab-70796{{"HTML で強調表示されたテキスト"}} html/inter_elems -.-> lab-70796{{"HTML で強調表示されたテキスト"}} end

HTML ファイルをセットアップする

まず、index.html ファイルを作成して、HTML ファイルの基本構造をセットアップします。次のコードを挿入します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Highlighted Text with Mark Tag</title>
  </head>
  <body></body>
</html>

マークアップにテキストを追加する

<body> タグの間にいくつかのテキストを追加します。この例では、文の中の "Brown fox" というテキストを強調表示します。

<body>
  <p>The quick <mark>brown fox</mark> jumped over the lazy dog.</p>
</body>

デフォルトの色を変更するための CSS スタイルを追加する

デフォルトでは、強調表示されたテキストは黄色の背景色と黒の文字色になります。 タグに CSS を追加することで、これらの色を変更できます。たとえば、強調表示された背景色を赤色に、文字色を白色に変更するには、次の CSS スタイルを追加します。

<style>
  mark {
    background-color: red;
    color: white;
  }
</style>

オプション): スタイリング用のクラスセレクタを追加する

ページに複数の強調表示されたテキストのインスタンスがあり、すべてを同じ方法でスタイリングしたい場合、 タグにクラスを追加して CSS クラスセレクタを追加できます。次の例では、 タグに highlight という名前のクラスを追加し、その後 CSS を使用してスタイリングします。

<body>
  <p>
    The quick <mark class="highlight">brown fox</mark> jumped over the lazy dog.
  </p>
  <p>The <mark class="highlight">sun</mark> is a star.</p>
</body>

<style>
  .highlight {
    background-color: green;
    color: white;
  }
</style>

まとめ

以上です！HTML の  タグを使って強調表示されたテキストを作成する方法を学びました。 タグといくつかの CSS スタイルを使うことで、読者の注意をテキストの重要な部分に簡単に引き付けることができます。