スパン（HTML要素）

謙虚な<span></span>要素：スタイリングとスクリプティングのための汎用性の高いツール

しばしば見落とされがちで、

要素はHTMLアーセナルの驚くほど便利なツールです。 セマンティックな意味を持つ要素（<span></span>や <code><h1></h1> など）とは異なり、<p></p>は、テキストの部分をターゲットと操作するシンプルで一般的な方法を提供します。 それは本質的に視覚的なプレゼンテーションを変更するわけではありません。その力は、CSSとのスタイリングとJavaScriptとの相互作用のフックとして機能する能力にあります。 <span></span>開いて閉じたタグ内にテキストを包むことにより、CSSクラスまたはIDを使用してスタイルを整えることができるコンテナを作成します。これにより、ドキュメントの全体的な構造に影響を与えることなく、特定の単語やフレーズを正確に制御できます。 たとえば、著者は以下に示すように、

を使用してブランド名をスタイリングする場合があります。

<span></span><span></span>スパン要素でスタイルが描かれたブランド名

インライン要素として、

はテキストまたはその他のインライン要素のみを含める必要があります。一部のコンテンツ管理システムで一般的な間違いである

内でブロックレベルの要素を包むことは避けてください。

（「スパン炎」と呼ばれることが多い）の過剰使用は、

の過剰な使用と同じように避けるべきです。 強調のために<span></span>などのより意味的に適切な要素がより良い選択であるかどうかを検討してください。 たとえば、<span></span> <span></span> この場合、この場合、<div>は明らかに強調を伝えますが、CSSスタイリングのない<code><em></em>は機能的に意味がありません。

<code class="language-html">He said it was <em>really</em> important to know the difference.</code>

の例：

<em></em> <span></span>を使用したCSSスタイリング

CSSスタイリングに

を使用する方法： <span></span>

よくある質問（FAQ）<span></span>

<code class="language-css">.brandname { font-style: italic; color: #006; text-transform: uppercase; }</code>

<code class="language-html"><p>Various brands were present, including <em>Adobe</em>, <em>Microsoft</em>, <em>Apple</em>, and <em>Intel</em>.</p></code>

？

​​

• の目的は何ですか？インラインコンテナは、スタイリングまたはJavaScriptの操作のインライン要素をグループ化するために使用されます。 それは本質的に何かを表しているわけではなく、特定のアクションのターゲットを提供します。

  <span></span><span></span>

  ？
• は、ブロックレベルの要素であり、ラインブレークを作成します。

  はインラインで、同じ行に残っています。 <span></span>

  テキストを<span></span>？タグでラップし、クラスまたはIDを使用してCSSスタイルを適用してテキストをスタイリングするにはどうすればよいですか。

• 私は要素をネストすることができますか？<span></span> <span></span>

他の要素で
• を使用できますか？

  はい、他のインライン要素を使用しますが、ブロックレベルの要素ではありません。

• 他の要素と同様に、クラスやIDを含むCSSセレクターで標的にすることができます。

• javascriptで

  を使用できますか？はい、IDまたはクラスを割り当てることで、JavaScriptの操作のターゲットをターゲットにできます。 <span></span>

• ？

  インラインのみ（ブロックレベルの要素を含めることはできません）の制限は何ですか。 <span></span>

  ブラウザのサポート？
• は、すべての主要なブラウザで広くサポートされています。

  <span></span>ベストプラクティス？

  構造や意味ではなく、スタイリングのみを使用します。より良いコード組織と保守性のためにクラスまたはIDを使用してください。