HTML入門(実践編)〜マーケターやWeb担当者がマスターしたいHTMLの基礎

2015年09月10日

HTMLの入門的な内容は、マーケターがマスターしておくと、業者から納入したWebサイトのHTMLファイルのちょっとした改修やHTMLメールを自分で作成できるようになります。

HTMLの入門的な内容を覚えておくと、コスト削減だけでなく業者とやり取りする時間も短縮できます。

前回は、HTML入門としてHTMLの概要を紹介しました。今回は、マーケティング業務に関わるマーケターが覚えておきたい基本的なHTML入門の実践編をお届けします。

1.HTMLの基礎について

HTMLの基礎については、「マーケターやWeb担当者のためのHTML入門|カイロスのマーケティングブログ」でまとめました。基本的なHTMLの概念などは、こちらを参考にしてください。

今回は、前回の「マーケターやWeb担当者のためのHTML入門|カイロスのマーケティングブログ」続きで、HTMLの利用例について説明していきます。

2.HTMLで文章を装飾する

HTMLで文字、段落を装飾する代表的な方法を紹介します。後のHTMLの運用が簡単になるよう、CSSを使って説明していきます。

CSSを使うメリット
CSSを使うと、デザインの自由度が上がる、HTMLの更新しやすくなる、ウェブページの読み込みが早くなるなどのメリットがあります。詳細は「マーケターやWeb担当者のためのHTML入門」が参考になります。

2-1.改行タグbrと段落タグp

HTMLの入門をおさえる上では、改行と段落について必ず知らなくてはなりません。どんな簡単な文章をHTMLで書いても、改行と段落タグは必要です。

HTMLではテキストエディタなどで改行を入れても無視します。改行には<br>を明記する必要があります。

例えば、

HTMLの文章では改行は無視されます。<br>そのため強制的に改行タグを入れる必要があります。

は、

HTMLの文章では改行は無視されます。
そのため強制的に改行タグを入れる必要があります

となります。<br>を入れるとこのように文中で改行をいれます。

HTMLで作成するWebの読み物では、長い文章のかたまりは読みにくくなります。そのため、文章を段落で区切って、段落間に少し余白を入れるようにします。

ここで活躍するHTMLタグが改行のための<p>タグです。<br>で囲んだ文章は1つの段落とみなされ、段落の前後に約1行の余白が入ります。

<p>最初の段落です。</p><p>二番目の段落です。</p>

この文章は、

最初の段落です。

二番目の段落です。

となります。

Webでは、段落に含まれる文章を少なくしたり、文章ごとに段落を区切るなどすると、あなたの文章が読みやすくなるでしょう。これもHTML入門です。

当ブログ「カイロスのマーケティングブログ」でも、段落を多くして読みやすくするための工夫をしています。いかがでしょうか?

2-2.文字の行間の変更

HTML入門で是非覚えておいていただきたい次のテーマは、行間です。行間はHTMLタグではなく、HTMLタグの属性とその値で決定したり、CSSで設定したりします。

<p>吾輩は猫である。</p><p>名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>

と書いたHTML文章は、

吾輩は猫である。

名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

と表示します。2つめの段落は、特に行間が詰まった感じがしますね。

ですので、行間を200%に設定します。まずは、HTMLタグと属性+値で設定します。

<p style="line-height:2;"> 吾輩は猫である。</p><p style="line-height:2;">名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>

これは、

吾輩は猫である。

名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

と表示されます。どちらが読みやすいかは、見ての通り明らかですね。

HTML入門として覚えていただきたいことに、CSSがあります。行間200%の文章をCSSを使って書くと、

HTML部分
<p class="gyokan"> 吾輩は猫である。</p><p class="gyokan">名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>;

CSS部分
.sanko {
   line-height:2;
}

とします。

もしHTML文章全体(厳密には、<p>タグ)に行間200%を適応したければ、

p{
   line-height:2;
}

とすると、HTML文章内の全ての<p>タグに行間200%が適応されます。

2-3.HTML文章で特定の文字を太くする

HTML文章で文字を太くする方法もHTML入門としておさえておきましょう。

HTML文章内で、文字や単語を太くする場合、<b>タグや<strong>タグを利用します。

文字を太くするHTMLタグの利用例
文字を太くする箇所を<b>タグ</b>で囲みます。
文字を太くする箇所を<strong>タグ</strong>で囲みます。

この結果はいずれも、

文字を太くする箇所をタグで囲みます。

となります。

<b>タグと<strong>の違いの2つのタグはHTMLの出力からみると全く同じですが、HTMLタグにおける意味合いが異なります。

<b>タグは単に太字を意味しますが、<strong>は「強調」を意味します。したがって、SEOなどでは両者は分けて使われます。

2-4.見出しのあれこれ

