HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのspanタグを使ってインライン要素のスタイルを設定する方法

HTMLで特定のテキスト部分にスタイルを適用したいときに活躍するのがタグです。spanタグは、インライン要素をグループ化し、その範囲に対して色やフォントなどのスタイルをまとめて指定するために使われます。

spanタグの基本的な役割

spanタグはそれ単独では画面上に何も変化をもたらさない汎用的なインラインコンテナです。しかし、style属性やclass属性と組み合わせることで、段落全体ではなく「文章のごく一部分」だけをピンポイントで装飾できるのが大きな特徴です。

似た用途のdivタグがブロックレベル要素であるのに対し、spanタグはインライン要素であるため、テキストの流れを崩すことなく途中に挿入できる点が異なります。

spanタグの使用例

次のコードでは、

タグの中にタグを配置し、文章の一部だけに色を指定しています。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <title>HTML span Tag</title>
   </head>
   <body>
      <p>Java is a Programming language widely followed. <span style = "color:#FF0000;">
          Developed by James Gosling. </span>This is demo text.</p>
      <p>
          <span style = "color:#8866ff;">
             Current Version: 1.8 </span> </p>
   </body>
</html>

実行結果のポイント

このコードをブラウザで表示すると、最初の段落では「Developed by James Gosling.」の部分が赤色（#FF0000）で表示され、2つ目の段落では「Current Version: 1.8」が紫色（#8866ff）で表示されます。このように、spanタグで囲んだ範囲だけに個別のスタイルを適用できることが確認できます。

CSSを外部ファイルに分離する場合は、spanタグにclass名を付けておくと、複数箇所で同じスタイルを再利用でき、コードの保守性も向上します。

  1. HTMLのdatalistタグの使い方！入力候補リストを作成する方法

    datalistタグとは？HTMLの<datalist>タグは、<input>要素に対して選択肢（候補リスト）を定義するためのタグです。テキストフィールドにユーザーが入力を始めると、あらかじめ用意された候補がドロップダウン形式で表示されるため、入力の手間を減らし、入力ミスを防ぐことができます。<datalist>タグを使用する際のポイントは以下の2点です。・<input>要素側にlist属性を指定し、その値と<datalist>要素のid属性を一致させる・選択肢は<datalist>〜</datalist>の中

  2. HTMLで改行タグを正しく使う方法：<br>、<br/>、<br />の違いと使い分け

    HTMLにおけるbrタグの基本HTMLで改行を挿入する際に使用されるのが<br>タグです。このタグは「空要素（empty element）」と呼ばれ、終了タグを必要としません。そのため、単に<br>と記述するだけで正常に機能します。一方で、<br/>や<br />といった書き方を目にしたことがある方も多いでしょう。それぞれの違いと正しい使い方を見ていきましょう。HTMLとXHTMLでの正しい書き方HTMLの場合標準的なHTML文書では、<br>タグを使用するのが正しい方法です。スラッシュなしのシンプルな形式で問題ありません。XHTML