HOME内部対策 > SPANタグとは~3分でわかるHTMLでのチョッとした使い方

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

2017/03/29内部対策[最終更新日]:2017/03/30
このエントリーをはてなブックマークに追加

SPANタグで囲んだ範囲を調整し、デザインの際立たせなどHTML修正しながら、サイト構築する方法があります。

今回は、SPANタグの属性、HTMLのSPANタグのclass属性について、HTMLのSPANタグのid属性について中心に解説したいと思います。

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

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

PR

SPANタグとは

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

SPANタグは、個別にテキストのフォント調整、文字色・背景色の変更を施すのによく利用します。

SPANタグは、インライン要素のため、そのまま利用すると幅や位置の調整に多少制限があります。

SPANタグの属性

SPANタグの主な属性として、「class属性」「id属性」「style属性」があり、以下のように記述します。

class属性

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

HTMLマークアップ例:
ホームページの順位を上げるために<span class=”seotext”>SEO対策が重要</span>です。
CSS記述例:
span.seotext {
color:#FF0000;
font-weight:bold;
}

id属性

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

HTMLマークアップ例:
ホームページの順位を上げるために<span id=”seotext”>SEO対策が重要</span>です。
CSS記述例:
span#seotext {
color:#FF0000;
font-weight:bold;
}

style属性

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

HTMLマークアップ例:
ホームページの順位を上げるために<span style=”color:#FF0000; font-weight:bold;”>SEO対策が重要</span>です。

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

HTMLのSPANタグとDIVタグの使い分け

HTMLのSPANタグとDIVタグの使い分けるには、インライン要素とブロック要素を理解することが大切です。

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

一方、DIVタグはブロック要素のため、幅や位置、余白などの指定が柔軟にできます。

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

HTMLマークアップ例:
<span>ホームページの順位を上げるためにSEO対策が重要です。</span>
CSS記述例:
span {
display:block;
}

SPANタグにCSSを適用する

SPANタグにCSSを適用するには、主に以下のようなパターンがあります。

SPANタグ内の文字色・背景色を指定

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

HTMLマークアップ例:
ホームページの順位を上げるために<span>SEO対策が重要</span>です。
CSS記述例:
span {
color:#FFF;/*文字色を白*/
background-color:#000;/*背景色を黒*/
}

HTMLのSPANタグで右寄せにする

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

HTMLマークアップ例:
<span>ホームページの順位を上げるためにSEO対策が重要!</span>
CSS記述例:
span {
display:block;
text-align:right;/*右寄せ*/
}

もしくは、floatプロパティにright値を入れて、右寄せする方法もあります。
この場合、レイアウトが崩れるので、次の要素clearプロパティを適用し、回り込み回避をします。

HTMLマークアップ例:
<span>ホームページの順位を上げるためにSEO対策が重要!</span>

<p style=”clear:right;”>SEOとは、Search Engine Optimization の略で「検索エンジン最適化」を意味します。</p>
CSS記述例:
span {
float:right;
}

HTMLのSPANタグで「width」指定する

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

HTMLマークアップ例:
<span>ホームページの順位を上げるためにSEO対策が重要です。</span>
CSS記述例:
span {
display:block;
width:100px;
}

HTMLのSPANタグで文字サイズを指定する

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

HTMLマークアップ例:
ホームページの順位を上げるために<span>SEO対策が重要</span>です。
CSS記述例:
span {
font-size:16px;
}

HTMLのSPANタグで「margin」を指定する

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

HTMLマークアップ例:
<span>ホームページの順位を上げるためにSEO対策が重要です。</span>
CSS記述例:
span {
display:block;
margin:50px 30px 50px;/*上 左右 下*/
}

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

SPANタグの入れ子について

SPANタグに入れていいのはインライン要素のみになり、主にspanタグを入れ子にします。
※参考:【HTML】 もう悩まない!タグの入れ子ルールまとめ

SPANタグの中にブロック要素である「divタグ」や「hタグ(見出しタグ)」などは入れ子にできません。

Pタグはインライン要素ですが、<span>タグの入れ子にされてるケースはあまり目にしません。
一般的には、<span>タグの中に<span>タグを利用した入れ子が多くみられます。

HTMLマークアップ例:
<span>ホームページの順位を上げるために<span>SEO対策が重要</span>です。</span>

SPANタグの改行について

SPANタグはインライン要素のため、DIVタグのように改行されません。

SPANタグで改行させるには、SPANタグにCSSを適用し、「display」プロパティにblock値を入れて、以下のようブロック要素に切り替える必要があります。

HTMLマークアップ例:
<p>ホームページの順位を上げるために<span>SEO対策が重要</span>です。</p>
CSS記述例:
span {
display:block;
}
ブラウザでの表示例:
ホームページの順位を上げるために
SEO対策が重要
です。

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

まとめ

SPANタグでうまく調整し、ユーザービリティを高めましょう。

コンテンツの質を上げ、サイトの価値を高めながら、SEO対策で上位化を目指すことが重要です。

あなたのサイトの順位は大丈夫ですか?順位・コンテンツ・リンク調べ、必要な対策をご案内します(無料)⇒

PR
あなたのサイトの順位は大丈夫ですか?順位、リンク、内部を調べ、必要な対策をアドバイスします(無料)
期間限定!今だけ両方プレゼント!「Googleが嫌うリンク3つ教えます」と【順位が上がらない方へ】SEO内部レポートプレゼント
上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
会社名/組織名 *
(例)株式会社○○○
ご担当者様名 *
電話番号 *
メールアドレス *

※個人情報の管理は、「プライバシーポリシー」に同意の上お申し込みください

このエントリーをはてなブックマークに追加
最新記事
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
新着実験
人気実験BEST10
カテゴリー
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
このブログが役に立つと思ったら、ぜひ『いいね!』して下さい。
follow us in feedly