PR

【HTML】spanタグ:使い方と実践的な例を3分でわかりやすく解説

HTML

HTMLのspanタグは、テキストや他のインライン要素にスタイルを適用したり、特定の部分をグループ化するために使用されるタグです。

<span>テキストや要素</span>

spanタグは、divタグと同様それ単体では意味を持たないタグであり、HTMLのいろいろな要素やテキストをグループ化する役割を持ちます。

このページでは、spanタグの書き方・使い方をサンプルコード付きで解説していきます。

このページで学べる内容
  • spanタグとは?
  • spanタグの書き方・使い方
  • spanタグとdivタグの違いは?

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の1つです。是非最後までご覧ください。

スポンサーリンク

HTML:spanタグとは?

spanタグとはタグで囲った範囲を1つのまとまりとして定義するために利用されます。タグで囲われた範囲はグループとして扱うことができるため、CSSを適用してデザインを変更したい場合を中心に用いられます。

See the Pen HTML SPAN by ビズドットオンライン (@biz-online) on CodePen.

spanタグ・・・1つのまとまり(範囲)を定義する

spanタグ:構文ルール

  <!-- 基本構文 -->
<span>テキストや要素</span>

  <!-- CSSを使用してスタイルを適用する場合、class属性やstyle属性を追加: -->
<span class="my-style">テキストや要素</span>
<span style="color: red;">テキストや要素</span>

構文ルール自体は簡単です。HTMLの基本的なルールにのっとり、開始タグと終了タグでグループ化したいテキストや要素を囲みます。

spanタグを理解する上で重要なポイントがclass属性とstyle属性です。

参考:HTMLタグの属性

spanタグ:style属性

spanタグのstyle属性とclass属性は、どちらもスタイリングに関連する属性です。

使い方と目的の違いに注意しながら両者の使い分けを学習しましょう。

style属性
  • style属性は、インラインスタイルとしてCSSを直接HTML要素に適用するために使用される。
  • style属性内にCSSプロパティと値を記述し、その要素に直接スタイルを適用する。
<span style="color: red;">このテキストは赤くなります。</span>

spanタグのstyle属性を用いることのメリット・デメリットは以下の通りです。

メリット
  • 要素に対して簡単にスタイルを適用できる
  • すぐにスタイルの変更が反映されるのでデバッグや試行錯誤が容易で
デメリット
  • インラインスタイルはHTMLファイルが大きくなる傾向があるので保守性や可読性が低下する
  • 同じスタイルを複数の要素に適用する場合コードの重複が発生し効率が悪くなる

spanタグ:class属性

class属性
  • CSSクラスをHTML要素に適用するために使用される。
  • 外部CSSファイルやHTML内のstyleタグ内にスタイルを定義し、class属性を通じて適用する。
<!DOCTYPE html>
<html>
<head>
<style>
  .red-text {
    color: red;
  }
</style>
</head>
<body>

<span class="red-text">このテキストは赤くなります。</span>

</body>
</html>

spanタグのclass属性を用いることのメリット・デメリットは以下の通りです。

メリット
  • CSSとHTMLが分離されるため保守性や可読性が向上する
  • 複数の要素に同じスタイルを簡単に適用できるのでコードの再利用性が高まる
デメリット
  • スタイリングの変更を確認するためにCSSファイルやstyleタグを参照する必要があるためデバッグや試行錯誤がやや面倒

まとめると、style属性はCSSを直接HTML要素に適用する。一方class属性はCSSクラスを適用するために使用されるという点が相違点です。

spanタグ:サンプルコード

以下にspanタグにclass属性/style属性/title属性を併用したサンプルを記載します。

より実践的な使い方がイメージできるように1個1個丁寧に解説します。

See the Pen HTML SPAN&CSS by ビズドットオンライン (@biz-online) on CodePen.

<!DOCTYPE html>
<html>
<head>
<style>
  .large-text {
    font-size: 24px;
  }
</style>
</head>
<body>

<p>この<span class="large-text" style="color:blue;" title="大きい青いテキスト">テキストは大きくて青い</span>です。</p>

</body>
</html>
ポイント
  • 4~8行目
    HTML文書内にCSSスタイルを定義するための記述です。ここでは、.large-textというクラスを作成し、font-sizeプロパティを使って、そのクラスが適用された要素のフォントサイズを24pxに設定しています。
  • 12行目
    インライン要素で、特定のテキストに対してスタイルを適用するために使用されています。
    ここでは、class="large-text"を使って、先ほど定義した.large-textクラスを適用し、フォントサイズを大きくしています。また、style="color:blue;"を使って、インラインスタイルでテキストの色を青く設定しています。さらに、title="大きい青いテキスト"を使って、マウスオーバー時に表示されるツールチップのテキストを設定しています。

spanタグとdivタグの違い

spanタグと似たような働きをするタグに、divタグがあります。divタグも特定の部分をグループ化するために使用されるタグです。

divタグ

spanタグとdivタグの大きな違いはインライン要素なのか?ブロック要素なのか?という点です。

spanタグ vs divタグ
  • spanタグ→インライン要素
  • divタグ→ブロック要素

インライン要素であるspanタグを利用した例

See the Pen HTML インラインvsブロック by ビズドットオンライン (@biz-online) on CodePen.

ブロック要素であるdivタグを使用した例

See the Pen HTML ブロック要素 by ビズドットオンライン (@biz-online) on CodePen.

spanタグはインライン要素で、文中の特定のテキストや部分に対してスタイルや属性を適用するために使用されます。一方、divタグはブロックレベル要素で、セクションやコンテナを作成するために使用されます。

spanタグは改行せずにそのまま行の流れに沿って表示されますが、divタグはデフォルトで新しい行から始まるという点に注目です。

Webエンジニアになりたい方は→完全無料のHTMLロードマップ

Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の1つがHTMLです。

以下のページでは、そもそもHTMLって何?何のために学習するの?という疑問に回答しつつ、HTMLを学習するためのロードマップ(全20記事)を整理しています

以下のページの内容をマスターすればHTMLの基本はOK。Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。

このWebサイトは現役のエンジニアが以下3点を目的として運営しています。

  1. 勉強:一度理解した内容を忘れないように。
    → アウトプットは「最強のインプット」である! 
  2. 備忘:忘れたとしても後から見返せるように。
    → 未来の自分への「お手紙」を書いています。 
  3. 共有:〇〇ってこうだったんだ!の感動をシェアできるように。
    → あなたの知識は誰かにとっての「価値ある情報」です。 

副業ブログの始め方はこちらから

スポンサーリンク
HTMLWEBデザイン
シェアする
ビズドットオンラインをフォローする
タイトルとURLをコピーしました