プログラミングスキルはエンジニアのみが扱える難しい知識で、文系出身のWebマーケターには理解できないし必要もない！そう思っている方は多いのではないでしょうか？
実は、プログラミングの中でもHPに表示される文章や画像、レイアウトなどを制御するHTMLやCSSと言われるプログラミング言語は、表示に簡単で、Webマーケターが知っていれば様々な場面で活用することができます。
この記事ではWebマーケターがプログラミング言語を知っていると役に立つ場面や、よく使うコードを文系出身のプログラミング未経験者でもわかるように解説します。
HTMLとCSSとは？
HTMLとはHyper Text Markup Languageの略で、Webページのテキストや画像などの要素を表示するために使用するプログラミング言語です。
CSSとはHTMLで表示した要素の色を変えたりサイズを大きくしたり等の装飾を加えるための言語です。
この２つの言語を中心に多くのWebサイトは作られています。
これらの言語で書かれたプログラミングのコードをソースコードと呼んだりします。
ソースコードは、Webページ上で右クリックをすると”ソースコードを表示する”等の案内がでてくるので、そこから見ることができます。
また、ソースコードを見たい要素の上で、右クリックし要素を表示などをクリックすると、特定の要素を構成するソースコードを確認することができます。
このページのHTMLとCSSのソースコードを参考に貼っておきます。
因みにCSSを見るにはHTMLファイル内の、末尾がCSSのファイルをクリックしてみて下さい。
HTML
CSS
Webマーケターがプログラミングを活用できる場面
WebマーケターがHTMLやCSSを知っているとできることが広がる場面を幾つか紹介します。
稀に非エンジニアの求人票にも”HTMLやCSSができれば尚良い”などの記載がありますが、ここで紹介するようなケースでの使用が想定されます。
タグマネージャーの発火設定
タグマネージャーのタグ発火条件に設定において、HTMLのソースコードを発火条件として、クリックCVなどを測定します。
広告運用担当者はタグマネージャーを活用する機会が多いので、HTMLが使えると何かと便利です。
発展系になりますが、Javascriptというコードを使うことができれば、ページに応じて変わる動的な値を取得して、動的リターゲティング広告を実施したり、eコマーストラッキングというGAの機能を使えたりします。
Google Optimizerを活用したABテスト
Google Optimizerを使ってABテストをする際に、Optimizerのタグが埋まっていれば、テスト設定時にソースコードを編集して、文字の色や画像の位置を変えたりできます。
ここではHTMLよりCSSの方が覚えておくと便利です。
HTMLで変えられる要素（画像の位置を変えたり、文字を追加したり）は専用のアドオンを入れることで、ドラッグ&ドロップ等のマウス操作で実現できますが、文字の大きさを変えたり、色を変えたりするにはCSSを編集する必要があります。
この後、説明しますが、これらのCSSは非常に簡単なので是非とも覚えておきましょう。
自社メディアなどでのサイト更新や修正
自社サイトのブログやニュース更新などの際にHTMLやCSSが使えると便利です。
今は多くのサイトがWordPress等でできており、コードを書けない人でもテキストエディターで編集できるようになっていますが、通常と違う箇所をちょっと修正したり、デフォルトでは入っていない装飾を加える等の際にコードが書けるとできることが増えます。
ちょとした変更を都度、お金を払って業者に頼むのももったいないので、基本的なHTMLやCSSができる人が自社サイトの担当となるのが理想的です。
使う場面が多い基本的なHTMLコード
基本的なHTMLのソースコードを幾つか紹介します。
HTMLは表示させたい順に上からコードを記載していくシンプルな使い方ができます。
<a href=”****”>・・・</a>｜リンク設定タグ
<a href=”***”>と</a>の間にテキストを記載すると、そのテキストを＊＊＊で指定したURLへ飛ばすリンクができます。
例えば以下はTOPページへ飛ばすリンクです。
右クリック、要素を表示でみてみましょう。
＜img src=”＊＊＊＊” alt=”****” /＞ | 画像設定タグ
画像を表示させるためのタグです。src=”****”の****の部分に画像格納先のURLを設定します。
altの部分には画像が何らかの理由で読み込めなかった時に表示されるテキスト要素が入ります。画像を説明したテキストを設定しておきましょう。
その他、横幅をwidth、縦幅をhighなどで設定することもあります。
リンク設定タグと違い、閉じるタグが無く単独のコードで成立するのが特徴です。
<br> | 改行タグ
指標頻度が高いのが改行タグです。
文章と文章の間で改行したいときに入れましょう。
また文章が続く際に、行と行の間に意味的な区切りで大きくスペースを取りたい場合なども<br>タグを設定すると改行により、上下の間隔を取ることができます。
<p>******</p> | テキスト設定タグ
単純に文章を表示させたい時に使用されます。
*****の部分に文章を入れると、そこが１つのまとまった文章として表示され、前後に開業が入ります。
HTMLファイル内にテキストを入れても表示はされますが、正式な記述方法としては<p>タグで囲います。
使う場面が多い基本的なCSSコード
HTMLよりも目にする機会は減りますが、ページの見た目を変更したい際に必要となる知識なので、基本的なコードは覚えておきましょう。
使い方がHTMLより少し複雑になりますが、装飾を加える先を事前に指定してから、変更内容のソースコードを記載していきます。
先程紹介したCSSファイルですが、多くのコードが＃TBから開始しています。
これは紐づいているHTMLファイルのid=”TB…”が指定してある要素の装飾を変更するという意味です。
その後の｛｝の中に記載してあるコードで装飾を指示しています。
font-size:〇px; | 文字の大きさを変える
文字の大きさを変えるコードでピクセル単位で指定します。
pxの他に1.5em（通常の1.5倍）・2em（通常の２倍）等も良く使われます。
text-align: center; | 文字の寄せ方を決める
文字を左寄せ、中央寄せ、右寄せにしたい時に活用します。
左寄せであればleft、中央寄せであればcenter、右寄せであればrightを記載します。
画像要素のHTMLに指定することで画像要素の寄せ方も変更することができます。
color:red; | 色を指定
文字の色を変更できます。redの場合は赤色に、黄色の場合やyellowなど指定の文字を記載しましょう。
もしくはカラーコードを指定することで、様々な色味を指定することもできます。
Webマーケティング業界への転職に強い転職エージェント
マスメディアン
デジタルマーケティング・WEB広告業界を目指すならまずは登録すべき広告・WEB・マスコミ業界に特化した専門の転職エージェント
| 対応エリア | 強み |
| 全国対応（東京・大阪・名古屋・福岡・金沢・オンライン） | 広告業界特化 |
広告業界に特化した転職エージェント。WEB広告の案件も豊富に抱えており、業界に詳しい転職エージェントが一から丁寧に教えてくれ、業界未経験者にとっては非常に強い味方となる。一概にWEB広告と言っても仕事内容は会社によって大きく異なり、転職したが思っていたことと違っていたという失敗に陥らないためにもより詳しい転職エージェントに相談する必要がある。
最近では、インハウス求人（一般企業の宣伝、広報、マーケティング、デジタル・Web、クリエイティブ部門の求人）も増加している。
エリアも東京・名古屋・大阪・福岡・金沢と全国の主要都市に対応している。面談に行くと専門情報誌の「宣伝会議」が1冊貰える特典も。
マスメディアンの無料転職相談の予約をする
プロの転職（シンアド）
業界知識は随一！広告・PR・デジタル業界特化型で少数精鋭の転職エージェント
| 対応エリア | 強み |
| 東京（オンライン面談で全国対応可） | 広告・PR業界 |
デジタルエージェンシーや制作会社、PR会社などのコミュニケーション業界出身者が転職を支援してくれるエージェント。業界出身者ならではの質の高いマッチングで広告業界での様々なキャリアの可能性を提案してくれたり、100万円以上の年収アップ転職もサポートしてくれる。マスメディアンと共に貴重な業界特化型の転職エージェントとして活用していきたい。PR業界にも視野に入れて転職活動を進めたい際にもお勧めできる。
エージェントは少ないがその分、少数精鋭で質の高いエージェントが丁寧に対応してくれる。日々の業務が忙しくて、時間を割けない転職活動を2人3脚で力強くサポートしてくれるため、忙しい人には特にお勧めできる。