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

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

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

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記述例

上位表示させるための基本的対策をご紹介しています。

関連記事

【SEOとは?】SEO対策で上位表示する方法について

検索順位に悩んでいませんか?狙ったキーワードで上位表示させるためには基本的な対策に加え、検索意図に合致したコンテンツが必要となります。これらは…

続きを見る

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が正しく施されているかどうかを無料で調査し、問題点や改善点などのアドバイスを致します。

\ 効果的な改善方法を明確にしませんか? / サイト調査を依頼する

カテゴリから記事を探す

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