HTML入門でも見出しは特に重要です。文章を意味のあるかたまりに区切って見出しをつければ
読者にとって読みやすくなるだけでなく、SEOにも効果があります。

見出しは<h1>から<h6>まで定義されています。小さい番号ほど大きな文字で表示されます。

見出しはあくまでも、意味のある文章のかたまりに対して見出しをつけるためのHTMLタグであり、ブロック要素です。

ブロック要素とは
ブロックレベル要素は、表や見出し、段落など、ウェブページを構成する上でブロック(かたまり)となります。ブラウザ上でもブロックとして取り扱われ、ブロックレベル要素の前後に改行が入ります。くわしくは「マーケターやWeb担当者のためのHTML入門」を参考にしてください。

ブログなどでは、見出しの最上位の<h1>タグは、記事のタイトルなどに使います。SEOの観点からすると、<h1>タグはWebページに1回のみ使うことが望ましいでしょう。

したがって、ブログなどの文章中の見出しには<h2>タグ以下の見出し用のHTMLタグを活用します。

<h2>ブログ記事の見出し</h2>

見出しタグの文字の大きさや色などの変更にはCSSが便利です。

HTMLソース
<h2 class="blog-caption">ブログ記事の見出し</h2>

CSSソース
.blog-caption{
  font-size: 1.5em; /*フォントを本文文字の1.5倍に*/
  font-weight: bold; /*表示フォントを太字に*/
  color: blue; /*フォントの色を青に*/
}

と設定すると、

ブログ記事の見出し

のようになります。

2-5. 引用をHTMLタグで明確にする

ブログでは、他のブログ記事やWebサイトからの引用もよく利用します。

引用時に最もよく使うHTMLタグは、<blockquote>タグです。<blockquote>タグはブラウザ上で左右にインデント(余白の挿入)は入ります。
<blockquote>タグは、

<blockquote>この部分は他の文献から引用した部分です。</blockquote>

このように利用します。他の文献やWebサイトのコンテンツや文章を<blockquote>タグで囲みます。

<blockquote>タグを自分なりに装飾したい場合には、CSSを利用します。例えば全ての<blockquote>タグを同様に装飾したい場合はCSSに、

blockquote{
  border: 1px solid siliver; /*引用を線で囲む*/
  padding:10px;/*線の内部に10pxのスペースを確保する*/
}

のようにします。ここでは、引用部分を薄いグレーの線で囲み、文字と線のスペースを10pxほど取っています。

3.箇条書き

文章で箇条書きをうまく使うと、文章の内容のポイントを読者にうまく伝えることができます。

HTMLでは箇条書き用のHTMLタグがあります。箇条書き用のHTMLタグを活用して、HTML文章で箇条書きをします。

3-1. 基本的な箇条書き

箇条書き用のHTMLタグでは、3つだけ覚えておきましょう。

