Web制作

【HTML / インライン要素】spanタグとは？使い方を基礎から徹底解説

posted : 2019.11.11 updated : 2023.03.28

こんにちは。サイバーブリッジweb担当の久保田です。

前回、ブロック要素のdivタグについて解説した際にちょこっと登場したインライン要素のspanタグについて解説します！

spanタグとは？

spanタグとは、divタグ同様<span>単体では意味を持ちません。が、divタグがブロック要素なのに対し、spanタグはインライン要素となり、行の一部（インライン）として扱われる要素です。

使い方の例として、<p>タグで囲ったテキストの一部の色を変えたい時など、CSSでスタイルを指定する時に使います。

試しにfont-sizeを30pxにし、文字を太くしてみましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello World !</title>
	<link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
	<p>spanタグは<span>インライン要素</span>です。</p>
    </body>
</html>

@charset "UTF-8";

span {
	font-size: 30px;
	font-weight: bold;
}

また、span要素はid・class属性を使用できるので、同要素内で複数使用する際にはid・class属性を用いて区別します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello World !</title>
	<link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
	<p>spanタグは<span class="red">イン</span><span class="yellow">ラ</span><span class="green">イン</span>要素です。</p>
    </body>
</html>

@charset "UTF-8";
span {
	font-size: 30px;
	font-weight: bold;
}
.red {
	color: red;
}
.yellow {
	color: yellow;
}
.green {
	color: green;
}

インライン要素の特徴

インライン要素の大きな特徴としては、タグを並べると横に並んでいくということです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello World !</title>
	<link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
	<div class="blockitem">これはdivタグなのでブロック要素です。</div>
		
	<span class="spanitem">これはspanタグなのでインライン要素です。</span>
	<span class="spanitem">これはspanタグなのでインライン要素です。</span>
	<span class="spanitem">これはspanタグなのでインライン要素です。</span>
    </body>
</html>

@charset "UTF-8";

.blockitem {
	background-color: crimson;
}
.spanitem {
	background-color: #dfdfdf;
}

そしてもうひとつの特徴として、marginは左右だけにしか効かず、paddingは効くけど上下にクセがある。ということです。
余白に関してのインライン要素は、ブロック要素と違って少し扱いにくいです。

試しにcssでmarginを50pxで指定してみます。

@charset "UTF-8";

.blockitem {
	background-color: crimson;
}
.spanitem {
	background-color: #dfdfdf;
	margin: 50px;
}

では、paddingを上下10px、左右100pxで指定してみます。

@charset "UTF-8";

.blockitem {
	background-color: crimson;
}
.spanitem {
	background-color: #dfdfdf;
	margin: 50px;
	padding: 10px 100px;
}

これはひどい！！！
上下の要素に被ってしまいました。笑

「… ってことは、marginを調節して被らないようにすればいいんじゃないの？」って思いますが先ほど説明した通り、インライン要素は上下のmarginが効かないのです。

また、インライン要素はwidthとheightが指定できません。
先ほどのコードにwidthを100%、heightを100pxで指定してみます。

@charset "UTF-8";

.blockitem {
	background-color: crimson;
}
.spanitem {
	background-color: #dfdfdf;
	margin: 50px;
	padding: 10px 100px;
	width: 100%;
	height: 100px;
}

変化ありませんね。

ブロック要素とインライン要素はCSSで変換可能！

実はブロック要素とインライン要素はCSSで変換することができるのです。

つまり、「ブロック要素をインライン要素に」「インライン要素をブロック要素に」変換できるということです。

CSSにはdisplayというプロパティがあり、ブロック要素ならblock、インライン要素ならinlineと値を指定すれば変換できます！

では、先ほどのcssに記述してみましょう。

@charset "UTF-8";

.blockitem {
	background-color: crimson;
	display: inline;
}
.spanitem {
	background-color: #dfdfdf;
	margin: 50px;
	padding: 10px 100px;
	width: 100%;
	height: 100px;
	display: block;
}

「ブロック要素をインライン要素に」「インライン要素をブロック要素に」上手く変換できました！

inlineとinline-blockの違い

先ほどdisplay:inline;と指定しましたが、似たような値で「inline-block」というものがあります。

inlineは要素が平べったく横に並んでいきますが、inline-blockはblockとinlineの中間で横に並びつつ中身をblock的な扱いで余白ができます。

まとめ

インライン要素の特徴は…

横に並んでいく。
marginは左右だけにしか効かず、paddingは効くけど上下にクセがある。
widthとheightの指定ができない。

ブロック要素とインライン要素、それぞれ特徴があるので上手く使い分けて楽しくコーディングしていきましょう♪

この記事を書いた人

その他記事はこちら

久保田里佳子

Web事業部マネージャー / デザイナー

1992年生まれ。2児の母。入社後、営業を経て独学でhtml/css・Webデザイン・マーケティングを学び、現在はWeb関連全般に携わっています。趣味はお酒・ゲーム・漫画・アニメとかなりのインドアですが、たまにゴルフもやります。特技は超高速クッキング(見た目より味重視)。全てのお客様が笑顔になる仕事を心がけてます。

その他記事はこちら