Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

HTML <div>と<span>と<p>

More than 1 year has passed since last update.

サイト模写中は「divとspanはpは項目とかをまとめられる役割なんだなあー」とざっくりにしか理解していなかったので、少しずつきちんとわかった事をまとめていこうと思います。

<div>タグ

division(分割・段)の略で、<div>~</div>で囲った部分をブロック要素としてグループ化する。前後に改行が入る
<div>タグ自身は特に意味を持たない。

<span>タグ

短時間・全範囲の意味。<span>~</span>で囲った部分をインライン要素としてグループ化する。前後に改行が入らない
<span>タグ自身は特に意味を持たない。

<p>タグ

paragraph(段落)の頭文字で、<p>~</p>でページ内で段落を作る

実際に書いてみる

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>divとspanとp</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
<body>
  <div class="container01">
    <p>最初の文です。</p><p>2番目の文です。</p>
  </div>
  <div class="container02">
    <p>最初の文です。</p><p><span>2番目</span>の文です。</p>
  </div>
</body>  
</html>
styles.css
body {
    margin: 0;
}

div {
    margin: 10px;
    width: 400px;
}
.container01 {
    background: lightcoral;
}
.container02 {
    background: #80f0ab;
}
p {
    margin: 0;
    padding: 0 0 0 10px;
    font-size: 20px;
    line-height: 35px;
    text-align: left;
}
span {
    color: #5797e0;
}

20191107_Qiita02.png

<div>タグで囲むと1つのグループになって、こんな感じで背景とか変えられる。
<p>タグで囲んだところは、<br>タグを使っていないのに改行されている。
<span>タグで囲んだところは、改行されないからこんな感じで文字の色を変えられる。

a-takano
転職してコーダーやったり、ちょっと営業ぽいことやったり、ECサイトの勉強したり。 HTML/CSS/Javascript/WordPress 最近はコーディングをしていないのでいろいろ忘れている・・・
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away