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

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

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

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

HTMLタグの書き方

タグではさむ

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

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

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

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

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

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

FreeLaDay

ウェブデザインでは必須の知識でありながら、最近ではWordPressなどのCMSやブログを […]…

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

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

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

pタグは最も使われているともいえるタグで、Paragraph(パラグラフ)段落を示すタグです。

サンプルテキスト

サンプルテキスト

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

タグの中に書く

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

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

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

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

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

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

サンプルテキスト

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

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

FreeLaDay

『ウェブサイトを作る上で一回も使わないで終わることはない!』 と言えるほどWebには必須の […]…

HTMLでよく使うタグ

背景色の指定

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

bgcolor="背景色"

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

<body bgcolor="背景色">

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

文字の指定

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

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

文字色の指定

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

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

文字サイズの指定

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

<font size="4">サンプルテキスト</font>
フォントサイズ 1
フォントサイズ 2
フォントサイズ 3
フォントサイズ 4
フォントサイズ 5
フォントサイズ 6
フォントサイズ 7

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

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

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

リンクの指定

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

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

段落の指定

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

<p>リンクテキスト</p>

リンクテキスト

見出しの指定

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

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

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

この見出しはh1です


この見出しはh2です


この見出しはh3です


この見出しはh4です


この見出しはh5です


この見出しはh6です

リストの指定

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

箇条書きリスト

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

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

番号付きリスト

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

<ol>
<li>リスト A</li>
<li>リスト B</li>
<li>リスト C</li>
</ol>
  1. リスト A
  2. リスト B
  3. リスト C

テーブルタグ

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

  • table=表の大枠
  • tr=行
  • td=列
  • th=見出し
<table>
<tr>
<th>見出し</th>
<td>テキスト</td>
</tr>
</table>
見出し テキスト
<table>
<tr>
<th>見出しA</th>
<th>見出しB</th>
</tr>
<tr>
<td>テキストA</td>
<td>テキストB</td>
</tr>
</table>
見出しA 見出しB
テキストA テキストB

改行

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

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

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

テキストテキスト
テキスト
テキストテキストテキスト
テキストテキスト

センタリングの指定

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

<center>中央寄せ</center>
中央寄せ

番外編

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

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

See the Pen xxbXgRo by freeladay (@mami55) on CodePen.

上記のbodyタグ内には

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

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

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

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

まとめ

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

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

FOLLOW ME
>フリーランス をもっと気軽に!

フリーランス をもっと気軽に!

現役フリーランサーによる役立つ情報サイト
主に『Web』に関する知識を掲載。

デザインやライティング術、コラムなどの
フリーランスが充実するような記事も掲載中。

CTR IMG