改行と 段落Pの違い Webサイトで文章を正しく表示する方法【記事作成の基本】

Webサイトで 文章を書くためのルール その１. 段落ｐ

記事作成では様々な <要素> によってブロック分けされており
このブロックには何が書かれているのか。どのような意味を持っているのかなど
プログラミング言語を正しく使用する必要があります。

記事を作成するにあたって　まず初めに知っておきたい <要素> 段落の使いかたについてまとめてみました。

段落とは？

段落 ＝ p 要素  ｐは パラグラフ の P・略してピー とも言います。

プログラミング言語では ひとつの文章を 一つのブロックでまとめる必要があり
<p> ~ </p> のコードで囲んだ文章が 一つの段落となります。

ビジュアル画面でブロックを表示させて確認してみます。

ビジュアルエディタ画面の左上のBOXに 現在の要素が表示されており ここから 見出しなど指定したい項目を選択します。

その４つほど右に ブロックを表示させるボタンがあり ブロック分けされているのが分かるようになっています。

うっすらとした点線と小さな文字ですが、一つの文章のブロックであることが分かります。

間違い その１ " Enter " を使った改行

ビジュアル画面で 記事作成をした場合ですが、文章の区切りを付けるのに 改行を使っていないでしょうか？

パソコンの改行（Enter）キーで文章を作成していくと、文章が 別のブロックになってしまうのです!!
例えばこんな感じに…↓

お分かりいただけますか？
私たち日本人が読んだ場合、ブロック分けされていなくても 文章として読むことはできますが、
インターネット上では、何を伝えたい文章なのかが 分からなくなってしまうのです。

HTMLについて かんたんに解説
HyperText Markup Language （ ハイパーテキスト マークアップ ランゲージ ）
を略して HTML と呼ばれることが多い。

ハイパーテキストは 複数の文書を相互に関連付け、結びつけるという意味で
マークアップランゲージは その文章構造などを記述するための形式言語

マークアップ言語を用いることで 見出し・段落 など ここに何が書かれているかを認識させる。

Wikipedia – HyperText_Markup_Language  より抜粋

間違い その２. 余白の使いかた

次に、文章と文章の間を もう少し空けたいなぁ、なんて時。改行キーを連打して、余白を作っていませんか？

この方法を使うと テキストエディタ画面では  &nbsp; と表示されます。

この方法は 間違った表示方法で 余白はできますが 余計なコードが
必要以上に入っているということは 検索エンジン的にも お勧めできません。ので
文章の行間・余白を正しく設定し、無駄な改行を減らすことが大切です。

これらの設定は CSSを使ったカスタマイズで 外観カスタマイズから簡単に設定できるものもあります。

CSSを使ってコードを記述する場合は 段落Ｐブロック内の行間は line-height
ブロックとブロックの境目の余白は margin で設定することができます。

ビジュアルエディタ と テキストエディタ

ビジュアルエディタ画面で 改行キーを押したものを テキストエディタで見てみると
一段スペースが 空けられたような状態になっています。

反対に、テキストエディタ画面で記事作成した場合は 改行キーを押しても
スペースが空けられることなく 一段だけ下がるので 同じブロックのままになります。

テキストエディタを使用する方が ラクな場合もありますが、
ビジュアルエディタの方が 本番画面のイメージを確認しながら作成できるので
初めは ビジュアルエディタが ラクだと思います。

ビジュアル画面で作成する場合の改行のしかたは
Shift キーを 押しながら Enter キーを押すことで 同じブロックのまま改行することができます。

---

以上、改行と 段落Pの違い Webサイトで文章を正しく表示する方法 でした！