2020年1月27日こんにちは、Kosei(https://twitter.com/pompom_stk)です。HTMLを勉強し始めて当たる壁の一つとして、「p要素とdiv要素の違い、div要素とspan要素の違いがわからない」ということがあります。実際HTMLについて何も知らなかった僕も、これをきちんと理解するまでに時間がかかりました。今回は初心者向けにこの3つの要素の違いを解説していきます。この記事の要点まとめそれぞれの要素についてp要素p要素は段落を表す要素。div要素divタグで囲むと、各コンテンツをひとまとめにすることができる。span要素span要素は意味を持たない汎用的な範囲を指定できる。p要素とdiv要素の違い大きな違いは、p要素は段落を変えdiv要素は囲んだ部分をひとまとめにすること。div要素とspan要素の違いdiv要素は囲んだ部分をひとまとめにし、span要素は一部分にだけ指定する。中に入れることができる要素p要素、div要素、span要素の中に入れられる、入れられない要素を表で紹介。p要素、div要素、span要素は正しく使い分けようこれらを理解し、使用するべき場所で使うように心がけるようにする。それぞれの要素についてハリボーdiv要素とかspan要素ってよくわかんないんだよね。最初は理解するのに少し時間がかかるかもね。ヒナまずはp要素、div要素、span要素について簡単に解説していきます。p要素については、この記事よりも詳しく書いた記事を用意していますので、興味のある方は「初心者向け段落の作成方法【HTML】」の記事を読んでみてください。この記事ではclassやidといった属性が使用されていますが、これについてはまた別の記事にします。p要素p要素とは「paraguraph」の略で、段落を表す要素です。p要素を使って段落を作ると、タグで囲んだ部分の前後に余白ができます。p要素の中にはspan要素やimg要素など(フレージングコンテンツ)を入れることができますが、p要素やh1要素などを入れることはできません。これに関してはまた別の記事で解説していきます。CodePen.div要素div要素は「division」の略で、区分・部分といった意味を持っています。divタグで囲むと各コンテンツをひとまとめにすることがでる汎用的な要素です。divタグで囲まれた部分は、メインコンテンツを表す「main要素」、記事の意味を示す「article要素」などと異なり、特殊な意味を定義しません。囲んだ部分をCSSを使いデザインを変更するために使用されることが多いです。タグで囲まれた部分は改行されますが、前後に余白はできません。余白を付ける場合は自分で指定する必要があります。div要素の中にはほぼ全ての要素を入れることができます。div要素の中にdiv要素を入れることも可能です。下の例ではdivタグ間にテキストしか入っていませんが、基本的にこのような使い方はしません。このような場合は段落としてp要素を使用してください。CodePen.span要素span要素は、意味を持たない汎用的な範囲を指定できます。p要素やdiv要素のように、囲まれた部分で改行されることもなく、ただspanタグで囲むだけではデザイン上何も変化しません。文章中特定の場所だけに対して色を変えたいなどの場合、その場所をspanタグで囲み、CSSでデザインを変更するという使い方をします。span要素の中にはspan要素やimg要素などを入れることができますが、p要素やh1要素などを入れることはできません。CodePen.p要素とdiv要素の違いこれについては別の記事で解説するから、よくわからなかったらそっちも見てみてね。ヒナ3つの要素について簡単に解説位していきましたが、p要素とdiv要素はどちらも「一つのまとまりを作るもの」です。タグで囲むだけだと、前後に余白ができるくらいしか違いはありません。大きな違いとして、p要素は段落を変えるもの、div要素は囲んだ部分をひとまとめにするということです。要素の中にフレージングコンテンツしか入れられないp要素に対して、div要素はほぼ全ての要素を入れることができるという点です。divクラスを使用しないと実装できないことや、使わなくても実装できるけどdiv要素を使うことですっきりとしたコードにすることができることもあります。文字で書いてもよくわからないと思うので、3つの例で解説していきます。1.「3つの段落を全て中央寄せしたい」というときは、div要素の中にp要素を3つ入れます。div要素に対してCSSで「中央寄せ」を指定すれば、それだけで3つの段落は中央寄せにすることができます。div要素を使わなくても、p要素全てに「中央寄せ」を指定すれば同じことができます。2.次に「3つの段落の周りを枠線で囲みたい」というときはどのようにすればいいでしょうか。div要素の中に3つの段落を入れ、div要素に対してCSSで「枠線で囲む」を指定することで、実装できます。これをdiv要素を使用せずに実装しようとすると、p要素の中にテキストを記述し、段落分けしたい部分に対してbrタグを使い改行させます。p要素に対して「枠線で囲む」を指定すれば同じことができます。brタグで改行しているので、段落間の余白はありません。3.最後に「3つの段落を枠線で囲み、2つめの段落中にリストを作成しさらに枠線で囲みたい」という場合はどうでしょう。div要素の中に3つの段落を入れますが、全てp要素ではなくp・div・pの順番で入れていきます。次に2つめの段落(div)の中にリストを入れます。2つのdivに対し、枠線を指定することで実装できます。これをdiv要素を使わずに実装しようとすると、p要素の中にul要素(リストを作る要素)を入れる必要があります。p要素の中にul要素を入れることはできません。これを実装するにはdiv要素が絶対に必要ということになります。CodePen.ハリボーやばい意味わからん。div要素とspan要素の違いdiv要素とspan要素はどちらも、「意味を持たない汎用的な範囲」とされています。意味を持たないというのは、段落(P)や見出し(h1~6)、メインコンテンツ(main)といった意味を持たないということです。divの使い方と使うメリットは、前章の例でわかったかと思います。次はdiv要素とspan要素の違いについて解説していきます。div要素は前章で解説したように、「囲んだ部分をひとまとめにする」ことができます。それぞれのdiv要素に対してCSSでデザインを指定すれば、囲んだ部分に適応されます。span要素もこれと同じような役割を持っていますが、大きな違いは「一部分に対してだけ指定する」という点です。この記事では大事な部分にはこのように文字色を変えたり文字の太さを変えたりしています。これらをHTMLで表すには、まずテキストをpタグで囲み、デザインを変更したいテキストをspanタグで囲みます。spsnタグでテキストを囲んだだけでは何も変わりません。文字色やサイズを変更させるには、それぞれのspan要素に対してCSSでデザインを変更する必要があります。span要素はCSSでデザインを変更しなければ、見た目上何の変化もありません。対してdiv要素は何も指定しなくても改行されるという、見た目上の変化があります。これもdiv要素とspan要素の違いの一つと言えるでしょう。一つ、span要素はフレージングコンテンツと呼ばれ、p要素の中に入れることができます。div要素はフローコンテンツと呼ばれるもので、p要素の中に入れることはできません。フローコンテンツやフレージングコンテンツに関しては、ここではよくわからなくて大丈夫です。CodePen.中に入れることができる要素ここまでそれぞれの要素について、p要素とdiv要素の違い、div要素とspan要素の違いについて見てきました。その中で何度か「○○の中に○○は入る、入らない」という表現がありました。HTMLはタグの中に別のタグを入れることができます。何でも入れられるというわけではなく、決まりがあります。これについては長くなるのでまた別の記事で解説していきますが、今回紹介した要素の中に何が入れられて何が入れられないのかを表にして紹介します。pdivtableクリックで拡大p要素、div要素、span要素は正しく使い分けようp要素、div要素、span要素の違いについて理解できたでしょうか?これらは全て、「使用するべき場面」が存在します。理解し、使用するべき場所で使うように心がけましょう。div要素やspan要素を使用するには、同時にclass属性やid属性について理解する必要があります。そこまで難しいものではないですが、これらを使えるようになるだけでCSSでデザインを変更することが楽しくなります。最初は難しく感じるかもしれませんが、ゆっくりと使えるようになりましょう。...初心者向け段落の作成方法【HTML】ブログやWebサイトを作成する上で、段落は必須です。...初心者向けテーブル(表)の作成方法/【HTML】テーブルの作成方法を初心者向けに解説した記事です。...CSSでできることと組み込み方【初心者向け】CSSでできること、組み込み方を初心者向けに記述した記事です。...初心者向けリストの作成方法【HTML】HTMLでリストを作成する方法を、初心者向けにわかりやすく解説していきます。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。