箇条書き用のHTMLタグで覚えておきたいもの

  • <ul>タグ:番号なしのリストを作成します。
  • <ol>タグ:番号付きのリストを作成します。
  • <li>タグ:箇条書したいリストの内容です。
  • これらの箇条書きのHTMLタグを活用すると、

    <ul>
    <li>箇条書きアイテム1</li>
    <li>箇条書きアイテム2</li>
    <li>箇条書きアイテム3</li>
    </ul>

    と表現できます。これは、

  • 箇条書きアイテム1
  • 箇条書きアイテム2
  • 箇条書きアイテム3
  • となります。

    3-2. HTMLタグとCSSで箇条書きを装飾する

    では、先ほどの箇条書きに画像を使って装飾してみましょう。画像の挿入にはCSSを使います。番号なしの箇条書きの<li>タグにCSSを適用します。

    ul li { list-style-image: url('<画像ファイルの場所(URL)>);' }

    この出力結果は、

  • 箇条書きアイテム1
  • 箇条書きアイテム2
  • 箇条書きアイテム3
  • のように画像で置き換わります。

    今回利用した画像は、「ブログが作りたい!」さんからダウンロードさせていただきました。

    4.リンクを挿入する

    次にリンクを設定するHTMLタグについて説明します。マーケティング目的で運営するブログやWebサイトでは、リンクは欠かせません。

    4-1.リンクの基本

    リンクを設定するHTMLタグは、<a>タグです。ある文字や単語に外部リンクを設定する場合、HTMLの<a>タグを以下のように使います。

    <a href="https://blog.kairosmarketing.net/" title="カイロスのマーケティングブログ">カイロスのマーケティングブログ|カイロスマーケティング株式会社<a>

    hrefにリンク先のURLを設定します。titleは無くても<a>タグには問題ありません。ただしSEOとしてある程度の効果が期待できるようですので、自社のWebページへのリンクの場合は、title属性も記述しておきましょう。

    先ほどの例は、

    と表示されます。ここまでがおさえておきたいHTML入門です。

    4-2.別ウインドウでリンク先のコンテンツを開く

    時には、別のウインドウやタブでリンク先を開いてもらいたいことがあります。その場合には、<a>タグのtarget属性に「_blank」を設定します。

    <a href="https://blog.kairosmarketing.net" target="_blank">カイロスのマーケティングブログ(別タブで開く)</a<

    これは、

    のようになります。

    5.HTMLにおける画像

    画像はたとえHTML入門のレベルでも、Webサイトには欠かせません。画像をHTMLに埋め込むためには、<img>タグを使います。

    5-1. 画像に関係する基本的なHTML

    <img>タグでは、必須のsrc属性で画像ファイルのURLを指定し、alt属性で画像を表示できない場合の環境向けのテキスト、width属性・height属性でそれぞれ画像の幅と高さを指定します。

    <img src="(画像のURL)" alt="(代替テキスト)" width="(画像の幅)" height="(画像の高さ)" >

    具体的には、

    <img src="https://blog.kairosmarketing.net/img/karios3-banner-20150731.gif" alt="マーケティングオートメーション「Kairos3」" width="360" height="360">

    のように表示されます。

    この画像の例は、このブログの右上のバナーになります。

    5-3. 画像にリンクを設定する

    ブログでもWebサイトでも、バナーやナビゲーションのボタンなど、画像にリンクを設定することはよくあります。

    画像にリンクを設定するためには、<a>タグと<img>タグを同時に使います。具体的には、<img>タグを<a>タグで囲みます。

    <a href="(リンク先のURL)" title="(リンク先のタイトル)"><img src="(画像のURL)" alt="(画像の代替テキスト)"></a>

    6.テーブルを作成する

    HTMLの表は、<table>タグで作成します。Webで表を作成する機会は比較的少ないかもしれませんが、HTMLメールでは<table>タグを使う機会が多いので、マーケターにとってはHTML入門でありながら必須の項目です。

    6-1. 基本的なテーブルタグ

    <table>タグの基本的な構成は、<table></table>で表全体を囲み、<tr></tr>で表の行を囲みます。それぞれのセルは、<th></th>でヘッダを、各セルは<td<</td>で囲みます。

    <table>
     <tr><th>キャプション1</th><>th<キャプション2</th></tr>
     <tr><td>セル1-1</td><td>セル1-2</td></tr>
     <tr><td>セル2-1</td><td>セル2-2</td></tr>
    </table>

    これは、以下のように表示されます。

    キャプション1 キャプション2
    セル1-1 セル1-2
    セル2-1 セル2-2

    6-2. HTMLのテーブルを装飾する(入門編)

    上の表は、属性も何も設定していないシンプルなテーブルです。せめて罫線だけでもつけたいでしょう。

    HTMLのテーブルの罫線は<table>タグのborder属性かCSSのどちらかで設定できます。ここでは簡単な、border属性からみていきましょう。

    <table border=1>
     <tr><th>キャプション1</th><th>キャプション2</th></tr>
     <tr><td>セル1-1</td><td>セル1-2</td></tr>
     <tr><td>セル2-1</td><td>セル2-2</td></tr>
    </table>

    これは、以下のように表示されます。

    キャプション1 キャプション2
    セル1-1 セル1-2
    セル2-1 セル2-2

    この表も少し文字が詰まりすぎていて、表を読みにくいと思います。それぞれのセルにスペースを入れてみましょう。CSSのpaddingによってセルにスペースを作ります。

    HTMLソース
    <table border=1>
     <tr><th>キャプション1</th><th>キャプション2</th></tr>
     <tr><td>セル1-1</td><td>セル1-2</td></tr>
     <tr><td>セル2-1</td><td>セル2-2</td></tr>
    </table>

    CSSファイル
    td,th{
      padding:5px 10px;
    }

    この結果は以下のように表示されます。ここで、paddingの5px、10pxは、それぞれ上下、左右のスペースを示しています。

    先ほどよりも、文字と罫線の間にスペースができました。

    キャプション1 キャプション2
    セル1-1 セル1-2
    セル2-1 セル2-2

    これ以上のHTMLテーブルの装飾方法は別途紹介したいと思います。まずはHTML入門の<table>タグの使い方として身につけてください。

    7.まとめ

    今回はHTML入門の実践編として、代表的なHTMLの使い方について説明しました。ちょっとした入門的なHTMLを覚えておくと、納入してもらったHTMLファイルの修正や、HTMLメールの作成ができるようになります。

    マーケティング業務に関わる方々もぜひ、このHTML入門編で触れた内容をマスターすることをおすすめします。

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


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

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

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

    Facebookでの登録お願いします