【HTML Living Standard】span要素の使い方
span要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
spanオブジェクトは、HTMLドキュメント内でインライン要素として特定の意味を持たない、汎用的なコンテナを表すオブジェクトです。主にテキストの一部や他のインライン要素をグループ化するために使用されます。span自体は特別な視覚的表現やセマンティックな意味を持つものではありませんが、Cascading Style Sheets（CSS）とJavaScriptと組み合わせることでその真価を発揮します。
たとえば、段落内の特定の単語やフレーズをspan要素で囲むことで、CSSを使ってその部分だけに異なる色、フォントサイズ、背景色などのスタイルを適用したり、JavaScriptを使って特定のインタラクションやイベントハンドラを付与したりすることが可能になります。これにより、HTMLの構造的な意味付けを損なうことなく、きめ細やかなスタイリングや動的な操作を実現できます。
span要素は、ブロックレベル要素であるdiv要素のインライン版と考えることができます。div要素がページの主要なセクションや大きなブロックをグループ化するのに対し、span要素はテキストの流れを中断することなく、行の中の小さなまとまりを区分けする際に非常に役立ちます。CSSやJavaScriptを通じて、Webページの表現力やインタラクティブ性を高めるための強力なツールとして活用されます。
公式リファレンス: <span>: The Content Span element
構文(syntax)
1<span>任意のテキストや他のインライン要素</span>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません