HTMLスパン：初心者向けガイド

次のセクションでは、 がどのように行われるかを示すいくつかの例を見ていきます。 タグはHTMLで機能します。

タグ付けHTMLの例

を使用するコードの例をいくつか見ていきましょう。 HTMLのインライン要素のスタイルを設定するタグ。最初の例では、 を使用します 段落内のタグ。 2番目の例では、リストで使用します。

段落内のHTML

地元のパン屋であるPringleandSonsBakeryのWebページを設計しているとします。このウェブページでは、パン屋の歴史について概説します。パン屋のオーナーであるプリングル氏から、特定の重要な事実を赤いテキストで強調するように求められました。

このタスクを実行するには、次のコードを使用できます。

index.html

<p>Pringle and Sons Bakery is a staple of the Oakbridge, Indiana community. The Bakery, founded by James Pringle in 1975, serves <span class="redText">delicious baked goods</span> and coffee to the Oakbridge area. It has served <span class="redText">thousands</span> of customers since its foundation.</p>

styles.css

.redText {
color: red;
}

私たちのコードは次を返します：

この例では、「おいしい焼き菓子」と「数千」という用語を強調しました。プリングル氏は、これらの用語は重要であると語ったので、プログラムにそれらを赤で表示するように指示しました。

で囲まれたテキストの文字列を定義しました HTMLタグ。このテキストは、プリングルアンドサンズベーカリーの歴史の概要を説明しています。次に、赤で表示したい用語を で囲みました。 タグ。

CSSファイルでは、redTextクラスに割り当てられた要素の色を赤にするように指定しました。これにより、 を使用するときに、テキストの色を赤に変更できます。 タグ。

この場合、テキスト内の特定の単語のみを強調したいので、タグが役立ちます。

に赤いテキストスタイルを適用することもできます。 タグ自体。しかし、それは赤いテキストの段落全体をもたらすでしょう。

リスト内のHTML

Pringle and Sons Bakeryが、ソーシャルメディアページへのリンクを含むリストをWebサイトに追加するように依頼したとします。

ベーカリーは、チームがこれらのプラットフォームで最もアクティブであるため、TwitterおよびFacebookページへのリンクが特に重要であると述べました。したがって、彼らは私たちにそれらのリンクを水色のテキストで強調することを望んでいます。

このタスクを実行するには、次のコードを使用できます。

index.html

<ul>
	<li><span class="blue"><a href="twitter.com">Twitter</a></span></li>
	<li><span class="blue"><a href="facebook.com">Facebook</a></span></li>
	<li><a href="instagram.com">Instagram</a></li>
</ul>

styles.css

.blue {
	background: lightblue;
}

コードは次のようになります：

HTMLコードでは、

を使用して順序なしリストを作成しました。 鬼ごっこ。このリストには3つの項目があり、それぞれが
• に含まれています。 タグ。

  TwitterとFacebookのリスト項目は、HTML Spanタグ（と）で囲まれています。各リストアイテムの開始スパンタグは、クラス属性を指定します。クラス属性の値は「青」です。

  水色に適用される要素の背景色を変更する.blueというスタイルを定義しました。これにより、HTMLコードのCSSクラス.blueのすべてのリンクの背景色が水色に変わりました。

  Instagramリンクに関連付けられている背景色は、そのリンクのテキストを で囲んでいないため、変更されませんでした。 タグ。

  結論

  HTML タグは、HTMLページの特定の要素にスタイルを適用するために使用される汎用コンテナです。デフォルトでは、 タグは何もしませんが、CSSと組み合わせて使用​​して、要素にスタイルを適用できます。

  課題として、文中の単語をすべて大文字で表示するタグを定義します。 タグを使用してテキストを大文字に変換するには、CSSルールを使用する必要があります。

  このチュートリアルでは、例を使用して、HTMLの< span>の使用方法について説明しました。 コード内のタグ。これで、 の使用を開始する準備が整いました。 プロのWeb開発者のようにタグ付けしてください！

  HTMLの学習方法に関するガイダンスとサポートについては、HTMLの学習方法ガイド全体をお読みください。