【HTML】コピペOK！使用頻度の高いHTMLタグと書き方の基本

ウェブデザインでは必須の知識ですが、

wordpressなどのCMSやブログのカスタマイズをするにも覚えておいて損はないHTMLタグ

この記事では使用頻度の高いHTMLタグをご紹介していきます。

HTMLタグの書き方

タグではさむ

HTMLタグの書き方として基本的なものは

<タグ名>タグの中身</タグ名>

のように、タグではさむ書き方です。

それぞれを『開始タグ』、『終了タグ』と呼ばれ、基本的にはセットで使います。

<タグ名>タグの中身</タグ名>

これを全てまとめて『要素』と呼びます。

【HTML】Webページを作る際に知っておきたい！サイトの構造に意味付けをするタグウェブデザインでは必須の知識でありながら、最近ではWordPressなどのCMSやブログを使用している人も多く、カスタマイズをす...

上記の記事にも書いていますが、タグ名には意味があり、”タグの中身”にどのような意味を持たせるか。という指定になります。

書き方をPタグを例として書いてみます。

HTML

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

See the Pen
XWpZPKP by FLD (@freeladay)
on CodePen.

pタグは最も使われているともいえるタグで、Paragraph（パラグラフ）

『段落』を示すタグです。

この中に文章を書くことで、これは一つの段落です。という意味を持ち、pタグごとに改行され、段落が適用されます。

タグの中に書く

HTMLではタグの中に『属性（情報）』を書くことがあります。

<タグ名　○○=”●●”>タグの中身</タグ名>

このように開始タグの中に色などの指定をする情報を入れることが出来ます。この部分を『属性』と呼びます。

このような指定はリンクタグ等でよく使われます。

<a href="リンク先">サンプルテキスト</a>

上記のように記述すると表示は下記のようになります。

See the Pen
zYNRJKM by FLD (@freeladay)
on CodePen.

ここからは実際によく使われるタグをご紹介していきたいと思います。

色の指定に関しては、こちらの記事にてカラーコード一覧表がありますので、使用したい色を探す参考にしてみてくださいね。

【保存版】Webで使いやすいカラーコード一覧『ウェブサイトを作る上で一回も使わないで終わることはない！』と言えるほどWebには必須の"カラーコード" ...

HTMLでよく使うタグ

背景色の指定

背景色の指定は、背景色をつけたい要素タグの中に下記タグを記入することで指定します。

bgcolor=”背景色”

例えば、ページの背景色を指定したい場合は、bodyタグに

<body bgcolor="背景色">

の記述で背景色が変わります。

文字の指定

文字の指定は、FONTタグにて行います

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

文字色の指定

文字色はFONTタグの中に『color=””』で指定します。

<font color="red">サンプルテキスト</font>

See the Pen
bGgLxBW by FLD (@freeladay)
on CodePen.

文字サイズの指定

文字サイズを変更するタグの書き方は『size=””』で、『””』の中には任意の文字サイズを『1（最小）〜7（最大）』の数値で指定します。

<font size="4">サンプルテキスト</font>

See the Pen
wvgyEgJ by FLD (@freeladay)
on CodePen.

標準の文字サイズは『3』になっており、『-1』や『+1』のように標準サイズに対してプラスやマイナスでの文字サイズの指定も可能です。

<font size="+2">サンプルテキスト</font>

上記だと文字サイズ『5』のサイズになります。

リンクの指定

リンクはaタグにて指定します。

<a href="リンク先">リンクテキスト</a>

See the Pen
zYNRJKM by FLD (@freeladay)
on CodePen.

段落の指定

段落はpタグで指定します。

<p>段落テキスト</p>

見出しの指定

見出しはhタグで指定し、『h1〜h6』までで見出しを設定します。

SEO的にも見出しタグは重要で、h1に近いほど重要度も高くなります。

<h1>見出しの内容</h1>

See the Pen
qBRxMrz by FLD (@freeladay)
on CodePen.

リストの指定

リストはliタグで指定します。

箇条書きリスト

箇条書きリストは順番を決められていないリストを『ul要素』を使って作成します。

<ul>
<li>リスト A</li>
<li>リスト B</li>
<li>リスト C</li>
</ul>

See the Pen
ExZQemr by FLD (@freeladay)
on CodePen.

番号付きリスト

番号付きリストは順番を決められているリストを『ol要素』を使って作成します。

<ol>
<li>リスト A</li>
<li>リスト B</li>
<li>リスト C</li>
</ol>

See the Pen
KKaQxqQ by FLD (@freeladay)
on CodePen.

テーブルタグ

テーブルタグはtableタグ要素内に、trタグ、thタグ、tdタグを使って作成します。

table＝表の大枠
tr＝行
td＝列
th＝見出し

<table border="1">
<tr>
<th>見出し</th>
<td>テキスト</td>
</tr>
</table>

See the Pen
abpqayx by FLD (@freeladay)
on CodePen.

<table border="1">
<tr>
<th>見出しA</th>
<th>見出しB</th>
</tr>
<tr>
<td>テキストA</td>
<td>テキストB</td>
</tr>
</table>

See the Pen
yLgvxzE by FLD (@freeladay)
on CodePen.

改行

改行はbrタグを使用します。

テキストテキスト<br>テキスト<br>テキストテキストテキスト<br>テキストテキスト

brタグは単体で使用し、改行したい箇所に挿入すると下記のように任意の場所で改行されます。

See the Pen
vYgdzWL by FLD (@freeladay)
on CodePen.

センタリングの指定

要素の中央寄せ（センタリング）にはcenterタグを使用します。

<center>中央寄せ</center>

See the Pen
jOyZvaZ by FLD (@freeladay)
on CodePen.

番外編

bodyで複数の指定を一気に行う

応用として、ページ内の指定を全てbodyタグに書いてしまう方法をご紹介。

See the Pen
XWpZPVO by FLD (@freeladay)
on CodePen.

上記のbodyタグ内には

背景色
文字色
リンク文字色
選択中リンク文字色
訪問済みリンク文字色

の設定を全て一気に指定しています。書き方は、

<body bgcolor="背景色" text="文字色" link="リンク文字色 " alink="選択中リンク文字色" vlink="訪問済みリンク文字色">

これで、基本的なページのカラー指定が可能です。

まとめ

今回の記事では、知ってれば便利なよく使うHTMLタグと、HTMLタグの書き方の基本を紹介しました。

この記事を参考にページに一手間加えてみたり、ブログでカスタマイズしてみたりと色々試して覚えてみてください。

HTML webデザイン