今回は記事作成時に比較的よく使われる
htmlの基本的なタグを紹介します。

ここで紹介する基本的なタグさえ理解しておけば、
WordPressサイトの運営に関して言えば
それほど困ることはなくなります。
今回は、htmlに関する理論の説明は抜きで、
実際にどのように使用しているかを
紹介していきます。

※「font」と「center」タグは
HTML5.0から非推奨となりましたので、
CSSでの使用方法を紹介しています。
初心者の方は覚える必要はないので
「こんなようなタグがあるんだ」
くらいの認識で大丈夫です。

一通り目を通しておいてください。

html基本タグ：改行、br

※検索の時に「html　開業」と打ち間違えて
検索している方も多いようです^^;

↓改行のhtmlタグ (HTMLで書かれたページの場合)

<br>

↓改行のhtmlタグ (XHTMLで書かれたページの場合)

<br/>

どちらを使っても問題ありませんが、
WordPressの場合は<br/>を使用します。

html基本タグ：テーブル、table、表

↓テーブルの表示例

↓上記テーブルのコード

 
※テーブルを結合したい時は以下を使用

colspan=””：水平方向
rowspan=””：垂直方向
 

html基本タグ：リンク、link、a href

↓このサイトのトップページ
(https://affikatsu.com/)へのリンクです。

→ affikatsu.comのトップページ

↓上記リンク指定のコード

→affikatsu.comのトップページ

html基本タグ：リスト、ul、li、lo、箇条書き

↓箇条書きパターン「ul」

• パターンul
• パターンul-1
• パターンul-2
• パターンul-3

↓箇条書きパターン「ul」のコード

• • パターンul

• • パターンul-1

• • パターンul-2

• • パターンul-3

↓箇条書きパターン「ol」

1. パターンol-1
2. パターンol-2
3. パターンol-3

↓箇条書きパターン「ol」のコード

1. 1. パターンol-1

1. 1. パターンol-2

1. 1. パターンol-3

html基本タグ：コメントアウト

以下のように記載するとブラウザ上では表示されません。

ソースには表示されます。

実はこの文章の上にも
ブラウザ上には表示されていませんが、
コメントアウトの記載をしています(笑)

「CTRL + U」を押して、
ソースを確認してみて下さい。

以下のようになっています。

html基本タグ：半角スペース、全角スペース、空白

↓半角スペース、半角空白のコード

↓全角スペース、全角空白のコード

html基本タグ：特殊文字

上で紹介した空白を除く、
よく使われる特殊文字を紹介します。

↓「<」のコード

<

↓「>」のコード

>

↓「”」のコード

"

↓「&」のコード

&

↓「©」のコード

©

html基本タグ：太字、太文字

↓「太字」のコード

「太字」

html基本タグ：hr、水平の罫線、水平線

↓水平線を表示

↓上記のコード

CSS：フォント指定、font

フォント装飾に関する「font」タグは、
HTML5.0から非推奨となりました。

そのため、以下のようにCSSで
フォント装飾することをおすすめします。

文字色　文字の色 (CSS)

↓文字色の表示

カラー名：赤色
カラー名：青色
RGB値：赤色
RGB値：青色

↓上記のコード

カラー名：赤色
カラー名：青色
RGB値：赤色
RGB値：青色

文字背景色、マーカー (CSS)

↓文字背景色を付ける

文字背景色：黄色

文字背景色：黄緑色

↓上記のコード

文字背景色：黄色
文字背景色：黄緑色

文字サイズ、文字大きさ、フォントサイズ (CSS)

↓文字サイズの指定

文字サイズ xx-large
文字サイズ x-large
文字サイズ large
文字サイズ medium
文字サイズ small
文字サイズ x-small

↓上記のコード

文字サイズ xx-large
文字サイズ x-large
文字サイズ large
文字サイズ medium
文字サイズ small
文字サイズ x-small

CSS：center、センタリング

センタリングに関する「center」タグは、
HTML5.0から非推奨となりました。

そのため、以下のようにCSSで
センタリングすることをおすすめします。

↓文字をセンターに表示

↓上記のコード

以上、html入門として初心者のための基本タグを
紹介しました。

よく使いタグがある場合は
WordPressプラグイン「AddQuicktag」を
利用すると便利です。

「AddQuicktag」の使用方法は以下を参考にしてください。

関連記事→ WordPressプラグインAddquicktagの使い方！おすすめ設定も！