<>

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

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

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

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

段落とは?

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

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

注意

wordpressの テキストエディタでは <p> ~ </p> のコードは表示されませんのでご注意を‼

ビジュアル画面でブロックを表示させて確認してみます。
ビジュアルエディタ画面 ブロックを表示させて段落の使い方を解説

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

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

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

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

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

パソコンの改行(Enter)キーで文章を作成していくと、文章が 別のブロックになってしまうのです!!
例えばこんな感じに…↓
ブロックを使って説明 間違った段落

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

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

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

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

Wikipedia – HyperText_Markup_Language  より抜粋

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

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

改行を使った 間違った余白の付け方
この方法を使うと テキストエディタ画面では  &nbsp; と表示されます。

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

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

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

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

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

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

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

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


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

合わせて読んで頂きたい!!

そのほか、記事の作成での時間短縮できる方法を知っていると とっても便利です!
知っておきたい!!記事作成の時間短縮できる機能

記事投稿CSS&HTML

Posted by 45