HTML/CSS

[HTML] divとspanタグの違いは?誰にでもわかりやすく解説

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

今回はHTMLの<div>タグと<span>タグの意味やそれぞれの違い、使い分け方をまとめていきましょう。

初心者の方でも分かるようにサンプルコードと一緒にみていきながら解説します。

HTMLでのdivとspanタグの意味は?

まずはこの2つのタグの意味についてです。

これらはどちらもHTMLの"タグ"と呼ばれるものです。
<div>〜</div>や、<span>〜</span>というような書き方をします。
両方とも基本的にはどこかのデザインを変えたいときなどによく使います。

IT博士
IT博士

このタグ自体には意味はありません。

意味がないものを書くのですか?

IT博士
IT博士

はい。単に意味がないだけではなく、他のタグと違いタグそのものはなにもしないということです。
ちょっとややこしいので他のタグと比べてみましょう!

<p>タグ :段落を表します。
<h1>タグ :大見出しを表します。
<ul>と<li>タグ :箇条書きを表します。
<div>タグ :何も表しません。
<span>タグ :何も表しません。

IT博士
IT博士

このようにタグ自体はなにも意味を持ちません。
では、いったいどんな役割があるのかを見ていきましょう!

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

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

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

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

それぞれのclass名を”example1”, ”example2”としました。

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

ですが、この文章をデザインで見た目を変えてみるとします。
その時にこの<div>タグごとにデザインを変えることが可能になります。

実際に見てみましょう。

.example1 {
  /* 幅を40pxに */
  width: 40px;

  /* 高さを200pxに */
  height: 200px;

  /* 背景色をオレンジに */
  background: orange;
  }

.example2 {
  /* 幅を10pxに */
  width: 10px;

  /* 高さを500pxに */
  height: 500px;

  /* 背景色を青色に */
  background: blue;
  }

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

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

divとspanタグの違い

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

少しだけ専門用語っぽくむずかしく解説すると、

”2つタグの違い” =”displayというCSSのプロパティの値の違い”

なのです。

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

この”display”プロパティが違うことで、<div>タグと<span>タグでは様々な違いがでてきます。逆に言ってしまうと、<div>タグに対して”display:inline”を指定すれば、<span>タグと同じ働きをさせることができます。

IT博士
IT博士

なかなか分かりづらい部分があると思うので、具体的に<div>タグと<span>タグでどのような違いがあるのかを解説します。

幅と高さを指定できるかどうか

<div>タグはCSSで幅(width)と高さ(height)の指定ができます。
ですが、<span>タグは幅と高さを指定しても反映されません。

前後に改行が入るかどうか

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

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>タグについて、初心者の方でもわかりやすいようにサンプルコードを使って解説しました。

そもそも<div>タグと<span>タグとはなにか?使い方は?違いは?
このようなよくある質問や疑問点を解説しています。

<div>タグと<span>タグは、ウェブデザインをするうえで避けることができない重要なタグです。今回勉強した内容を少しでも、なんとなくでも頭の片隅に入れておくことをおすすめします!

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


最近の投稿

レバテックキャリアは未経験でも転職できるのか?リアルな口コミで検証します

  こんにちは、リバティエンジニア[?]のFUNAです。 フリーランスの現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ ...

レバテックキャリアの悪い評判は本当なのか?利用者から聞く実態と噂の真偽

  こんにちは、リバティエンジニア[?]のFUNAです。 フリーランスの現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ ...

その会社は大丈夫?知っておきたいブラック企業の特徴

就職先がブラック企業ではないか不安… 転職を考えているけど、ブラックな会社だったらどうしよう… こういった悩みや不安を抱えている方も多くいると思います。 就職や転職をした際に「この会社、ブラックだった ...

【2020年最新保存版】副業と複業の違いやそれぞれの意味について徹底解説!

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今、話題になっている「テレワーク」という働き方を利用して「 ...

テレワークのセキュリティーについて、注意と対策方法とは!?

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 テレワークを始められる方にとって、気をつけなければいけない ...

Copyright© FUNA BLOG , 2020 All Rights Reserved.