HTML|spanの使い方【初心者必見!基本から応用までを解説】 | WEBCAMP NAVI
【5月の受講枠も残りわずか】

HTML|spanの使い方【初心者必見!基本から応用までを解説】

「spanタグってどういう時に使うの?」
「HTMLってタグが多すぎてわからない!」
そんな風に感じていませんか?

HTMLのタグは、種類が多く、性質も似ているため、使い方に悩んでいる方は多くいます。

HTMLには似た性質を持つタグが他にもいくつかあり、spanタグは使い方の混乱しやすいタグの一つです。
そんなspanタグを上手く使いこなすことで、初心者の方でも見やすく、綺麗なサイトを作ることができます!

ここではspanタグの基本から、インライン要素であるspanタグを改行する方法までをわかりやすく説明します。
HTMLとCSSのサンプルコードと図を用いて、丁寧に解説していきます。

spanタグを使いこなして、綺麗なサイトを作りましょう!

HTMLのspanタグが持つ役割とは?

spanタグは、囲んだ要素だけデザインを変更する時に使うタグです。

spanタグを使うことで、読み込んでいるスタイルシート上で、色やフォントを他の部分とは別に変更することができます。

例えばHTML上でspanタグで指定した要素は、個別に色やフォントをCSSのスタイルシートで変更ができます。
つまり、HTML上でspanタグはCSSなどのスタイルシートで変更する箇所を示しており、このタグ自体は意味を持っていません。

実際に使っているところをみてみましょう。

spanタグ

コードは以下のようになっています。

sample.html
<!DOCTYPE html>
<html>
<head>
    <title>spanタグの使い方</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
	<div>
		ここが<span class="change">spanで指定しているところ</span>です
	</div>
</body>
</html>
sample.css
div{
	width:500px;
	height:100px;
	background-color:#337079;
	color: white;
}
.change{
	color:#cab64a;
}

このようにspanタグで囲った部分だけ変更することが可能になります。
HTML上で指定するだけでは意味はなく、その部分をCSSなどのスタイルシートで変更することで表示内容が変わります。

ポイント
spanタグはスタイルシートで変更する箇所を示しており、意味を持たない。


HTML・CSS」をマスターして、ホームページWEBアプリを作成できるよう になりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】なら
✔受講生の97%が未経験者!
スキマ時間で効率よくスキルアップしたい方におすすめ!
基礎から確実に身に付く充実のカリキュラム!

経済産業省認定の圧倒的カリキュラム
受講内容の詳細はこちら

似ている要素 div, pとの違いとは?

spanタグと使い方が似ているdivタグ<div>pタグ<p>について解説します。
divタグとpタグのspanタグとの使い方がわからず、つまずくプログラミング初心者が多いです。

この3つの違いは、そもそもの要素の種類が違うことです。

HTMLの要素にはブロック要素・インライン要素・インラインブロック要素の3種類があります。
これらは、width/heightの指定ができるかどうかや並び方が異なります。

要素の違い 比較表

ブロック要素とインライン要素の違い

ブロック要素

・高さや幅の指定ができる
・余白の指定ができる
・横いっぱいに広がる=要素が縦並び

インライン要素

・高さや幅の指定ができない
・余白の指定は左右のみできる
要素は横に並んでいく

もっと詳しく知りたい方は「CSS display」の記事を読んでみてください。
以下の記事では、ブロック要素、インライン要素、インラインブロック要素について詳しく解説しています。

CSSのdisplayをマスター!【要素理解がカギになる】

span/div/pの違いは図のように、この要素の違いにあります。

簡単に違いがわかったところで、spanタグ/divタグ/pタグの違いを確認していきましょう!

ブロック要素のdivタグとpタグ

まず、ブロック要素とは名前の通り、1つの塊を表す要素です。

例えば、文章そのもの全体や図、表などです。
ブロック要素はコンテンツを一つにまとめる働きを持っており、幅や余白の変更ができます。

divタグ<div>はブロック要素で、このタグに囲まれた部分は一つのまとまりとなり、divタグ自体は意味を持ちません。
pタグ<p>もブロック要素であり、文章に段落をつけるタグで、文章のまとまりを作っています。

どちらのタグも、まとまり全体に対しての効果を指定することになります。

