HTML入門編（２）（HTML をもっと使ってみよう！）

WordPress で記事を書いていく中で、HTML も一緒に使ってみたい方へ！

第２回では、「HTMLタグ」を使った文字装飾の更なるサンプルと、ＨTML のいろいろな書き方を紹介します。

1 いろいろな文字装飾（HTMLタグ）
- 1.1 ■ 打ち消し線にしてみる
- 1.2 ■ 主な文字装飾
2 タグに属性を付ける
- 2.1 ■ HTMLタグの属性を使って装飾してみよう
- 2.2 ■ 属性は複数書く場合もある
3 「ＨTML タグ」は入れ子にできる
- 3.1 ■ 「HTML タグ」を入れ子にしてみましょう！
4 閉じなくても良い HTML タグがある
- 4.1 ■ 横線タグ <hr>
- 4.2 ■ 改行タグ
5 「HTML タグ」は小文字で書く
6 まとめ
- 6.1 ■　次の記事に進む
- 6.2 ■　最初から読む

いろいろな文字装飾（HTMLタグ）

第一回では、文字の装飾で （ボールド）と、 （アンダーライン）を紹介しました。

文字の装飾には他にも多くの種類がありますのでその一部をご紹介します。

■ 打ち消し線にしてみる

打ち消し線の「HTML タグ」は、<s> ～ </s> です。「カスタムHTMLブロック」で、次の文字列を入力します。

ここに、<s>打ち消し線にしたい文字列</s> を書きます。

ポイント

ここに、~~打ち消し線にしたい文字列~~ を書きます。

■ 主な文字装飾

代表的な文字装飾用の「HTMLタグ」を載せますので、いろいろ試してみてください。

タグ	表現	サンプル
<b> ～ </b>	太文字（ボールド）にする	太文字です
<i> ～ </i>	斜め文字（イタリック）にする	斜め文字（イタリック）にする
<u> ～ </u>	下線（アンダーライン）にする	下線（アンダーライン）にする
<big> ～ </big>	文字を大きくする	文字を大きくする
<small> ～ </small>	文字を小さくする	文字を小さくする
<s> ～ </s>	打ち消し線にする	~~打ち消し線にする~~
<sub> ～ </sub>	下付き文字を表示する	この後に、_{下付き文字を表示する}
<sup> ～ </sup>	上付き文字を表示する	この後に、^{上付き文字を表示する}

タグに属性を付ける

「HTMLタグ」に「属性」を付けることで、さらに多様な表現をすることができます。

それぞれのタグで指定できる属性（名称と、実際に指定できる値）が決まっています。

実際に使ってみましょう！

■ HTMLタグの属性を使って装飾してみよう

「カスタムHTMLブロック」で、次の文字列を入力します。

ここに、文字の色を青色にした文字列 を書きます。

と が文字のフォントの形容を指定する意味の「ＨTMLタグ」ですが、 タグのなかで、属性「color="blue"」を指定することで「青色」で書くことを指定しています。

ポイント

ここに、文字の色を青色にした文字列を書きます。

■ 属性は複数書く場合もある

一つの「HTMLタグ」のなかで、属性が複数（２個、３個、４個……）つくこともあります。

「カスタムHTMLブロック」で、次の文字列を入力します。

ここに、文字を大きくして、色を青色にした文字列 を書きます。

タグのなかで、属性「size="6"」と「color="blue"」との２個の属性を指定しています。

「size="6"」は、フォントの大きさを（６段階中の６番目の大きさで）表現するように指定しています。

ポイント

ここに、文字を大きくして、色を青色にした文字列を書きます。

「ＨTML タグ」は入れ子にできる

■ 「HTML タグ」を入れ子にしてみましょう！

「ＨTMLタグ」は、入れ子にして指定することができます。実際に ～ 太文字のなかで ～ アンダーラインを引いてみます。

「カスタムHTMLブロック」で、次の文字列を入力します。

ここに、「文字が太文字になり 下線アンダーラインも引いて 太文字は続きます」 を書きます。

太文字の中の一部分だけに下線を指定しています。

ポイント

ここに、「文字が太文字になり下線アンダーラインも引いて太文字は続きます」 を書きます。

閉じなくても良い HTML タグがある

HTML タグは <開始> と </終了> でワンセットですが、スラッシュ付きの閉じるほうを書かなくても良い特殊「HTML タグ」があります。

代表的な閉じなくても良い「HTML タグ」を紹介します。

■ 横線タグ <hr>

<ht> は横に一本線を表示する「HTMLタグ」です。<hr> タグは、タグを閉じる必要がありません。

「カスタムHTMLブロック」で次のサンプルを記述してください。

こんにちは

<hr>

こんばんは

<hr> で、「こんにちは」、と、「こんばんは」、の間に横に一本線を引いています。

ポイント

こんにちは

こんばんは

■ 改行タグ

は１回改行を入れる「HTMLタグ」です。 タグは、タグを閉じる必要がありません。

「カスタムHTMLブロック」で次のサンプルを記述してください。

こんにちは(改行1) (改行2) (改行3) (改行4) こんばんは

<hr> で、「こんにちは」、と、「こんばんは」、の間に改行を４回入れています。

ポイント

こんにちは(改行1)
(改行2)
(改行3)
(改行4)
こんばんは

「カスタムHTMLブロック」で のみ記載したブロックを用いることで、記事中に適度に改行を入れることも可能です。

「HTML タグ」は小文字で書く

「HTMLタグ」のルールでは、大文字・小文字の区別はありません。

そのため、大文字 ～ で書いても同じように動作しますが、「HTMLタグ」は小文字で書くのが一般的とされています。

自分のみで楽しむ分にはどちらでも構いませんが、公開する記事（ページ）の「 HTMLタグ」は、だれでもブラウザ上の操作で見ることができる情報のため、一般的な記載である小文字で書くことをおすすめします。

まとめ

HTML の文字就職には多様なタグが用意されています。
「HTMLタグ」には属性を付けることができ、さらに表現を広げることができます。また属性は複数つけることもあります。
「HTMLタグ」は入れ子にして表現することも可能です。
閉じなくても良い特殊な「HTMLタグ」が用意されています。
「HTMLタグ」は小文字で書くことが一般的です。

HTMLを利用して、WordPress の記事エディタだけでは表せない更なる表現方法を使っていきましょう！

■　次の記事に進む

: HTML入門編（３）（画像とリンクを貼ってみよう）

WordPress で記事を書いていく中で、WordPress 上で HTML も一緒に使ってみたい方へ！第３回では、HTML で「画像」と「リンク」を貼る方法をご紹介します。

続きを見る

■　最初から読む

: HTML入門編（１）（WordPress で HTML を使ってみよう！）

WordPress を使って記事を書いていく中で、よく聞く「HTML で記述する」ということについて漠然と理解している方もいると思います。「HTML を使うことでできること」、そして、「そもそも HTML とは何か？」から紹介し、HTML を使いこなしてさらに表現豊かな記事を書けるようになる「知識と方法」を、連載記事で初心者にもわかりやすく丁寧に紹介させていただきます。

続きを見る

WordPress のおすすめテーマ

SEO に強く【集客力強化】が望める
かっこいい（かわいい）ホームページを作りやすい
初心者でも使えて、上級者になっても満足できる

本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」！

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。

AFFINGER の紹介、購入ページはこちら

: AFFINGER（アフィンガー）テーマ完全紹介！WordPress 初心者に見てほしい！メリット、デメリットも解説！

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ（読者）を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る