今回は、HTMLでの記述のテキスト入力時によく使う要素であるpタグ、spanタグ、divタグについて、それぞれの使い方と特徴、そして違いについてを解説していきます。
最後には、何が1番テキスト入力に向いているかをまとめていきます。
p要素
p要素はWordPressではテキスト入力の基本となっている段落ブロックです。
pタグで囲ったテキストは、そのテキストは一つのブロックとして表示されます。
また段落（改行の大きい版みたいなの）を作る意味合いを持ち、pタグでブロックを重ねていくだけで見栄えの良いレイアウトが完成します。
例文
このように段落が付きます。
テキストＡＢＣ123これは例文です。
テキストＡＢＣ123これは例文です。
テキストＡＢＣ123これは例文です。
<p>テキストＡＢＣ123これは例文です。</p>
<p>テキストＡＢＣ123これは例文です。</p>
<p>テキストＡＢＣ123これは例文です。</p>span要素
span要素は、ブロック要素とは反対にインライン要素と言われるものです。
改行や段落は一切無く、テキストのみが表示されます。
要素の中にspan要素を入れる事が可能で、span要素にだけスタイルを付け強調テキストを作成と言ったことが出来ます。
例文
このようにテキストのみが表示されます。
<span>テキストＡＢＣ123これは例文です。</span>
<span>テキストＡＢＣ123これは例文です。</span>
<span>テキストＡＢＣ123これは例文です。</span>p要素の中にspan要素を使い、赤い強調テキストを作る場合は下記のように記述します。
テキストＡＢＣ123これは例文です。
<p>テキスト<span style=color:red;>ＡＢＣ123</span>これは例文です。</p>div要素
div要素は囲いブロックを作成し、グループ化の様な意味合いを持ちます。
テキスト入力にも使う事は可能だが、一般的には囲いブロックとして扱います。
div要素で囲った要素は一つのまとまったブロックとして扱われます。
また大きな特徴としてはdivや他の要素をマトリョーシカのように入れ子状態にする事が可能だという面です。
例文
このようにテキストブロックが作成されます。
<div>テキストＡＢＣ123これは例文です。</div>
<div>テキストＡＢＣ123これは例文です。</div>
<div>テキストＡＢＣ123これは例文です。</div>divで囲った部分にスタイルを付ける事で下記のようなボックスっぽいデザインが可能です。
テキストＡＢＣ123これは例文です。
<div style= "background:#f5f5f5;box-shadow:0 0 6px">
<p>テキストＡＢＣ123これは例文です。</p>
</div>テキスト作成に適したのは？
テキストを入力するのに適した要素は基本的にp要素かと思います。
p要素の段落の幅が気になる場合は、pタグ内で改行を行うか、CSSでp要素のmarginを低くするかで調整します。
span要素は先述した通り、強調テキストを作成する時に使い、divはそれらの要素を囲うために使っていきましょう。
最後にこれら全てを混ぜた例文を使ってみました。
pタグ、spanタグ、divタグを混ぜた例文
テキストＡＢＣ123これは例文です。
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>テキストＡＢＣ123これは例文です。</p>
<p>divの中にp要素を入れてspan要素で<span style=color:red;>強調テキスト</span>を入れています。</p>
</div>以上が「spanタグとpタグとdivタグの違いを解説【例文あり】」でした。
HTMLの基本部分ですが、初心者上級者問わず最も重要な部分かと思います。
これら3つの要素を上手に使い分けて素敵なレイアウトを作成しましょう！！
