ブログ記事やメルマガを書くときに、装飾なしでそのまま送信していませんか？
ほんの少しのHTMLを覚えるだけで、これまでよりも読み手の目を惹く素敵なデザインになるかもしれません。
特にメルマガはテキストのみで投稿・送信している方も多いのではないでしょうか。テキストのみのメールよりも、ショップから届くような画像や装飾のあるオシャレなメールマガジンが作れたら･･･わくわくしませんか？
HTMLメルマガを上手に装飾することで、差別化を図ることができますね。
また、ブログ記事やホームページの更新をしている方も、いくつかのHTMLタグを扱えるようになるだけでぐっと訴求力が上がるようになります。
今回は、簡単に使える「知っておきたいHTMLタグ」を紹介します。
コーディングでもよく使用するHTMLタグなので、初心者Webデザイナーさんにも役立つ内容となっています。
HTMLの基礎
※このブロックのコンテンツは、ブログ記事を装飾したいだけの方には不要な情報ですので、次のブロックへどうぞ。
HTMLは文書(段落・箇条書きリスト)・画像・テーブルなどの構造を指定するコードです。
基本のソースコード
基本の構造は以下の通りです。<>で囲まれたものがHTMLタグになります。HTMLタグは、必ず半角で記述します。
1 2 3 4 5 6 7 8 | <html> <head> <title>タイトルが入ります</title> </head> <body> ページに表示される内容です。 </body> </html> |
<html> - HTML文書の範囲
ここからここまでがHTML文書ですよ～というHTMLの範囲を表すタグで、各ページに必ず記述します。
<html> ～ </html>でセットです。
1 2 3 | <html> //ここから </html> //ここまでがHTML文書 |
<head> - 文書の情報
<head>は<html>の直下に記述します。
<head>にはキーワードやページの説明(サーチエンジン向け)、ページタイトル、スタイルシートなどの情報が入ります。
<head> ～ </head>でセットです。
<title> - ページのタイトル
<title>は<head>内に記述します。
<title> ～ </title>でセットです。
タイトルはブラウザのタブに表示されていたり、お気に入りに入れた時に出てくるページの名前です。それ以外の情報はページ上に表示されません。
1 2 3 4 | <head> <title>ここにタイトルが入ります</title> //その他の情報もここに入ります </head> |
<body> - 実際にページに表示される内容
<body>は<html>の直下で、<head>の次に記述します。
<body>内に書かれた内容が実際にページ上で表示されます。メルマガなら本文で表示される部分です。
<body> ～ </body>でセットです。
1 2 3 | <body> //ここの内容が表示されます </body> |
よく使う！知っておきたいHTMLタグ7選 ～共通編～
それでは、実際によく使うHTMLタグを見ていきましょう。
HTMLを少しでも扱うなら、最低限覚えておきたいコードでもあります。
<h1> - 見出しタグ
見出しタグで、hのあとには1～6の数字が入ります。あくまでも本文の「見出し」としての使用で、長い文章を入れる為には使用しません。
<h1>が大見出し(最も重要)で、<h2>～<h6>は数字が小さくなるにつれて下位の見出しとなります。
<h1> ～ </h1>でセットです。開始タグと終了タグの数字を間違わないように気を付けましょう。
ブログでは記事名が<h1>になっている事が多いです。
1 2 3 4 5 | <h1>大見出しが入ります</h1> <h2>小見出しが入ります</h2> <h2>小見出しが入ります</h2> <h3>h2よりも重要度の低い見出し</h3> |
見出しタグは複数回使用することができますが、文書の構造を知らせる役目があるので、構造に沿ったレベルの見出しを使いましょう。
<p> - 文章の段落
<p>で囲まれた部分がひとつの段落になります。
<p> ～ </p>でセットです。一般的なブラウザでは前後に1行分改行されます。<p>はあくまでも段落を表すタグなので、改行目的で使用しないようにしましょう。
WordPressのビジュアルエディタなどでは、改行するまでのひとまとまりが段落とみなされ、<p> ～ </p>で出力されています。
1 2 | <p>文章が入ります。文章が入ります。</p> <p>次の段落です。文章が入ります。</p> |
<br> - 改行
<br>は改行を表すタグです。文章中に改行したい場合など、ページの表示上で改行させるために使います。
<br>に閉じタグはありません。単独で使います。
1 2 3 4 | <p> 文章中に<br> 改行することができます </p> |
<ul> <li> - 順序(番号)のないリスト
<ul>は順序のないリストを表すタグです。各リスト項目は<li>で囲います。
<ul> ～ </ul>でセットで、<ul>の中に<li> ～ </li>を配置します。
<li>は現在閉じタグが必要ありませんが、文書のバージョンにより必要な場合がありますので閉じタグをつけておいた方が良いです。
<li>は複数配置できます。
1 2 3 4 5 6 | <ul> //リストの開始 <li>あか</li> <li>あお</li> <li>きいろ</li> <li>しろ</li> </ul> //リストの終わり |
<ol> <li> - 順序(番号)のあるリスト
<ol>は順序のあるリストを表すタグです。<ul>と同じように各リスト項目は<li>で囲います。
<ol> ～ </ol>でセットで、<ul>の中に<li> ～ </li>を配置します。
<ul>は商品一覧など順番のないリストに使用するのに対し、<ol>は目次など、順番のあるリストに使用します。
1 2 3 4 5 6 7 | <ol> //リストの開始 <li>開会挨拶</li> <li>本日の流れ</li> <li>〇〇〇について</li> <li>〇〇〇について</li> <li>閉会</li> </ol> //リストの終わり |
<a> - リンクを設定する
<a>は外部リンクやページ内リンクを設定するのに使用します。
他のページへのリンクに使用する場合
<a href="URL"> ～ </a>でセットです。URLの個所にリンク先のアドレスを入れます。
<a>で囲まれた文字列や画像がリンクボタンとなります。
1 | <a href="">ここをクリック</a> |
同一ページ内で移動したい場合
<a name="NAME"> ～ </a>で移動先に名前をつける
<a href="#NAME"> ～ </a> 「NAME」と名前をつけた個所に移動します
1 2 3 | <a name="webjo">ここに移動したい</a> <a href="#webjo">ここをクリックすると移動するよ！</a> |
<img src=""> - 画像を表示する
<img src="">は、画像を表示するために使用します。閉じタグはなく、単体で使用します。
src="画像ファイルのURL" となるように、画像ファイルのURLを指定します。
また、続けて alt="" と書くことで画像の代替テキスト情報を付与できます。画像が表示されない場合に代わりに表示されるテキストです。
1 2 | 下の図をご覧ください。 <img src="image-square.jpg" alt="四角"> |
知っておきたいHTML ～メルマガ編～
メルマガをHTMLで作成する場合は、他にも知っておいた方が良いものがあります。
メルマガを作成しない方も、覚えておくと良いですよ。
<table> - 表を作成する
<table>は表を作成するタグですが、現在のHTMLメールでは「レイアウト用」として使用されています。
Web制作の場面ではレイアウト用として<table>タグを使用していたのは過去の話ですが、メルマガでは現役です。ブラウザやメールソフトの対応状況にばらつきがある為、新しい手法ではレイアウト崩れが発生するなど、閲覧環境ごとの対応が必要になってくるため、回避策となっています。
<table> ～ </table>でセットです。<table>タグの中には、後述する<tr><td>タグを入れて使います。
<tr> - 表の行(横一行)を定義
<table>タグの中に<tr>タグを入れることで、表の中の横一行として扱われます。ひとつの<tr>で一行です。
<tr> ～ </tr>でセットです。
<tr>タグの中には見出し用のセルを定義する<th>またはデータを定義する<td>タグを入れて使用します。
<td> - 行の中に表示する内容
<table>タグの中の<tr>タグの中に入れて使用します。表の中のセルとして扱われます。<td>の数だけ、列が増えます。
バナーを2つ並べたい、コンテンツを2つ並べたいといった場合のメルマガレイアウトに使用します。
<td>の中身が実際に表示される内容です。
<td> ～ </td>でセットです。
1 2 3 4 5 6 | <table> <tr> <td>1つのセルの内容です</td> <td>1つのセルの内容です</td> </tr> </table> |
Web制作用 - メルマガ以外での<table>の使い方
<table>は価格表やデータなど、「表」として使用します。
現在レイアウト用にはレスポンシブデザインに対応したより良い手法が登場している為、<table>をレイアウト用としては使用しません。
表として使用する場合、見出しを表す<caption>やテーブルヘッダを表す<thead>テーブル本体を表す<tbody>などでテーブル内の構造を明確にする手法がとられていますが、すべて使用しなければいけないというわけではなく、用途に応じて使い分けます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <table> <caption>テーブルの見出し</caption> <thead> <tr> <th>上見出し1</th> <th>上見出し2</th> </tr> </thead> <tbody> <tr> <th>横見出し1</th> <td>データ1</td> </tr> <tr> <th>横見出し2</th> <td>データ2</td> </tr> </tbody> </table> |
メルマガ用の装飾(CSS)
メルマガはメールソフトによりCSS(スタイルシート＝装飾用のコード)の記述法が制限されてしまうため確実な手法として、タグに直接記述します。
border - テーブルのボーダーを消す(メルマガ用)
<table>は通常ボーダー(囲い線)が表示されている状態のため、レイアウト用として使用するHTMLメルマガでは表示されないようにします。
<table>タグに border="0" を追加します。
1 | <table border="0"> |
cellspacing - テーブルのセル同士の間隔を指定
テーブルのセル同士の間隔を指定できますが、レイアウト用として使用するHTMLメルマガでは0に設定しましょう。
1 | <table border="0" cellspacing="0"> |
cellpadding - テーブルのセル内の余白を指定
テーブルのセル内の余白を指定できますが、レイアウト用として使用するHTMLメルマガでは0に設定しましょう。
1 | <table border="0" cellspacing="0" cellpadding="0"> |
width - テーブルの横幅を指定
テーブル全体の横幅を指定します。HTMLメルマガでは、600pxとしている所が多いみたいですね。
1 | <table border="0" cellspacing="0" cellpadding="0" width="600px"> |
style - 色や文字サイズなどを変更
style=" " にCSSのコードを記述するだけで、あらゆる装飾が実現できます。
style="color: △△△" - 文字色の変更
△△△の部分に色名を入れると、該当部分の文字色が変わります。
色名は WEB色見本 原色大辞典 - HTMLカラーコードがわかりやすいです。どのメールソフトでも対応できるよう、赤や青など、一般的な色名を選ぶ方が良いですね。
色名はコードで指定してもOKですが、メルマガでの使用限定でしたら慣れるまでは色名が良いでしょう。
style="font-size:△△px" - 文字サイズの変更
△△の部分に整数を入れると、該当部分の文字サイズが変わります。一般的なブラウザでは10pxが最小サイズです。
スマートフォンで読みやすい文字サイズを考えるならば、16px以上がおすすめです。
style="font-weight:bold" - 太字にする
太字にしたい場合に使用します。
style="background-color:△△△" - 背景色の変更
△△の部分に色名を入れると、背景色が変わります。
複数styleの指定
styleを複数指定したい場合は、「;」(セミコロン)で区切り続けて記述します。
まとめ
たった少しのHTMLコードを覚えるだけで、これまでのブログ記事やメルマガをぐっと華やかにすることができます。
難しいと思っていても、実際使うのは毎回同じコードなので1回作ってしまえば簡単です。ぜひ試してみてくださいね。
今回装飾についてはメルマガ用のみとなりましたが、Web制作やブログで使えるCSSも記事にしたいと思います！