マーケターのためのHTMLの超入門基礎

カイロスマーケティング株式会社

11年前

マーケターでもちょっとしたHTMLやCSSは覚えておいたほうが便利です。WebページやHTMLメールのほんのささいな追加や編集でも、業者にお願いすると時間も費用もかかります。

マーケティング・ツールを使ってメールやフォームを作成したり、ブログの記事を更新する場合でも基礎的なHTMLやCSSを覚えておけば、あなたが編集できる幅が広がります。

マーケターがHTMLやCSSを覚えるだけで、デザイナーやエンジニアの手をわずらわせること無く、自分自身でホームページやブログ、HTMLメールの編集が可能になります。

マーケターが覚えておきたいHTML超入門基礎

HTMLだけでも覚えることはたくさんあります。ここでは、HTMLをこれから勉強しようと思うマーケターに最低限覚えておいていただきたいHTMLをいくつか紹介します。

ハイパーリンクは、テキストや画像などをクリックした場合に、特定のURLをブラウザで開かせたい時に利用します。ブラウザに直接URLをコピー＆ペーストするよりも、クリックひとつで指定のURLにアクセスできるので便利です。


<a href="http://www.kairosmarketing.com">リンクをさせたい文字列</a>

ヘッドラインタグは、見出しタグとも呼ばれます。ちょうどMS Wordの見出し機能に似ています。

検索エンジン最適化（SEO）で、特定キーワードとの関連性を判断する上で重要なタグであると言われています。


<H1>最も重要な見出し</H1>

<H2>次に重要な見出し</H2>

H1見出しは、H2見出しよりも大きな文字で表示されます。

HTMLを直接編集する場合、改行を明示的にしない限り文字列は改行されません。WordpressなどのCMS（コンテンツ管理システム）を利用している場合には、自動的に段落や改行が挿入されるものもあります。

Pタグで囲めばひとつの段落になります。改行は<br>で表現します。


<p>これがひとつの段落を示します。<br>
ここで改行されます。</p>

HTMLでもMS Wordのようにフォントは明示的に指定することができます。


<font size="2" color="green">少しサイズの大きい緑色の文字。</font>
<b>太字</b>

<u>アンダーライン</u>

<i>イタリック</i>

フォントの文字の色は、#ff0000 のように16進数で表現することもできます。

色の見本は原色大辞典などで参照するのが便利です。

マーケターの方が取り扱うWebサイトでは、多くの画像が使われているでしょう。画像はIMGタグを使うのですが、そのオプションがたくさんあります。

IMGタグでは、src に画像のURL、width/heightで横・縦のピクセル、もしくは縮小割合（%を使った場合）、altで画像の説明をします。altの文字列は、画像が表示されない場合に代替テキストとして表示されます。


<img src="http://website.com/image.jpg" width="100px" height="300px" alt="画像の説明">

IMGタグはハイパーリンクと一緒に利用され、画像をクリックしたら指定したURLをブラウザで開く設定もよく使われます。

リストもよく使われます。ULでくくった場合は箇条書き、OLでくくった場合には数字付きの箇条書きになります。

<ul>
　<li>最初の箇条書き</li>
　<li>２つ目の箇条書き</li>
　<li>３つ目の箇条書き</li>
</ul>

本来はCSSでレイアウトを整えるのですが、HTMLでもレイアウトが調整できる便利な方法を紹介します。

画像を貼りこんで、その後すぐに文字を書くと、このような形でレイアウトが中途半端になります。


<img src="image1.png">

次に、画像を左寄せにしてみます。


<img src="image1.png" align="left">

align=”left” の代わりに、rightを使えば画像が右側、文字が左側になります。

このままだと画像と文字の間にスペースが無く、レイアウトとしては少々見にくいです。画像の左右に少し余白を作ってみましょう。

<img src="image1.png" align="left" hspace="20">

hspaceではなく、vspaceとすると上下に指定されたスペースができます。

HTMLを共同で編集している場合など、「ここは私が編集しました」とHTML内にメモを残すと便利な場合があります。

コメントアウトは、


<!— コメントアウトする内容をここに -->

で行います。

HTMLファイルの中身はこんな感じになります。編集者や編集日時を入れるのも共同作業には便利かもしれません。

いかがでしたでしょうか？

まだまだHTMLについて知りたいという方は、無料のHTMLチートシート（PDF）などを活用してみてください。