HTML の small タグの使用方法

はじめに

この実験では、HTML のタグを使ってテキストのサイズを変更する方法を学びます。また、タグの使い方の違いや、それにスタイルを適用する方法についても学びます。

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

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

ファイルに構造を追加する

テキストエディタでindex.htmlという名前の HTML ファイルを作成します。

ファイルに HTML のボイラープレートを追加します。その後、<body>タグを作成し、その中に次のコードを追加します。

<h1>Using the HTML small tag</h1>
<p>This is some text that we want to make smaller:</p>

small タグを追加する

タグの中にタグを追加し、開始タグと終了タグの間にいくつかのテキストを追加します。

<p>This is some text that we want to make <small>smaller</small>:</p>

法的文言に small タグを使用する

次のコードを<body>タグの中にコピーして貼り付けることで、タグを使って法的文言を追加します。

<p>
  This is just some regular text, but here is some <small>legal text</small>:
</p>
<small
  >This website is not responsible for any misinformation or errors. Please read
  carefully before trusting this website.</small
>

small タグにスタイルを適用する

<head>タグの中に次のコードを追加することで、タグにいくつかのスタイリングを適用します。

<style>
  small {
    font-size: smaller;
    color: red;
  }
</style>

端のコメント用に small タグを追加する

次のコードを<body>タグの中にコピーして貼り付けることで、タグを使って横コメントを追加します。

<p>
  This is just some text, but here is a <small>side comment</small> about this
  text:
</p>

index.htmlファイルに変更を保存し、ウェブブラウザで開きます。タグに対して行った変更が表示されるはずです。

まとめ

この実験では、HTML のタグを使ってテキストのサイズを変更する方法と、それにスタイルを適用する方法を学びました。また、法的文言、横コメント、細かい印刷物など、タグを使うさまざまな方法についても学びました。これで、タグを使ってテキストに強調を加え、際立たせることができるようになりました。

HTML の細かい印刷物