SEOに関する実験やデータ分析などを公開します

SEOの疑問を実験で解明しブログ配信【SEOラボ】

spanタグとは~htmlでの使い方についてまとめ

2017/03/29 2018/03/15

htmlを構築するためには様々なタグを使用します。
そして、たいていのタグは段落や見出しなどの意味を持ちますが、インライン要素である「span」というタグは囲んだ範囲をcssで調整したりといったデザインの際立たせなどを行うためのもので、ブロック要素である「div」と併行して使用頻度の高いタグのひとつです。

では今回は、spanタグについて特徴や使い方などをご説明したいと思います。

spanタグとは~3分でわかるhtmlでのチョッとした使い方

spanタグとは

spanタグとは汎用的なhtmlタグで、囲んだ要素を強調するなどのデザイン微調整によく利用されるタグです。

具体的には個別にテキストのフォント調整、文字色・背景色の変更を施すのによく利用します。
特徴としては、インライン要素のため、そのまま利用すると幅や位置の調整に多少制限があります。

spanタグの使い方

先ほどもご説明した通り、spanタグはインライン要素というだけあって、使用するにあたって少し特徴があります。
この特徴をよく知った上でhtmlに無駄のないすっきりとした記述を目指しましょう。

htmlのspanタグとdivタグの使い分け

まず、htmlのspanタグとdivタグの使い分けで悩むかと思われますが、これを正しく知るにはインライン要素とブロック要素を理解することが大切です。

spanタグは、divタグのような使い方をしますが、インライン要素のため、幅や位置、余白などの指定に多少制限があります。
そのため、spanタグはテキストの装飾を中心とした使い方が多くみられます。

一方、divタグはブロック要素のため、幅や位置、余白などの指定が柔軟にできます。
主にdivタグの段落の中にpタグでテキストを記述して、部分的にspanで装飾をするといった使い方をします。

また、spanタグのようなインライン要素を、divタグのようブロック要素として扱うには、以下のようにcssで「display:block;」を指定する方法があります。

htmlマークアップ例
css記述例

class属性

主に、cssなどの外部ファイルと連携するために指定する属性です。
cssの記述では、「要素名.クラス名 {プロパティ名:値;}」という書式です。
※要素名は省略できます。

css記述例

id属性

こちらもclassと同じくcssを適応させるために指定する属性ですが、idは数種類用意していても1ページにつきそれぞれ1回の使用となる点がclass属性とは異なります。

例えば#sampleというidがあったとします。これを1ページ内に複数使用しないということです。
その中に入るclassは同じ要素名であったとしても複数使用しても問題ありません。

ただ、そうしなければ表示されないわけではなく、あらゆるコンテンツをグルーピングするといった意味を持つと言うとわかりやすいかもしれません。
ページ内リンクで指定するidがページ内に複数あれば困ってしまいますよね?そういった意味でも正しく記述しておくと良いでしょう。

また、cssの記述は「要素名#id名 {プロパティ名:値;}」という書き方で「#」がidを意味します。
※要素名は省略できます。

htmlマークアップ例
css記述例

style属性

html上で直接cssを適用する際に使う属性です。

htmlマークアップ例

文字色・背景色を指定

「color」プロパティに値を入れて、文字色が指定できます。
「background-color」プロパティに値を入れて、背景色が指定できます。

css記述例

右寄せにする

spanタグがインライン要素のためこのままでは、「右寄せ」を指定しても無効となります。
spanタグにcssを適用し、「display」プロパティにblock値を入れて、ブロック要素に切り替えることで「右寄せ」が有効になります。

css記述例

横幅を指定する

spanタグは“インライン要素”のため、デフォルトでは「width」を指定しても無効となります。
横幅を指定したい場合は、cssで「display」プロパティにblock値を記述してブロック要素に変更します。

このようにspanはインライン特有の表現があるため、ブロック要素にすることで、「width」が有効になります。

css記述例

文字サイズを指定する

「font-size」プロパティに値を入れて、フォント(文字)サイズが指定できます。
フォントサイズはpx、em、%などの単位で指定します。

css記述例

marginを指定する

spanタグのmarginは左右の指定のみが有効となります。
上下のmargin指定を有効にするには、spanタグにcssを適用し、「display」プロパティにblock値を入れて、ブロック要素に切り替えます。
ブロック要素にすることで、上下のmargin(余白)指定も有効になります。

css記述例

spanの入れ子について

spanタグに入れていいのはインライン要素のみとなり、主にspanタグやaタグが入ります。
そしてspanの中にspan、そしてさらにその中にspanといった入れ子で使用しても問題ありません。

spanタグの中にブロック要素であるdivタグやhタグなどは入れることはできません。
pタグはブロック要素なため、spanタグの中に入れてもページを表示してみると外に出てしまいます。
インライン要素とブロック要素を使い分けで正しく記述しましょう。

htmlマークアップ例

spanタグの縦並びと横並びについて

spanタグはインライン要素のため、spanタグで括られた内容を続けて記述しても横並びに表示されてしまいます。
これを縦並びにさせるには、spanの「display」プロパティにblock値を入れて、以下のようブロック要素に切り替える必要があります。

css記述例

まとめ

ということで今回はspanタグについて使い方などをご説明しましたが、インライン要素とブロック要素を理解して、htmlがdivやspanだらけにならないように記述すると後々管理も楽になるかと思われます。

divとspanを要領よく使用して、なるべくすっきりとしたhtmlを目指しましょう。

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

カテゴリから記事を探す

SEO対策無料ご提案はこちら