BLOG

【初心者向け】WordPressにHTMLやCSSの知識は必要なのか?

2022.7.5

【初心者向け】WordPressにHTMLやCSSの知識は必要なのか?

WordPressはHTMLやCSSの知識がなくてもブログやホームページを作ることができるといわれています。

今回は本当にWordPressではHTMLやCSSの知識が必要ないかを説明したいと思います。

こんな人にオススメ

  • WordPressを始めたい初心者~中級者
  • WordPressを運用している初心者~中級者

HTMLやCSSの知識は必要かどうか

結論からいうと最低限の知識は必要です。

WordPressでは「Gutenberg(グーテンベルク)」というエディタがあり、直感的に文章や画像などを入れた記事を作ることができます。正直、この機能だけを使用してブログの記事を書いていけばHTMLとCSSの知識は必要ないかもしれません。

しかし、より自分好みのデザインに変更したり、コードをきちんと書いてSEO対策を施したりする場合にはどうしてもHTMLとCSSの最低限の知識は必要になります。

必要となるHTMLコードは「h1」や「h2」などの見出し、「p」の段落、「br」の改行、「ul」や「li」などのリスト、「dl」や「dt」「dd」を使用する定義リスト、「table」「tr」「th」「td」などを使用する表は覚えておくと便利です。

CSSもテキストの色の変え方や枠線の表示の仕方などを覚えているとブログのデザインの幅が広がります。

知っていると便利なHTML

ここからはWordPressを運用する場合、最低限知っていると便利なHTMLタグを紹介します。

見出し

「h1」から「h6」までのタグは見出しとして使用するタグになります。数字が小さいほど大きな見出しを意味します。

 html
<h1>ブログの記事のタイトル</h1>
<h2>記事の大見出し</h2>
<h3>記事の中見出し</h3>
<h4>記事の小見出し</h4>
<h5>h4よりさらに小さな見出し</h5>
<h6>h5よりさらに小さな見出し</h6>

見出しのサンプル

見出しサンプル

h1タグは基本的には1つの記事に1回しか使いません。h1タグはWordPressの場合はタイトルに使用されていますので使用するのはh2からとなります。

文字の大きさで判断せずに見出しの内容に沿って「h2」→「h3」→「h4」の順番に使用するようにしましょう。

段落

「p」タグは段落を表すタグです。

 html
<p>吾輩は猫である。名前はまだ無い。</p>
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

段落のサンプル

吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

pタグは段落を表すタグなので改行を目的に使用するのはやめましょう。

改行

「br」タグは改行をするために使用するタグです。

 html
親譲りの無鉄砲で小供の時から損ばかりしている。</br>
小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。

改行のサンプル

親譲りの無鉄砲で小供の時から損ばかりしている。
小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。

pタグを改行のために使用せずにbrタグを使用しましょう。

リスト

ulタグはリストを表示する際に使用するタグです。

 html
<ul>
	<li>吾輩は猫である</li>
	<li>坊つちやん</li>
	<li>三四郎</li>
	<li>それから</li>
	<li>こゝろ</li>
	<li>明暗</li>
</ul>

リストのサンプル

  • 吾輩は猫である
  • 坊つちやん
  • 三四郎
  • それから
  • こゝろ
  • 明暗

ulタグのほかにolタグを使用する場合もあります。ulタグは順序が関係なく、olタグは順序も関係したリストを作る際に使用します。

 html
<ol>
	<li>Sunday</li>
	<li>Monday</li>
	<li>Tuesday</li>
	<li>Wednesday</li>
	<li>Thursday</li>
	<li>Friday</li>
	<li>Saturday</li>
</ol>

リストのサンプル

  1. Sunday
  2. Monday
  3. Tuesday
  4. Wednesday
  5. Thursday
  6. Friday
  7. Saturday

定義

dlタグ、dtタグ、ddタグは定義リストを作る際に使用します。

 html
<dl>
	<dt>節約</dt>
		<dd>お金や物を必要以上にに使わないこと。</dd>
	<dt>ケチ</dt>
		<dd>お金や物を惜しんで出さないこと。</dd>
