webマーケターが覚えるべき最低限のHTML・CSSを解説！

最近社内外問わず、webマーケティングをしている方で「HTMLやCSSがよく分からない」という声を聞きます。

私自身、マーケティング未経験でchipperにジョインしたのでHTMLやCSSはおろか、SEOやCPAなどのマーケティング用語も耳にしたことがありませんでした。

略歴はこちら

しかし、最近エンジニアやデザイナーの助けを借りて少しずつ簡単なHTMLやCSSを覚えていく中で、マーケターも知識として備えておいた方がいい！と実感したので、解説いたします。

• webマーケティング担当者
• スキルアップしたい方
• 業務効率を上げたい方

マーケターが簡単なHTML・CSSを理解しておいた方がいい理由

マーケターがHTMLやCSSを理解しておいた方がいい理由は大きく2点あります。

• 業務効率アップ
• 企画や提案のアイディアの幅が広がる

それぞれ詳しく記載していきます。

業務効率アップ

HTMLやCSSに関する知識がまったくない状態だと、例えば自分で対応できればすぐに済ませられるような画像の差し替えやリンク先の変更にも、都度社内外のエンジニアなどへ依頼をする必要が出てしまいます。
社内であればすぐに対応してもらえるかもしれませんが、社外へ依頼する場合時間もコストもかかってしまいます。

また、エンジニアやデザイナーとのコミュニケーションも円滑に取ることができ、お互いの時間を有効に活用できます。

実際に私自身、何も分からない状態では「何を聞けばいいのか」が分かりませんでした。
しかし、少しでも分かった状態であればある程度の仮説を立てた上で、「ここを変更したく、この部分を変更してみたがうまく反映されない」のように、0ベースの質問ではなく1や2ベースで質問ができ、相手の時間を奪いすぎないようになったのかなと実感しています。

企画や提案のアイディアの幅が広がる

サイト構築の裏側を少しでもわかっていると、例えば参考サイトをみながら「このサイトはこんな感じで作成しているのかな」「こういうアイディアは使えそう」など、クライアントに対しての企画や提案のアイディアが広がります。

また「すぐに実現できそう」「できるけど工数がかかりそう」など、なんとなくできるだろうという感覚から実際の構築に近い予測を立てられるので、構築期間まで加味したより具体的な提案をすることもできます。

HTML・CSSの違い

それぞれの役割

それでは、HTML・CSSとはどのようなものなのか、それぞれの役割を簡単に解説していきます。

をそれぞれ指定する役割をもっています。

マーケターに覚えておいていただきたい、具体的な記述内容は下記のようなものがあります。

▼HTML

▼CSS

覚えておきたいHTML

HTMLは基本的に、<タグ内容>の中に半角英数字で記述をしていき、</タグ内容>で閉じてはじめてwebページに反映されます。
下記覚えておきたい基本的なタグを紹介していきます。

▼見出しタグ

<h1>タイトル</h1>
<h2>タイトルの次に重要な見出し</h2>
<h3>h2見出しの中の各見出し</h3>

こちらの記事を例に見ると

h1＝【超初心者向け】Excel苦手人間がD2Cの運用で必要なVLOOKUP関数を解説！
h2＝VLOOKUPとは
h3＝VLOOKUPとは、VLOOKUP活用シーン

のように指定しています。
上記の例だと実際にはもう少し装飾を設定しているのですが、基本の設定をするとh1からh3にかけて文字サイズが小さくなっていきます。

▼段落と改行

<p>段落</p>
<br>改行（/で閉じないでそのまま使用できます）

Microsoft Wordなどと異なり、HTMLを編集する際にエンターキーやスペースキーで改行や段落を設定しても、実際のwebページでは反映されません。

▼フォントのサイズと色

<p style="color: #000000; font-size: 20px" >テキスト</p>

こちらは、HTMLの中にCSSを直接書き込む表示形式です。
以前は下記のような<font>タグがよく使用されていましたが、現行のHTMLでは廃止となっており現在ではあまり使用されていません。
（挙動的に使用はできるのですが、推奨はされておりません）

<font size="2" color="#000000">テキスト</font>

フォントカラーは 原色大辞典などから16進数を確認し、指定することが多いです。

▼画像の挿入、リンクの設定

<!-- 画像の挿入（/で閉じないでそのまま使用できます） -->
<img src="画像のURL" width="100px" height="300px" alt="画像の説明">
<!-- リンクの設定 -->
<a href="リンク先のURL">詳細はこちら</a>
<!-- バナーなど画像からリンクの設定 -->
<a href="リンク先のURL"><img src="画像のURL" width="100px" height="300px" alt="画像の説明"></a>

