このページについて
このページではHTMLで使えるspanの使い方を解説しています。
spanタグ
spanは何も中身のない、空の要素をドキュメント内に定義する機能を持っています。似たような機能を持つタグとしてdivタグが存在しますが、divはブロック要素といって前後に改行が入ります。このspanはインライン要素といって、前後に改行が入りません。そのため文章の途中でも使うことができます。
spanタグの書き方
spanはdivタグと基本的には扱いは同じです。ただしこちらはインライン要素である点を活かした方を紹介します。
インライン要素は文章の途中でも使用可能なので、こんな書き方も可能です。
<p>テキストの<span>途中でも問題なく使用</span>できます。</p>この場合はなにも変化はありません。見た目が変化するわけでもなく、スクリーンリーダに対して何かを伝えるわけでもありません。このspanが真価を発揮するのはCSSやJavaScriptによる操作があってこそです。
一般的によく使用されるstyleタグを用いてCSSをインラインで付与することもできます。最近は外部CSSと言って同じサーバー内の別のCSSファイルを参照して、レイアウト等を適用するのが一般的です。今回は文字の色を変えるシンプルなやつを紹介します。
<p>テキストの<span style="color:blue">色を変えるspan</span>の使い方</p>こんな感じでプロパティ等を直接書き込みます。するとこうなります。
テキストの色を変えるspanの使い方
一部だけテキストの色が変わったと思います。他にも文字の上に線を引いたりテキストの背景を変えたりできます。こんな感じで便利なspanもといstyleタグですが、CSSの知識が必要だったりします。
2つ目はJavaScriptで動的に操作するための目印として使用する方法。通常、id属性とかname属性とかで目印を元から設定してJavaScriptで操作するのが一般的ですが、動的に後から何かを追加するとかいう場合にspanが便利だったりします。これはdivタグも同じことが言えますけどね。
spanのいいとこを活かした操作の例を挙げると以下のようなものになります。
<p>ボタンクリックで<span id="span">この部分の</span>テキストを変更します。</p>
<button onclick="tc()">テキストを操作する</button>
<button onclick="tr()">もとに戻す</button>
<script>
function tc() {
document.getElementById('span').setAttribute('style', 'color:red;');
}
function tr() {
document.getElementById('span').removeAttribute('style');
}
</script>こんな感じのものを用意しました。1つ目の関数tc()は「クリック時にspanにstyle属性を付与するというものです。色は赤にしました。2つ目の関数tr()は「クリック時にspanのstyle属性を解除する」というものです。
これによりテキスト操作のボタンをクリック後にはspanは以下のようになります。
<span style="color:red;"></span>そして解除後はstyle属性が丸ごと消えるので、元の形に戻ります。ブラウザで実際にやってみると以下のようになります。
ボタンクリックでこの部分のテキストを変更します。
これが基本的なDOM操作になります。
まとめ
spanはインライン要素のセクションを定義する機能を持っていて、divタグとは違って文章の途中でも使用可能です。style属性、CSS、JavaScriptなどで動的に操作することができるので、色々と試してみると面白そうですね。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。