blog

コーディングの初心者の悩み ~span、div、pの違いとは?~

htmlコーディングを始めるにあたって似たように意味をもつものがでてきますよね。今回は、「【span】と【div】【p】の違いが分からない」「どのように使ったらいい?」というご相談がありましたのでまとめてみたいと思います。

まずspanとdiv、p要素の語源を調べてみると以下のようになります。

【span】
汎用インライン要素で、文章やその他の要素を装飾したいときに使用します。また、文章の一部として扱われ段落内で使用することができます。ただし、前後に改行が入りません。spanタグはdivタグを囲めないが、divタグの中に入れられます。

【div】
汎用ブロック要素で、ページ内のブロックを作るときに使用します。また、一つの塊として扱われ段落内で使用することができません。前後に改行を入れることができます。divタグはspanタグやpタグを囲めるが、spanタグやpタグの中に入れられません。

【p】
ブロック要素で、ページ内で段落を作るときに使用します。また、一つの塊として扱われ段落内で使用することができません。段落を指定することができます。pタグはdivタグを囲めないが、divタグの中に入れられます。

このように、それぞれ似ているようで違う性質を持っていることが分かります。
まとめると「【span】は文中でスタイルを変更したいとき」「【div】はオリジナルのスタイルを適用させたいとき」「【p】は段落をしていしたいとき」となります。

サイトをどのように構成したいかを考えて使い分ける必要があります。ちなみに、【div】には様々な要素を入れることができますが、【span】にはspan、a、imgなど限られたものしか入れることができませんので注意するようにしましょう。ただし、どちらも複数回使用しても構いませんがシンプルなコーディングを目指し、できる限り使用する回数を減らすことが大切です。

個人的にコーディングは経験した数だけ成長していくことができるスキルだと考えています。「コーディングを始めたい」「web制作をしたい」と考えている方はweb制作の本を最低3冊はこなすことをお勧めします。また、デモサイトで構いませんので実際にサイトを作ってみると自分の弱い部分が浮き彫りになり、更に成長することができます。そして、html、cssをクリアすることができればJSやJQueryなどを用いてよりデザイン性や実用性が高いクオリティの高いサイト作りをしていきましょう。

 

 

福岡のホームページ制作・各種デザイン・店舗工事|株式会社プラナート
https://planart.co.jp/