スライドショー

HTMLのspanタグとは?基本的な使い方についてわかりやすく解説

HTMLのspanタグの意味がよくわからない
spanタグの使い方がわからない

皆さんこんにちは!HTMLタグのレイアウト要素の違いを理解してspanタグをきちんと使えていますか?思うようなレイアウトにならないということが多発していませんか?

今日はspanタグを理解すると題して、spanタグの基本やdivタグやpタグとの違い、inline要素とblock要素とは何かということを解説していきます。

多くの人がハマりがちな内容について詳しく見ていきますので、HTMLを勉強中の方は是非参考にしていただければ幸いです!この記事では以下の内容について解説していきます。

  • spanタグとは
  • spanタグの使い方
  • divタグやpタグとの違いは?

HTMLのspanタグとは?

まずはじめにspanタグの使い方を見ていきましょう。

index.html

<!DOCTYPE html>
<html lang="jp" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>
            色を<span class="color">変更</span>します
        </div>
    </body>
</html>

style.css

body{
    background-color: #f00;
}
.color{
    color: #fff;
}

因みに見やすいように背景色を赤に変えています。

spanタグはこのよう色を変えたり、一部強調するときに使う事が多いですね。ではなぜそのように使うのでしょうか。それは、spanタグは要素のグループ化を行うタグだからです。

つまり、spanタグ自体には何の意味もなく、後でCSSをかけるためにグループ化するための要素なんですね。ただそう聞くと、divタグと同じではないかと思う方も多いと思います。

しかしdivとspanには大きな違いがあります。それは要素の持つレイアウトです。具体的にはdivはblockの要素を持っていて、spanはinlineの要素を持っています。詳しく見ていきましょう。

block要素とは

block要素とはinline要素よりも大きな塊として扱われ、文書を構成する基本となるものといえます。また、要素の後に改行が入ることからイメージとしては縦の塊としても捉えることができます。

inline要素とは

inline要素とはblock要素の中身として扱われることが多く、また改行などを挟まないことからイメージとしては横の塊として捉えることができます。

divタグやpタグとの違いは?

さて、block要素とinline要素の違いを実際にdivタグやpタグと比べていきましょう。先にも挙げたように大切なのは、divタグやpタグはblock要素を持っており、spanはinline要素を持っているということです。

<!DOCTYPE html>
<html lang="jp" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>
            <p>文章1</p>
            <p>文章2</p>
            <span>スパン1</span>
            <span>スパン2</span>
        </div>
    </body>
</html>

あまりこういう使い方は正しくありませんが、このように見ればタグの持つレイアウト要素の違いが一目瞭然ですね。pタグは改行されていて、spanタグはされていません。それはspanタグがinline要素、つまり横のレイアウトを持っているからですね。

このinline要素でグループ化するという特性があるからこそ、一部文字の強調に使われたり、色を変えるのに使われたりできるわけです。block要素でグループ化すれば改行されてしまいますからね。

index.html

<!DOCTYPE html>
<html lang="jp" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>
            <p>文章文章<span class="color">文章</span>文章文章</p>
        </div>
    </body>
</html>

style.css

body{
    background-color: #f00;
}
.color{
    color: #fff;
}

また、block要素の中で使われるinline要素ということも忘れないようにしましょう。

tableのrowspan、colspanも見ておこう!

さて、spanタグと直接の関係はないのですがspanつながりとして、tableタグを扱うときにrowspancolspanの使い分けについて悩んでいる人も多いですね。簡単に説明すると、

  • rowspanは縦のセルの結合、colspanは横のセルの結合を表しています。
  • rowspan=""という形で何個分セルを結合するのかを表します。
  • 初期値は1で、ひとつ分のセルの結合となっています。
<!DOCTYPE html>
<html lang="jp" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <table border="1">
            <tr>
            <td>要素1</td>
            <td>要素2</td>
            <td>要素3</td>
            <td>要素4</td>
            </tr>
            <tr>
            <td>要素5</td>
            <td>要素6</td>
            <td>要素7</td>
            <td>要素8</td>
            </tr>
        </table>

    </body>
</html>

例えばこのようなテーブルがあったとしたら、

index.html

<!DOCTYPE html>
<html lang="jp" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <table border="1">
            <tr>
            <td colspan="3" class="col">要素1</td>
            <td>要素2</td>
            <td rowspan="2" class="row">要素3</td>
            <td>要素4</td>
            </tr>
            <tr>
            <td>要素5</td>
            <td>要素6</td>
            <td>要素7</td>
            <td>要素8</td>
            </tr>
        </table>

    </body>
</html>

style.css

body{
    background-color: #f00;
}
.col, .row{
    background-color: #fff;
}

違いが分かりやすいように、連結したセルは白くしています。

このように書いてやると、colspan=“3”で要素1が横に3つ結合、rowspan=“2”で要素3が縦に2つ結合されていますね。

まとめ

いかがでしたでしょうか。ただspanタグを使うだけでなく、inline要素やblock要素の違いを意識しながら使いこなせるようになったり、tableでセルを自在に操れるようになったりすることは大切ですので意識しながら使うようにしてみてください!

それでは!!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

かい

かい

日向徹かこよすぎか

[email protected]

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説