pとspanとdivの違いや特徴:例文を見ながら理解しよう!!

HTML/CSS

今回は、HTMLでの記述のテキスト入力時によく使う要素であるpタグ、spanタグ、divタグについて、それぞれの使い方と特徴、そして違いについてを紹介していきます。

最後には、何が1番テキスト入力に向いているかをまとめていきます。

p要素

p要素はWordPressではテキスト入力の基本となっている段落ブロックです。

pタグで囲ったテキストは、そのテキストは一つのブロックとして表示されます。

また段落(改行の大きい版みたいなの)を作る意味合いを持ち、pタグでブロックを重ねていくだけで見栄えの良いレイアウトが完成します。

例文

このように段落が付きます。

テキストABC123これは例文です。

テキストABC123これは例文です。

テキストABC123これは例文です。

<p>テキストABC123これは例文です。</p>
<p>テキストABC123これは例文です。</p>
<p>テキストABC123これは例文です。</p>

span要素

span要素は、ブロック要素とは反対にインライン要素と言われるものです。

改行や段落は一切無く、テキストのみが表示されます。

要素の中にspan要素を入れる事が可能で、span要素にだけスタイルを付け強調テキストを作成と言ったことが出来ます。

例文

このようにテキストのみが表示されます。

テキストABC123これは例文です。 テキストABC123これは例文です。 テキストABC123これは例文です。
<span>テキストABC123これは例文です。</span>
<span>テキストABC123これは例文です。</span>
<span>テキストABC123これは例文です。</span>

p要素の中にspan要素を使い、赤い強調テキストを作る場合は下記のように記述します。

テキストABC123これは例文です。

<p>テキスト<span style=color:red;>ABC123</span>これは例文です。</p>

div要素

div要素は囲いブロックを作成し、グループ化の様な意味合いを持ちます。

テキスト入力にも使う事は可能だが、一般的には囲いブロックとして扱います。

div要素で囲った要素は一つのまとまったブロックとして扱われます。

また大きな特徴としてはdivや他の要素をマトリョーシカのように入れ子状態にする事が可能だという面です。

例文

このようにテキストブロックが作成されます。

テキストABC123これは例文です。
テキストABC123これは例文です。
テキストABC123これは例文です。

<div>テキストABC123これは例文です。</div>
<div>テキストABC123これは例文です。</div>
<div>テキストABC123これは例文です。</div>

divで囲った部分にスタイルを付ける事で下記のようなボックスっぽいデザインが可能です。

テキストABC123これは例文です。

<div style= "background:#f5f5f5;box-shadow:0 0 6px">
<p>テキストABC123これは例文です。</p>
</div>

テキスト作成に適したのは?

テキストを入力するのに適した要素は基本的にp要素かと思います。

p要素の段落の幅が気になる場合は、pタグ内で改行を行うか、CSSでp要素のmarginを低くするかで調整します。

span要素は先述した通り、強調テキストを作成する時に使い、divはそれらの要素を囲うために使っていきましょう。

最後にこれら全てを混ぜた例文を使ってみました。

pタグ、spanタグ、divタグを混ぜた例文

テキストABC123これは例文です。

divの中にp要素を入れてspan要素で強調テキストを入れています。

div要素で全体を囲いグループとして扱います。そのグループに枠線を付けてあげます。p要素で基本的な文章を作成し、span要素で強調したい部分に色を付けています。

HTMLの記述は下記です。

<div style= "border:solid 2px #ddd;margin:2em 0;padding:.5em 1em;box-shadow:0 0 6px #000">
<p>テキストABC123これは例文です。</p>
<p>divの中にp要素を入れてspan要素で<span style=color:red;>強調テキスト</span>を入れています。</p>
</div>

以上が「pとspanとdivの違いや特徴:例文を見ながら理解しよう!!」でした。

HTMLの基本部分ですが、初心者上級者問わず最も重要な部分かと思います。

これら3つの要素を上手に使い分けて素敵なレイアウトを作成しましょう!!

2020年3月27日HTML/CSSHTML,WEB

Posted by KT