どうも、つるです。
さて、この記事はワードプレスでよく使うHTMLをまとめたものです。
これでもか！っていうくらいにやさしく解説しました。
ワードプレスのHTMLで困ったときは、作業しながら、この記事を参考にするとと良いでしょう。
Contents（目次）
HTMLの基本ルール
HTMLには基本的なルールが存在します。
主に9つです。
さらに、重要度別に3段階に分けてみました。
最初ほど重要です。
初級編
基本的なルールです。
ここの知識だけはしっかり押さえる必要があります。
1:基本的に、<タグ>対象</タグ>で書く
例）<h1>見出し１</h1>
※h1タグは、見出し1の効果があるタグです。
見出し○←ここの数字が小さいほど
（意味も大きさも）大きい見出しになります。
この例は、h1タグを使っている例です。
始まりの部分を<h1>で指定、
終わりの部分を</h1>で指定してます。
中にはさんである文字の部分には、
h1タグの効果の対象となる文字列が入ります。
2:タグには、追加情報を与えられる
▲上記は「リンクにしたい文字列」にsample.htmlのページへのリンクを設定している。
※aタグは、何か情報を持たせたい時にとりあえず付けちゃうタグです。
タグの各部分の名称はあんまり覚えなくていいです。
上記画像の「要素名」に
「属性名」と「属性値」をプラスすると、
情報を追加できるということだけ覚えておいてください。
上記画像の場合、
「リンクにしたい文字列」に
「sample.htmlへリンクするよー」っていう
意味を持った「aタグ」を付けています。
3:タグでタグを挟める（タグを入れられる）
例）
<ul>
<li>文字だよ</li>
<li>文字だぜ</li>
<li>文字だぁ</li>
</ul>
※ulタグは、囲った中身のものが何かのリストであることを表します。
※liタグは、リストの要素であることを表します。
ulタグとセットで使います。
olタグともセットで使えますが、それはまた別の機会で。
「例」を見てわかる通り、
<ul>の中に<li>が入っていますね。
このように、タグをタグで囲むことが可能です。
ただし、つぎのような形はルール違反です。
悪い例）
<ul><li></ul></li>
これは、お互いのタグがお互いのタグをまたいでいる状態です。
これではいけません。
本来は「外側のタグ」で「内側のタグ」を囲む形が正しいです。
箱にモノをしまうイメージが正しいです。
中級編
ここからは応用が効くルールの知識です。
初級編のルールを押さえたら、
その次に覚えましょう。
4:タグ（要素）には個別に名前を付けられる
例）
<div class="大事なとこだよ">文字列</div>
※divタグも、aタグと同じで、何か情報を持たせたい時にとりあえず付けちゃうタグです。
上の例では、divタグに
「大事なとこだよ」という名前を付けています。
名付けるために、
classという情報（属性）を付けています。
また、idという情報（属性）を
同じ形で付けても名づけられます。
※classとidの使い分けは5番のルール紹介で。
5:同じ名前のidは2つ以上存在してはならない
idという情報（属性）を使って名付けた場合、
同じ名前は２つと存在してはいけません。
idで付けた名前は唯一無二です。
対して、classは
同じ名前のものが複数あってもOKです。
「あれとこれとそれは同じ名前にしよう」って時に
便利です。
※この便利さは、
HTMLを色鮮やかに飾りたいときに感じることができます。
が、HTMLが上手く扱えないうちは無縁です。私はそうでした(笑
上級編
この辺は、
たしかに基本ルールといえば基本ルールですが、
活用できるようになるのはHTMLに
そうとう慣れてきてからでしょう。
中には、ワードプレスで記事を書く場合は
覚えなくてもいいこともあります。
理解しなくてもいいので、
一応サラッと見ておいてください。
6:必ずドキュメント宣言を付ける
ドキュメント宣言とは、こんなやつです。
<!DOCTYPE html>
もうわけわからん
呪文のように見えるかもしれません。
でも、HTMLにはこの呪文が必ずいるのです。
まぁ、ワードプレスで記事を書くのなら無縁でしょう。
7:<html></html>で囲む
文字通りの意味です。
ドキュメント宣言の次の部分から、
<html></html>で囲みましょう。
これもワードプレスで記事を書くなら無縁です。
8:head要素をbody要素の前に付ける
これも文字通りの意味です。
ワードプレスで記事を書くなら（以下略
9:本文は<body> </body>で囲む。
本文とは、ブラウザに表示させる部分です。
ワードプレスで（以下略
なお、ここまでの知識をまとめると、
HTML全体はこんな感じになります。
<!DOCTYPE html>
<html>
<head>
head要素の情報をここに書き込む
</head>
<body>
ブラウザに表示させる内容（本文、ようは記事）をここに書き込む
</body>
<html>
おそらく、今回の記事を読む前では
呪文に見えていたHTMLが、
各要素がしっかりルールに従って
書かれていることに気づけるはずです。
…まぁ、ワードプレスを使って記事を書いていれば、
ここまでのHTML知識はいらないでしょう。
が、基本ルールを知っておく分には
損はないので、頭の片隅に置いておきましょう。
まとめ
まとめです。
HTMLの基本ルール（初級編～中級編）
-
- 基本的に、<タグ>対象</タグ>で書く
- タグには、追加情報を与えられる
- タグでタグを挟める（タグを入れられる）
- タグ（要素）には個別に名前を付けられる
- 同じ名前のidは2つ以上存在してはならない
正直、最後にやった上級編の知識は
目を通すだけでOKです。
ワードプレスを使ってたら、あまり使いません。
ワードプレス側で勝手にやってくれるので。
ただし、初級編の知識はとっても大事です。
基礎中の基礎たる知識なので、
7回くらい読み返して覚えてください。
今回紹介したルールを覚えれば、
あとは必要になったときごとに、
HTMLのタグを調べるだけで、
あなたはHTMLを使えるようになります。
ぜひ、覚えておいてくださいね。
つる（学生アフィリエイター）
コメントフォーム