webライターは、ライティング技術があればできますが、htmlの簡単な部分だけでも覚えておくとお仕事の幅が広がります。
htmlで仕事の幅が広がる理由
webライターが作成するテキストはwebページを作るためにもっとも大切な内容です。
しかし、webページを表示させるにはhtml言語で作成する必要があります。
テキストのみで納品された場合は、誰かがhtmlで記述する作業をしなくてはならず、 おおよその場合は、発注している方がしています。
この作業が積み重なるとそれなりに時間がかかるため、 ページ単価をアップさせてでもwebライター側にやってもらいたいと思っています。
また、htmlができればテキストのデータをhtmlで作成するだけのお仕事もお願いされます。
つまり需要があるのです。
Contents
ライターがhtmlを始めるには
htmlを覚えるのって大変なんじゃないの?
実はそうでもありません。
最近のwebページは、WordPressを始めとしたCMS(コンテンツマネジメントシステム)を 使用して構築されています。
これは、Webサイトの制作に必要な専門知識はほとんど使わず 簡単にサイトを作成することができるツールです。
そのため、たった7つのhtmlを覚えておけば、少なくともライターステーションで依頼される お仕事においては「htmlできます」といってOKです。
7つのhtmlで対応できない依頼内容に関しては、 素直に依頼してきた方に聞いて大丈夫です。
htmlタグについて
htmlは、文字列の表示・動作をコンピューターに理解させるために タグと呼ばれる記号で文字を囲みます。
これは、タグで目印をつけるという意味からマークアップといいます。
webライターの方が覚える7つのhtmlタグは以下の表示・動作をさせるものです。
- 見出しを表示
- 一文の始まりと終わりを表示
- リストを表示
- 説明リストを表示
- 表を表示
- ハイパーリンクを貼る
- 画像を表示
ここから、コピペで使えるhtmlタグのリファレンスになります。
hタグ
見出しを表示するhtmlタグです。
<H1>~<H6>のHとはHeadingの略で、見出しを意味しています。<H1>が最も上位の見出し(大見出し)となり、数字が大きくなるにつれて下位の見出しとなります。
<h1> 大見出し
<h2> 中見出し
<h3> 小見出し
といった使い方になります。
<h1> の次に急に<h4> を配置するような使い方はしてはいけません。
【HTMLソース】
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
【ブラウザ上の表示】
見出し1
見出し2
見出し3
見出し4
見出し5
見出し6
pタグ
一文の始まりと終わりの段落を表すタグです。
<P>タグはParagraphの略であり、 <P>~</P>で囲まれた文章などが1つの段落だと表します。
【HTMLソース】
<p>ここが1つの段落を表しています。</p>
<p>ここが1つの段落を表しています。</p>
【ブラウザ上の表示】
ここが1つの段落を表しています。
ここが1つの段落を表しています。
リストタグ(ul・ol)
リストを表示するタグは、<ul>と<ol>の2つあります。
<ul>はUnordered Listの略で、リスト項目に順番がない場合に使用します。
<ol>はOrdered Listの略で、リスト項目に順番をつける場合に使用します。
<ol>タグは文頭に、数字やアルファベットなどを表示することができます。
この<ul><ol>タグで囲んだ中に<li>タグを使用して項目を記述します。
【HTMLソース】
<h3>好きな色</h3><ul>
<li>赤</li>
<li>青</li>
<li>黒</li>
<li>黄色</li>
<li>ピンク</li>
</ul>
<h3>料理に入れる調味料の順番</h3>
<ol>
<li>砂糖</li>
<li>塩</li>
<li>酸</li>
<li>醤油</li>
<li>味噌</li>
</ol>
【ブラウザ上の表示】
好きな動物
- 赤
- 青
- 黒
- 黄色
- ピンク
料理に入れる調味料の順番
- 砂糖
- 塩
- 酸
- 醤油
- 味噌
dlタグ
説明リストを表示させるタグです。
<DL>はDefinition Listの略で、 <DL>~</DL>で囲んだ範囲が説明の定義を表示するリストであることを表します。
説明したい言葉とその説明内容を一対にして記述します。
<DT>~</DT>に説明したい言葉を記載し、 <DD>~</DD>に説明内容を記載します。 <DL>~</DL>の中には、複数の</DT>~</DT><DD>~</DD>リストを並べることができます。
【HTMLソース】
<dl class=”dl-blue”>
<dt class=”dt-blue”>光の三原色</dt>
<dd>光で見える色です。赤・緑・青で作られていて、混ざると明るくなり白に近づいていきます。</dd>
<dt class=”dl blue”>色の三原色</dt>
<dd>光が当たり反射して見える色です・シアン・マゼンダ・イエローで作られていて、混ざると暗くなり黒に近づいていきます。</dd>
</dl>
【ブラウザ上の表示】
- 光の三原色
- 光で見える色です。赤・緑・青で作られていて、混ざると明るくなり白に近づいていきます。
- 色の三原色
- 光が当たり反射して見える色です・シアン・マゼンダ・イエローで作られていて、混ざると暗くなり黒に近づいていきます。
tableタグ
webサイトでは、表組みで表現した方がわかりやすい場合が多々あります。
<TABLE>は表(テーブル)を表示するタグです。 他のタグに比べて少しだけ難しいのですが、マスターしてほしいタグです。
表の基本的な構造は、 <TABLE>~</TABLE>内に<TR>~</TR>で表の横の一行を定義します。
その中に、<TH>~</TH>や <TD>~</TD>で表のセルを定義します。
<TH>~</TH>は見出しをとなるヘッダセルといいます。
多くのブラウザでは太字で真ん中寄せされて表示されます。
<TD>~<TD>はデータセルといいます。
【HTMLソース】
<table class=”table-blue”>
<tbody>
<tr class=”tr-blue”>
<th class=”th-blue”</th>
<th class=”th-blue”>説明</th>
<th class=”th-blue”>知識</th>
</tr>
<tr class=”tr-blue”>
<td class=”td-blue”>メニュー1</td>
<td class=”td-blue”>説明1</td>
<td class=”td-blue”>知識1</td>
</tr>
<tr class=”tr-blue”>
<td class=”td-blue”>メニュー2</td>
<td class=”td-blue”>説明2</td>
<td class=”td-blue”>知識2</td>
</tr>
</tbody>
</table>
【ブラウザ上の表示】
メニュー | 説明 | 知識 |
---|---|---|
メニュー1 | 説明1 | 知識1 |
メニュー2 | 説明2 | 知識2 |
aタグ
別のページや場所にリンクを張るのに使用するのが<a>タグです。
<a>タグはアンカー(Anchor)の略であり、リンクの出発点と到達点を指定します。 リンク先はhref属性と呼ばれる文字列で指定します。
また、ページ内の特定の場所を到達点とするには、 name属性かid属性を使用することもできます。 その場合は、到達点にあたる場所にも<a>タグで名前をつけます。
【HTMLソース】
<a name=”abc”>ページファイルの途中の到達点にabcという名前を付けます</a><br>
<a href=”#abc”>abcと名前を付けた到達点にリンクします</a><br>
<a href=”index.htm#a”>今見ているページと別ページの名前を付けた到達点にリンクします</a>
到達点には<a name=”a”>などを記載する。
imgタグ
画像を表示させるには<img>タグを使用します。 <img>はイメージ(Image)の略です。 <img>タグには、複数の属性の指定が必要です。 表示させたい画像ファイル…src属性(srcはsourceの略です)で指定 画像の縦横サイズ…width属性とheight属性 画像の内容…alt属性、画像を表示できない場合などに代替えで表示させるテキスト
【HTMLソース】
<img border=”0″ src=”https://writer-station.com/magazine/wp-content/uploads/2019/01/img.gif” width=”128″ height=”128″ alt=”イラスト1″>
【ブラウザ上の表示】

