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

CSS, HTML, HTML5 / CSS3HTML&CSS入門, spanタグ, インライン要素, 初心者

こんにちは。サイバーブリッジ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;
}
font-sizeを30pxにし、文字を太くしました。

また、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;
}
class属性を用いてspanにスタイルをあてました。

インライン要素の特徴

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

<!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;
}
HTMLでは<span>タグを改行して記述しましたが横に並びました。

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

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

@charset "UTF-8";
.blockitem {
	background-color: crimson;
}
.spanitem {
	background-color: #dfdfdf;
	margin: 50px;
}
上下左右にmarginを50pxで指定してみましたが、左右にしか効いていません。

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

@charset "UTF-8";
.blockitem {
	background-color: crimson;
}
.spanitem {
	background-color: #dfdfdf;
	margin: 50px;
	padding: 10px 100px;
}
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;
}
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の指定ができない。

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

Posted by リク