インライン要素のspanタグ

他の要素とまとまりとして区切るブロック要素とは反対にインライン要素とは、ある一部を指定して効果を表す要素です。

例えば、文章の中の一文字や一文のような、一部分を示すことができるタグのことです。

spanタグがこのインライン要素に該当します。
インライン要素のため、spanタグでは指定した部分だけを変更することができ、ブロック要素のようにまとまりを作ることはありません。
これさえ覚えておけば混乱することはないでしょう。

spanタグの基本的な使い方を知る

spanタグの基本的な使い方は2ステップだけです。

  1. デザインの変更をしたいところを、HTML上でspanタグで囲む。
  2. CSS(スタイルシート)でspanタグに対して指定をする。

例をみながら、確認していきましょう!

次の例は456の部分をspanタグを使ってCSSで色、フォント、サイズの変更しているものです。

STEP.1
HTML上で変更したいところを、spanタグで囲む
sample.html
<!DOCTYPE html>
<html>
<head>
    <title>spanタグの使い方</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
	<div>
    123<span>456</span>789
    </div>
</body>
</html>
STEP.2
CSSでspanタグに対して指定をする
sample.css
span {
  color: #FF6928;
  font-family:'ヒラギノ明朝 ProN';
  font-size: 23px;
}
finish
実際に表示される画面がこちらです


このようにHTMLでspanタグで指定した部分だけに、CSSで色、フォント、サイズ、背景色が指定できます
spanタグを使うことで重要な部分を目立たせたり、見やすいサイトになります。


HTML・CSS」をもっと詳しく学習したい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔受講生の97%が未経験からのスタート!
手厚いサポート付きで質問し放題!
✔未経験者のために開発された独自のカリキュラムを用意!

経済産業省認定の圧倒的カリキュラム
受講内容の詳細はこちら

spanタグの応用を理解する

spanタグは基本、左寄せで改行をされずに表示されます。
理由は、spanタグがインライン要素であることです。

ここでは、spanタグを自由自在に使える様にするための4つの応用を説明します。

  1. 改行する
  2. 右寄せにする
  3. 横幅を指定する
  4. marginを指定する

以下のHTMLに対して指定していきます。

sample.html
<!DOCTYPE html>
<html>
<head>
    <title>spanタグの使い方</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
	<div>
    123<span>456</span>789
    </div>
</body>
</html>

何もしなければこの様な数字が並んでいる画面になります。

spanタグ

❶改行する

spanタグで囲んだ部分は基本改行されずに一列に並んだままです。

しかし、以下のコードのようにdisplay: block;を使うことで、spanタグで囲われた部分が改行されます。

sample.css
span {
  display: block;
}

spanタグ

これは、先ほど学習したインライン要素とブロック要素が関係しています。

display: block;と指定することで、インライン要素をブロック要素にすることができます。
これによって、ブロック要素になったspanタグで囲んだ部分が改行されました。

❷右寄せにする

spanタグはインライン要素のため、改行と同じ様にブロック要素に変更しなければ右寄せにすることはできません。
そのため、ブロック要素にするための指定と、右寄せの指定の両方を行う必要があります。

右寄せにしていることがわかる様に、親要素のdivに対して横幅の設定をしています。

sample.css
div{
	width: 530px;
	height: 100px;
}
span {
  display: block;
  text-align: right;
}

spanタグ

❸横幅を指定する

spanタグはインライン要素のため、横幅指定=width指定をしても効果がありません。
そのため、ブロック要素に指定してから横幅の指定を行います。

今回はわかりやすい様に、背景色を変更しています。

sample.css
span {
  display: block;
  width: 180px;
  background-color: yellow;
}

spanタグ

marginを指定する

spanタグのままでは、左右に対してのmarginしか指定することができません。
上下に対しても指定を行うためには、ブロック要素に変更する必要があります。

今回はわかりやすい様に、背景色を変更しています。

sample.css
span {
  display: block;
  margin: 10px;
  width:160px;
  background-color: yellow;
}

spanタグ

まとめ

HTMLにはブロック要素とインライン要素があり、この2つの要素を理解することでHTMLとCSSを使ったサイト作りが簡単になります。

spanタグを使いこなして、見やすくわかりやすいサイトを作りましょう!