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

2014年04月01日

マーケターでもちょっとした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>2つ目の箇条書き</li>
 <li>3つ目の箇条書き</li>
</ul>

ほんのちょっとしたHTML応用編

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

画像に対する文字の回り込み

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


<img src="image1.png">

HTML超入門講座

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


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

HTML超入門講座

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

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

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

HTML超入門講座

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

コメントアウト

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

コメントアウトは、


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

で行います。

HTML超入門講座

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

まとめ:マーケターのためのHTMLの超入門基礎講座

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

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

  • このエントリーをはてなブックマークに追加


RSSとツイッターでも購読できます

カイロスのマーケティングブログは、RSSとツイッターでもお届けしています。みなさまのBtoBマーケティングにお役に立てる質の高いコンテンツの提供を心がけています。

RSS RSSで購読する       Twitter ツイッターで購読する

Facebookでの登録お願いします