HTML/CSS

【HTML】divとspanタグの違いを簡単に解説します

divタグとspanタグって何がどう違うの?誰か教えて。

こういった疑問に答えます。

 

こんにちは、リバティエンジニアのFUNA(フナ)です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

 

この記事はこんな方におすすめ

  • HTMLの<div>タグと<span>タグって何が違うのか知りたい
  • HTMLで<div>タグと<span>タグはどう使い分ければいいのか知りたい

 

今回は、HTMLの<div>タグと<span>タグの意味やそれぞれの違い、使い分け方を解説します。

初心者の方でも分かるように、サンプルコードもあるので参考にしてください。

 

 

HTMLにおける<div>と<span>タグの意味は?

まずはこの2つのタグの意味についてみていきましょう。

 

これらはどちらもHTMLの「タグ」と呼ばれるものです。

 

それぞれ<div>〜</div>や、<span>〜</span>というような書き方をします。

どちらも基本的には、その要素のデザインを変えたいときなどに使います。

 

基本的に「タグ」は下記のような様々な働きを持っています。

  • <p>タグ: 段落
  • <h1>タグ: 大見出し
  • <ul><li>タグ: 箇条書き
  • <a>タグ: 別ページなどへのリンク

 

ですが<span>と<div>タグは、上記のタグなどと違い、このタグ単体では特に何も役割はありません。

つまり、何もしないただの要素なのです。

 

<div>タグと<span>タグの役割

例えば、下のサンプルコードのように複数のタグを<div>タグではさみ、2つに分けてみます。

 

<div class="example1">
    <p>こんにちは</p>
    <p>これは例文です</p>
</div>
<div class="example2">
    <p>こんばんは</p>
    <p>これも例文です</p>
</div>

 

それぞれの<div>タグのclass名を”example1”、”example2”としました。

 

このように<div>タグで2つに分けて、ブラウザに表示したとしても変化はありません。

 

ですが、このHTMLにCSSを使ってデザインの見た目を変えてみます。

ここで<div>タグごとにデザインを変えることができるのです。

 

実際にサンプルコードを見てみましょう。

 

.example1 {
    /* 幅を40pxに */
    width: 40px;
    /* 高さを200pxに */
    height: 200px;
    /* 背景色をオレンジに */
    background: orange;
}

.example2 {
    /* 幅を10pxに */
    width: 10px;
    /* 高さを500pxに */
    height: 500px;
    /* 背景色を青色に */
    background: blue;
}

 

このように先ほどのHTMLにCSSでデザインを変えると、<div>でくくったクラスごとにデザインすることができます。

 

ポイント

<div>タグを使いこなすことで、細かく繊細にデザインして見やすくすることができるので、積極的に使ってみてください!

 

【HTML】divとspanタグの違いとは

では、<div>タグと<span>タグの違いは何なのでしょうか。

先程は<div>タグでサンプルコードを記述しましたが、下記のように<div>を<span>に変えても結果は同じになります。

 

<span class="example1">
    <p>こんにちは</p>
    <p>これは例文です</p>
</span>
<span class="example2">
    <p>こんばんは</p>
    <p>ここも例文です</p>
</span>

 

少しだけ難しく解説すると、「2つタグの違いはdisplayというCSSのプロパティの値の違い」なのです。

 

<div>タグは「display: block」となっているのに対し、<span>タブは「display: inline」となっています。

 

この「display」プロパティが違うことで、<div>タグと<span>タグでは様々な違いがでてきます。

逆に言ってしまうと、<div>タグに対して”display:inline”を指定すれば、<span>タグと同じ働きをさせることができます。

 

【divとspanの違い】幅と高さを指定できるかどうか

<div>タグはCSSで幅(width)と高さ(height)の指定ができます。

ですが、<span>タグは幅と高さを指定しても反映されません。

 

【divとspanの違い】前後に改行が入るかどうか

<span>タグでは前後に改行が入ることはありません。

ですが、<div>タグではそのまとまりの前後に改行が入ります。

 

【divとspanの違い】spanは文字の装飾などに最適!

前後に改行の入らない<span>タグでは文章の一部分だけ文字色を変えたり、その文字に下線を引いたりしたいときに便利です。


実際に使ってみてみましょう!

<p>HTMLで<span class="blueText">spanタグについて</span>学んでみよう!</p>
/* blueTextというクラス名に対して */
.bluetext {
    /* 色を青色 */
    color: blue;
    /* 太字 */
    font-weight: bold;
}

 

このように"class"や"id"と合わせて上手に使えば、自分が変更したい好きな部分の装飾だけを変えることができます。

 

divやspanは何回でも使ってもいいの?

どちらのタグも複数回、何度使用しても問題ありません。

 

「<div>タグの中の<div>タグの中の<div>タグ…」というのも全然OKになります。

 

ですが、<div>タグは複雑なレイアウトやデザインのものを作るときに、つい多用してしまいがちになります。

コードの見やすさを管理のしやすさを保つために、なるべく使う数を減らしたほうがよいかもしれません。

 

【HTML】<div>と<span>タグのまとめ

今回はHTMLにおける<div>タグと<span>タグについて、初心者の方でもわかりやすいようにサンプルコードを使って解説しました。

 

そもそも<div>タグと<span>タグとはなにか?使い方は?違いは?

このようなよくある質問や疑問点を解説しています。

 

<div>タグと<span>タグは、ウェブデザインをするうえで避けることができない重要なタグです。

今回勉強した内容を少しでも、なんとなくでも頭の片隅に入れておくことをおすすめします!

>> ~はじめてのCSS~ プロパティについて

 

関連記事

【CSS】たった1行のコピペで簡単!object fitで画像をトリミングする方法

CSSで画像をトリミングしたい時にたったの1行で実装できる方法を解説します。「object-fit」についてどのような時に使うのか、その使い方や応用の仕方を覚えてみてください。

【コピペOK】CSSでcounterを利用して自動ナンバリングする方法

今回はCSSの「counter」をコピペでも簡単に実装できる方法・ソースコードをご紹介します。このcounterを利用することで、CSSだけで自動でナンバリングを実装することができます。意外と知られていないのですが、「1 2 3 4」の基本のものや「第1章 第2章 第3章 第4章」と書き出しをつけたりすることができて、幅広く応用できます。

【コピペOK】CSSだけで背景を斜めに区切る方法【レスポンシブ対応】

今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。

【コピペでOK】HTMLで直接ファイルをダウンロードできるように設定する方法

今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。

CSSアニメーションを簡単に実装!コピペOKのサンプルコード付き【HTML/CSS】

CSSのみで実装することのできるアニメーションの方法を解説します。サンプルコード付きでわかりやすく、コピペでも簡単に実装できるようになっていますので、実際に動かして試してみてください。


最近の投稿

Copyright© FUNA BLOG , 2021 All Rights Reserved.