スポンサーリンク
ブロックエディターでレイアウト
HTMLとCSSのちがい
プログラミング言語のHTMLとCSSは、Webページを構成する要素。
HTMLがコンテンツの構造を作るのに対し、CSSはコンテンツのデザインやレイアウトを指定。
HTMLの<br>や<p>タグを連続して文書のレイアウトにデザインを加えるのは、HTML本来の役割ではありません。
その代わりに文書の見た目をレイアウトする役割を担うCSSを使います。
段落と改行の使い分け
WordPressのブロックエディターは2種類。
直感的に操作できる「ビジュアルエディター」。
HTMLを直接打ち込む「コードエディター」。
投稿の編集画面の右上、オプションから選択可能。
ビジュアルエディターは書いた文章のデザインもすぐ確認できて便利。
改行したいときに用いるのがShift+Enterです。
Enter 段落(ブロック)を追加する
Shift+Enter 改行する
<p>タグと<br>タグの意味
<p>タグとはPragraphの意味。
<p>と</p>で囲んだ範囲のテキストを段落として指定。
<br>はBreakを意味し、改行するときに使用します。
Enter <p>テキスト</p>
Shift+Enter テキスト<br>
空白行の作り方
空白行を使うときの注意と対策
以前は というコードを<p>タグに挟んで空白行を表していました。
今はCSSを使って余白をデザインする方が自然であるとされています。
文章を読みやすくするために、改行や段落を使って空白行を作る方法は便利。
しかし、<br>タグや<p>タグを続けて打ち込むのは、HTMLコードを書くうえで推奨されていません。
連続しての使いすぎには注意が必要です。
スペーサーブロックでデザインする

<br>タグや<p>タグの連続を避けて空白行を作りデザイン性を高めるには、スペーサーというブロックが便利。
ブロック追加からスペーサー選ぶと、設定から自由に空白の高さを指定可能。
段落や画像の余白をレイアウトするときにも便利なブロックです。
スポンサーリンク