画像の挿入やリンクの設定は、楽天やYahooなどのモールでもよく使用されるタグです。
これが分かっているだけで、簡単な画像やリンクの差し替えがすぐにできるので、モール運用を行っている担当者の方には覚えておいた方がいいでしょう。

表示幅や高さを指定しているwidthやheightは、上記のようなpx（ピクセル）単位での指定と、デバイスに合わせて変化する%での指定の2パターンがあります。

▼コメントアウト

<!--　コメントアウトしたい内容　-->

HTMLを直接編集していると、例えば「ここだけ編集すればいいように他の担当にも引き継ぎたい」という場面が出てきます。
そんな時に上記のコメントアウトを使用すると、web上にはコメントアウトしたテキストは表示されないので社内での共有に便利です（ソースとしては誰でも確認できるのでそのあたりは頭に入れておいてください）。

▼使用例

<!-- ▼下記のリンクのみ変更▼ -->
<a href="リンク先のURL">詳細はこちら</a>

覚えておきたいCSS

CSSの書き方にはいくつかパターンがありますが、汎用性が高くもっとも多く使われている「HTMLに直接書き込むのではなく、独立したCSSファイルを用意する」方法を解説していきます。
この方法では、CSSファイルを用意しHTMLのheadタグの中に下記の内容を記載することで、CSSファイルを反映させることができます。

例えば弊社のMEDIAページのように同じCSS（装飾）で記事を作成していく際など、一つのCSSファイルを複数の記事に反映できるので、とても便利です。

<link rel="stylesheet" href="CSSファイルへのパス">

▼基本構造

値の最後はセミコロン（;）で区切るので気をつけましょう。

▼セレクタ

どのHTML要素にCSSを反映させるのか、いわばHTMLとのCSSの橋渡しのような役割。

classとidはどちらもHTMLにタグ付けをして、そのタグに対してCSSを反映させていきます。
classが一つのHTML内で同じタグ名を繰り返し使用できるのに対し、idだと同じタグ名は一度しか使用できません。
タグ名は自身や社内でわかりやすい名前に設定しましょう。

▼プロパティ

そのHTMLの中のどの部分を変えるのかを指示する役割。

▼値

どのように（またはどれくらい）変えるのかを指示する役割。具体的な数値が入ることが多い。

カラーコード参考：原色大辞典

▼コメントアウト

HTMLでは<!– テキスト –>でコメントアウトを設定していましたが、CSSでは/* テキスト */でコメントアウトすることができます。

HTMLと同様に自分自身へのメモ、他メンバーへの共有としてぜひ活用してください。

使用例（class指定）

▼HTML

<p class="test">テキストA</p>
<p class="test">テキストB</p>

▼CSS

.test {color: #000000; font-size: 10px;}

これでテキストA・テキストBどちらも「10ピクセルサイズの黒字（#000000）」で記載されます。

使用例（id指定）

id指定の場合は同じタグ名が使用できないので、下記のようにタグ名を分ける必要があります。

▼HTML

<p id="test1">テキストA</p>
<p id="test2">テキストB</p>

▼CSS

#test1 {color: #000000; font-size: 10px;}
#test2 {color: #333333; font-size: 20px;}

おすすめのソフトウェア

これまでマーケターが覚えておくべき最低限のHTML・CSSについて解説してきました。
最後に、実際に私がコードを編集する際に使用しているソフトウェアをご紹介します。

Sublime Text（テキストエディタ）

テキストを「ファイル名.html」の形式で保存し開くと、テキストやタグが色付きで表示され視覚的に見やすく作業がしやすいです。
MacでもWindowsでも導入することができるので、おすすめです。

Sublime Text

Adobe Dreamwever（webデザインソフトウェア）

有料ではありますが、コードヒントが出たりプレビュー画面を見ながら作業ができるのでHTMLやCSSに慣れていない初心者にはわかりやすいです。
webの公開まで対応できるソフトですが、私は現在コードの編集のみで使用しています。

Adobe Dreamweaver

おわりに

慣れないHTMLやCSSに初めは苦手意識を持つ方も多いと思います。

しかし自分で0から構築できなくても、「ここを変更すればこれが変わるのかな」「余白感を持たせたい時はこの部分を調整すればいいのかな」と少しでもわかってくると、サイト構築の裏側までわかるマーケターとして、クライアント・社内外の構築パートナーとも円滑にコミュニケーションを取ることができるでしょう。

また途中で記載したように、自社サイト以外でも楽天やYahooのモールではHTMLを使用してユーザビリティを考えた商品ページを作り込むことで、ユーザー満足度や転換率の向上につながります。

マーケターとして最低限のHTML・CSSはぜひインプットしておきましょう。