</dl>

定義リストのサンプル

節約
お金や物を必要以上にに使わないこと。
ケチ
お金や物を惜しんで出さないこと。

tableタグ、trタグ、thタグ、tdタグなどは表を作る際に使用します。表には他にも使用できるタグがありますが、最低限この4つのタグを覚えていれば大丈夫です。

 html
<table>
	<tr>
		<th></th>
		<th>Nintendo Switch</th>
		<th>Nintendo Switch Lite</th>
	</tr>
	<tr>
		<th>希望小売価格</th>
		<td>32,978円</td>
		<td>21,978円</td>
	</tr>
	<tr>
		<th>TVモード</th>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<th>テーブルモード</th>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<th>携帯モード</th>
		<td></td>
		<td></td>
	</tr>
</table>

表のサンプル

Nintendo SwitchNintendo Switch Lite
希望小売価格32,978円21,978円
TVモード
テーブルモード
携帯モード

知っていると便利なCSS

テキストの配置や色を変えたり、背景色を変えたり、枠線を表示したりなど簡単で使い勝手の良いCSSは覚えておいて損はありません。

今回はHTMLのソースに直接書くstyleタグで案内させていただきます。

テキストの配置を変える

テキストの配置を変えるのは「text-align」プロパティを使用します。

style="text-align: 配置位置;"

 html
<p style="text-align: left">テキストを左に配置</p>
<p style="text-align: center">テキストを中央に配置</p>
<p style="text-align: right">テキストを右に配置</p>

テキストを左に配置

テキストを中央に配置

テキストを右に配置

テキストの色を変える

テキストの色を変えるには「color」プロパティを使用します。

style="color: 色コード;"

 html
<p>虹の色は、<span style="color: red;">赤</span>・<span style="color: orange;">橙</span>・<span style="color: yellow;">黄</span>・<span style="color: green;">緑</span>・<span style="color: blue;">青</span>・<span style="color: indigo;">藍</span>・<span style="color: purple;">紫</span>の7色です。</p>

虹の色は、の7色です。

色はカラー名のほか、16進数などで指定することができます。

カラーコード16進数
white#ffffff
黄色yellow#ffff00
orange#ffa500
黄緑yellowgreen#9acd32
green#008000
水色lightblue#add8e6
purple#800080
pink#ffc0cb
red#ff0000
薄橙beige#f5f5dc
茶色brown#a52a2a
black#000000
blue#0000ff

背景色を変える

テキストの色を変えるには「background」プロパティを使用します。

style="background: 色コード;"

<table>
	<tr>
		<td style="background: red;">&</td>
		<td style="background: orange;">&nbsp;</td>
		<td style="background: yellow;">&nbsp;</td>
		<td style="background: green;">&nbsp;</td>
		<td style="background: blue;">&nbsp;</td>
		<td style="background: indigo;">&nbsp;</td>
		<td style="background: purple;">&nbsp;</td>
	</tr>
</table>
       

枠線を描く

枠線を描くには「border」プロパティを使用します。

style="border: 線の太さ 線の種類 色コード;"

<div style="text-align: center;">
	<p style="border: 1px solid gray">実線</p>
	<p style="border: 3px double gray">二重線</p>
	<p style="border: 1px dashed gray">破線</p>
	<p style="border: 1px dotted gray">点線</p>
</div>

実線

二重線

破線

点線

最後に

WordPressにはHTMLやCSSを利用しなくても使用するテーマによってはある程度のデザインを作ることもできます。

さらに自由なデザインや見た目を求めると最低限のHTMLとCSSが使えることが求められます。

覚えなければいけないHTMLやCSSは基本的なもので大丈夫でそれほど難しくありません。苦手意識を持たずに取り組んでいきましょう。

  • この記事を書いた人

COSSY

40代の会社員。妻と小学生と保育園児の2人の子どもの4人で生活しています。 副業としてブログなどで月10~15万円程を稼ぎ、これまでに累計400万円を稼いできました。 ブログでの副業の仕方、節約の仕方などを発信しています。

-BLOG