よく使うHTMLタグ

2020年1月27日

HTMLタグはブログを書いている、サイトを持っている方は聞いたことがあるかと思います。
ですが、HTMLタグを自分で入力している、タグを理解しながら使っている方は少ないかもしれません。

最近では、全くわからなくてもボタン1つで反映できるブログサービスもあります。
しかし、改行の時にフォントが崩れる、勝手に斜めになってしまうなど起こることがあります。
これがHTMLを書式に変換する際、全てを正確に反映できないことが原因なのです。
それを修正したり、正確に反映させるにはHTMLでの入力が必要になります。

今回はよく使うHTMLタグをいくつかご紹介いたします。
※サービスによって使用できないものもあります。
■HTMLとは
■タグの基本
■よく使うHTMLタグ
▽リンク
▽画像表示
▽画像にリンクを指定する
▽テキスト系
▽リスト
▽テーブル（表）

■HTMLとは
HTMLとはHyper Text Markup Language(ハイパーテキスト・マークアップランゲージ）の略で、タグという命令を使い、HTML文書の構造を指定したり、文字の大きさや色、画像を表示させます。

■タグの基本
<●>こんにちは</●>
タグを入力する時は開始タグと終了タグで要素の内容を挟みます。命令文を< >で囲んだものが開始タグ、< / >で囲んだものが終了タグとなります。
（タグによっては終了タグが不要なものもあります）

タグの中に「属性」を指定することで、情報を付加し、細かい役割を与えることも可能です。

■よく使うHTMLタグ
▽リンク
<a>
テキストや画像にリンクを指定するタグです。
『<a href=”リンクするURL”>リンクを貼りたいテキスト</a>』でリンクを指定します。
また、『<a href=”リンクするURL” target=”_blank”>リンクしたい文字</a>』でリンクを別ウィンドウで開く指定をするも可能です。

使用例：
<a href="https://www.pikoz.jp/" target=”_blank”>損をさせないWebコンサルタント</a>
表示例：
損をさせないWebコンサルタント

▽画像表示
<img>
画像を表示させるタグです。
『<img src="保存場所+画像ファイル名">』で画像が表示できます。
縦横の大きさや画像代替文字などを表示させる場合は『<img src="保存場所+画像ファイル名" alt=”画像代替文字” width=”横幅” height=”高さ”>』と表記します

使用例：
<img src="https://www.pikoz.jp/wp-content/uploads/2018/01/html.jpg" width="300″ height="157″>
表示例：

▽画像にリンクを指定する
<a>+<img>
テキストや画像にリンクを指定するタグと画像を表示するタグをあわせると、画像にリンクを指定することができます。
『<a href=”リンクするURL”><img src="保存場所+画像ファイル名"></a>』と言う風に、リンクを貼りたいテキストの部分に画像を表示させるタグを書きます。

使用例：
<a href="https://www.pikoz.jp/" target=”_blank”><img src="https://www.pikoz.jp/wp-content/uploads/2018/01/html.jpg" width="300″ height="157″></a>
表示例：

▽テキスト系

<p>
段落を意味する文字列に使用されます。

使用例：
<p>ここからここまでが1つの段落です。</p> <p>ここから次の段落です。</p>
表示例：
ここからここまでが1つの段落です。ここから次の段落です。

<u>
テキストの下に下線を引く時に使用します。

使用例：
<u>下線を引きたい時に</u>使用します。
表示例：
下線を引きたい時に使用します。

<del>
文章の取り消し、削除された、修正した情報をテキストとして残しておきたい場合に使用します。

使用例：
<del>申込はこちらから</del>　申込は終了いたしました。
表示例：
申込はこちらから　　申込は終了いたしました。

<strong>
特に強調したいものに使用するタグです。

使用例：
<strong>強調したい！</strong>
表示例：
強調したい！

<hr>
水平線を引くタグです。段落的に横線を引きます。段落的になので、上下に少しスペースが含まれます。終了タグは不要です。
width=”横幅”を追加すると横の長さを指定できます。

使用例：
↓線
<hr>
↑線
表示例：
↓線

<br>
改行するために使うタグです。終了タグは不要です。
見た目を整えるためでなく、改行がコンテンツの一部になる場合に使用します。見た目を整える場合は<p>タグ（段落）を使用してください。

使用例：
あいうえお<br>かきくけこ
表示例：
あいうえお
かきくけこ

▽リスト

<ul>,<ol>,<li>
＜ul>は配置順に意味をもたないリスト、<ol>は配置順に意味を持たせるリスト。
<li>はリストの内容を意味します。
<ul>、<ol>タグは必ず1つ以上の<li>が必要となります。

使用例：
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul><ol>
<li>数字リスト1</li>
<li>数字リスト2</li>
<li>数字リスト3</li>
</ol>表示例：

  • リスト1
  • リスト2
  • リスト3
  1. 数字リスト1
  2. 数字リスト2
  3. 数字リスト3

▽テーブル（表）

<table>、<tr>、<th>、<td>
<table>の中の<tr>で横行を定義し、さらにその中に<td>でセルを定義します。
<td>の代わりに<th>を使用すると、見出しを定義するヘッダセルとなり、太字でセンタリングされます。
タグが多く失敗しやすいのでよく『テーブルタグ作成ツール』さんのお世話になっています。

使用例：
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>データセル1-1</td>
<td>データセル1-2</td>
<td>データセル1-3</td>
</tr>
<tr>
<td>データセル2-1</td>
<td>データセル2-2</td>
<td>データセル2-3</td>
</tr>
<tr>
<td>データセル3-1</td>
<td>データセル3-2</td>
<td>データセル3-3</td>
</tr>
</table>
表示例：

見出し1 見出し2 見出し3
データセル1-1 データセル1-2 データセル1-3
データセル2-1 データセル2-2 データセル2-3
データセル3-1 データセル3-2 データセル3-3

以上、よく使うHTMLタグでした。
お疲れ様でした。

The following two tabs change content below.

小笹 通典

1971年、奈良県橿原市生まれ。京都でWebを中心としたプロデュースなどを行うオフィスピコッツの代表。これまで多種多様なWEBサイトの制作や運営、プロデュースに携わり、複数のWEB系のコンテストなどでの受賞暦も持つ。 現在、WEBサイトの作成や運営などはもちろん、新規事業立ち上げのサポートや各種プロジェクトのアドバイザー、大学校や高校の講師、PTA会長、CEOなど、活動の範囲を広げている。

HTML

Posted by 小笹 通典