WordPressサイトのカスタマイズに必要！基礎からわかるHTML解説

2020年12月4日 2020年12月4日

WordPressでサイトを作るためにはHTMLやCSSについてはほとんどか知らなくても可能です。可能なんですが、レイアウト調整など、カスタマイズしたくなると多少の知識は必要になります。

そこでこのページでは、WordPressでのサイト作成やカスタマイズに必応な最低限度のHTMLの知識についてまとめています。

HTMLとは

HTMLとは、「Hyper Text Markup Language」の略で、タグと呼ばれる特殊な言語を用いてWebサイト内の文章に印をつけて、その文章の意味（見出しなのか、段落なのかなど）を、コンピューターに教えてあげるための言語だと思ってください。

タグにはさまざまな種類があり、それによって示す役割が違っています。

例えば「p」タグは、「段落」を意味するタグであり、「h」タグは「見出し」を意味するタグです。< >で囲んで使用します。

HTMLタグの使い方

例えば「段落」を意味する「p」タグの使い方ですが、以下のように使います。

<p>サンプルテキスト</p>

「見出し」を意味する「h」タグも同様に使います。

<h2>サンプル見出し</h2>

基本的にタグを使用するときは、<p>(開始タグ)と</p>(閉じタグ)で囲んであげる形です。多少例外もあります。

見出しタグの使い方

見出しタグは、<h1>から<h6>までありますが、数字が大きいほど文字が大きく表示され、重要度が高いことを意味します。これは、訪問者に伝える視覚的な意味もありますが、コンピューターにそのページの構造を伝える役割も果たしています。決して装飾用ではありません。

<h1>タグはページに1つがよいとされていますので、タイトルなどに使うとよいでしょう。

また、見出しタグは使う順番があります。言葉ではうまく説明できませんので、下の例を見てください。

<h1>ページタイトル</h1>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>

<h2>中見出し</h2>
<h3>小見出し</h3>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<h3>小見出し</h3>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>

<h2>中見出し</h2>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<h3>小見出し</h3>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<h4>小見出し</h4>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<h4>小見出し</h4>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>

上の例のように、小さい番号の見出しを後に使うのが原則です。２つの見出しが並列の関係の場合は、並べても構いません。

箇条書きタグの使い方

例えば以下の例のような箇条書きの書き方を見てみましょう。

箇条書き１
箇条書き２
箇条書き３
箇条書き４
箇条書き５

この箇条書きリストのコードは以下のようになります。

<ul>
	<li>箇条書き１</li>
	<li>箇条書き２</li>
	<li>箇条書き３</li>
	<li>箇条書き４</li>
	<li>箇条書き５</li>
</ul>

liタグは同様に増やしたり減らしたりできます。また、ulタグをolタグに変更すると、箇条書きの先頭に番号が挿入されます。

よく使うタグ一覧

h1~h6	見出しを意味する。
p	段落を意味する。
br	改行を意味する。※閉じタグは必要ない。
img	画像を意味する。src属性で画像を指定する。※閉じタグは必要ない。
a	リンクを意味する。href属性でリンク先を指定する。
small	著作権の表示や法的表記を意味する。
blockquote	引用文であることを意味する。
span	意味のないインライン要素。CSSで部分的に装飾したい時などに利用。
ul	番号をつけない箇条書きリスト
ol	番号をつける箇条書きリスト
li	ulやolタグの中の各項目
header	ページ上部のロゴやページタイトル、ナビゲーションを示す。
nav	メインのナビゲーションを意味する。
main	メインコンテンツを意味する。
footer	ページ下部のコピーライトなどを意味する。
div	意味のないブロック要素。グループ分けなどに利用する。