表のタグ
表にするときに使用します。
16. <table>、<tr>、<th>、<td>
基本構造としては<table>の中の<tr>で横一行を定義し、さらにその中に<th>や<td>でセルを定義します。
<th>は見出しを定義するヘッダセル、<td>はデータを定義するデータセルとなり、一般的なブラウザではヘッダセル内のテキストは太字でセンタリングされて表示されます。
- ■使用例1
<table>
<tr>
<th>見出しセル1</th>
<th>見出しセル2</th>
<th>見出しセル3</th>
</tr>
<tr>
<td>データセル1の1</td>
<td>データセル2の1</td>
<td>データセル3の1</td>
</tr>
<tr>
<td>データセル1の2</td>
<td>データセル2の2</td>
<td>データセル3の2</td>
</tr>
<tr>
<td>データセル1の3</td>
<td>データセル2の3</td>
<td>データセル3の3</td>
</tr>
</table>■表示例1
見出しセル1 見出しセル2 見出しセル3 データセル1の1 データセル2の1 データセル3の1 データセル1の2 データセル2の2 データセル3の2 データセル1の3 データセル2の3 データセル3の3
- ■使用例2
<table>
<tr>
<th>見出しセル</th>
<th>見出しセル横の1</th>
<th>見出しセル横の2</th>
<th>見出しセル横の3</th>
</tr>
<tr>
<th>見出しセル縦の1</th>
<td>データセル1の1</td>
<td>データセル2の1</td>
<td>データセル3の1</td>
</tr>
<tr>
<th>見出しセル縦の2</th>
<td>データセル1の2</td>
<td>データセル2の2</td>
<td>データセル3の2</td>
</tr>
<tr>
<th>見出しセル縦の3</th>
<td>データセル1の3</td>
<td>データセル2の3</td>
<td>データセル3の3</td>
</tr>
</table>■表示例2
見出しセル 見出しセル横の1 見出しセル横の2 見出しセル横の3 見出しセル縦の1 データセル1の1 データセル2の1 見出しセル3の1 見出しセル縦の2 データセル1の2 データセル2の2 見出しセル3の2 見出しセル縦の3 データセル1の3 データセル2の3 見出しセル3の3
リンク指定のタグ
ハイパーリンクを指定するときに使用します。
17. <a>
テキストや画像を<a>（アンカー）タグで囲むと、Web上の関連する情報を結びつけるハイパーリンクを指定することができます。
href属性でURLを指定したり、target属性でリンク先の情報をどのウィンドウ（フレーム）で開くかの指定ができたりします。
今回の記事でもページ内リンク付きの「目次」を用意していましたが、これも<a>タグを使用しております。
- ■使用例1
<p><a href=”#mokuji”>目次に戻ります</a></p>※目次部分のテキストは
<h2 id=”mokuji”>ブログでよく使用するHTMLタグ</h2>
となっており、id=”mokuji”の位置に戻ります。■表示例1
- ■使用例2
<p><a href=”http://www.yahoo.co.jp/” target=”_blank”>Yahoo!JAPANを新規ウィンドウで開きます</a></p>■表示例2
画像表示のタグ
画像を表示するときに使用します。
18. <img>
基本的には<img src=”（場所＋画像ファイル名）” alt=”画像代替文字” width=”横幅” height=”高さ” 各種属性 >という構成で使われます。
src属性は画像のパス（ファイルの場所）を指定する役割を果たすため、必須のタグ属性です。alt属性はHTML4.01までは必須属性でしたが、HTML5になって省略できるようになりました。
その他、HTML4.01までは各種レイアウト用の属性が用意されていましたが、HTML5になってからは廃止されているため、CSSで指定することが望ましくなっています。
- ■使用例
<img src=”https://liginc.co.jp/wp-content/uploads/2014/10/yoshiki.jpg” alt=”画像代替文字が表示されます” width=”600″ height=”400″ class=”alignnone size-full wp-image-122353″ >■表示例
まとめ
いかがでしたでしょうか。
今回紹介したHTMLタグは、すぐにでもブログで使えるものばかりですので、ぜひお試しください。
実際に自分でHTMLタグを入力したり、ソースコードを理解できるようになれば、表現の幅は大きく広がります。慣れないうちは難しいかもしれませんが、ぜひとも挑戦してみましょう。
あわせて、各種タグはテキストの見た目だけを気にして使うのではなく、コンピュータに“これはどんな意味を持つ情報なのか”を認識させながら運用することが重要になります。
それによって検索流入の増加が見込めるようになることこそが、自身でHTMLタグを入力する一番のメリットかもしれません。
HTMLタグの効果的な使用方法を覚え、今後のブログ運用に大いに役立てていただければと思います。
それでは、また。
- 文章を書く際に、読んでおきたい記事はこちら
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