div、spanタグ
これまでテキストに意味をもたせるタグを紹介してきましたが、 最後に少々特殊な使い方をするタグを紹介します。
<div>タグと<span>タグです。
このタグ自体に意味はありませんが、囲んだ要素を一つの塊と定義します。 ものすごく簡単にいえば、<div>タグは「ここら辺全部」と指定ができ、 <span>タグは「ここの一部」と指定するためのものです。
ちょっと難しくいうと、<div>はブロック要素、<span>はインライン要素と言われています。
一般的なブラウザでは<div>は前後に改行が入り、 <span>は主に文章の一部として利用されるため、その前後に改行されません。
class(クラス)を指定する
昨今のwebページは、htmlとCSS(カスケーディング・スタイル・シート)と組み合わせて作られています。
HTMLはウェブページ内の文章などのテキストや見出しや画像の表示など構造を記述するものです。 それに対して、CSSではhtmlの構造をどのように装飾するかを指定するものです。
つまり、HTMLとCSSはセットで使用されるのです。
ライターステーションのライターさんはCSSの設定や記述をすることは、ほぼありません。 すでに指定されたCSSから、装飾を呼び出す記述は必要です。
idとclassって何?
CSSを呼び出す記述には、「class」と「id」があります。
「class」は、1ページの中で何度も使用できます。
「id」は1ページの中で1度しか使えません。
使い方の違いは、「class」は色や文字の太さなど、細かい要素の装飾に使われます。
ライターさんが使うのはほぼこちらになります。
それに対して「id」は主に大きな部分を指定します。
例えば、ヘッダーやサイドバー、メインコンテンツが記載される部分などのブロックを指定する場合です。
それ以外に、aタグを使用する際のページ内の到達点として使用します。
タグにクラスを指定する
「class」指定は、これまでに説明してきたhtmlタグに対して指定することが可能です。
【スタイルシート部分は本来外部ファイル(xxx.css)に記述します】
.info {color:blue; font-size:small;}【HTMLソース】
<html><head>
<link rel=”stylesheet” type=”text/css” href=”sample.css”>
</head>
<body>
<h2>今日の天気</h2>
<p>今日は<strong>晴れ</strong>となるでしょう。</p>
<p class=”info”>洗濯日和となるでしょう。</p>
<h2>明日の天気</h2>
<p>明日は<strong>雨</strong>となるでしょう。</p>
<p class=”info”>傘をお忘れずにしましょう。</p>
</body>
</html>
【ブラウザ上の表示】
今日の天気
今日は晴れとなるでしょう。
洗濯日和となるでしょう。
明日の天気
明日は雨となるでしょう。
傘をお忘れずにしましょう。
要素にクラスを指定する
htmlタグの説明部分で、<div>と<span>という囲んだ要素を一つの塊と定義するタグを紹介しました。
この塊に対して、class指定をすることができます。
【HTMLソース】
<div align=”center”>ここには<br>
一塊の文章がはいります。
</div>
【ブラウザ上の表示】
一塊の文章がはいります。
ライティング業務では、<div>と<span>が使いこなせれば、問題はありませんが、 要素として、<article>と<section>という要素もあります。
<div>と<span>よりも広い要素に対して使用しますが、 こちらは、指示があれば使用するかもしれないくらいの認識で問題ありません。
コーディングにおすすめエディタ
webサイトにhtmlタグを入れることをマークアップといいます。 マークアップをするための専用のソフトもありますが、お金もかかりますし、 ソフトを習得するのにも時間がかかります。 マークアップは、無料で使えるテキストエディタでも十分事足ります。
テキストエディタというと、メモ帳やwordが使用されがちですが、 htmlタグを扱うには力不足な面もあり、以下で紹介するエディタを使用するのを おすすめします。
- オススメソフト
- -sublimetext
-Atom - 使用方法
- https://qiita.com/banaoh/items/c2e2e2ef857d1dbfaac7
wpなどのCMSを使った依頼が多いので、wpなどにも慣れよう
例えばライターステーションでライターが編集する場所はここ
WordPressなどのCMSでライターさんがhtmlを触る部分は、各ページの本文を記入する部分になります。
本文を記入する部分では、「ビジュアル」「テキスト」のタブがあります。
「ビジュアル」はhtmlを入力せず、Wordなどと同じようにテキストを打ち込むだけで <p>タグなどが自動ではいります。
リンクなどはフォームの上部にあるツールバーを操作して入力できますが、 ツールが限られるため、できることも同様に限られています。 また、余計なタグが入ったり再編集時にうまくいかないなんてことも。
「テキスト」のタブは、htmlで直打ちが可能です。
「ビジュアル」と同じくツールバーがあり、htmlタグを入力ができます。 htmlタグを見ながら入力ができるため、細かい操作ができるところはメリットです。 しかし、マークアップで入力ミスがあると大幅にページが崩れるなんてことも。
なれないうちは、「ビジュアル」「テキスト」を切り替えながら入力するとスムーズです。
さらにhtmlを勉強するには
htmlやcssをもっと深く学習すれば、サイト全体の作成ができるようになり webライターとして以外にwebコーダーとしてのお仕事が広がります。
学習に役立つツールを紹介します。順を追って学べるのでわかりやすいです。
- プロゲート
- https://prog-8.com/
Webライターの稼ぎ方
webライターの収入アップの近道!htmlを覚えて付加価値をつける