webライターは、ライティング技術があればできますが、htmlの簡単な部分だけでも覚えておくとお仕事の幅が広がります。

htmlで仕事の幅が広がる理由

webライターが作成するテキストはwebページを作るためにもっとも大切な内容です。

しかし、webページを表示させるにはhtml言語で作成する必要があります。
テキストのみで納品された場合は、誰かがhtmlで記述する作業をしなくてはならず、 おおよその場合は、発注している方がしています。

この作業が積み重なるとそれなりに時間がかかるため、 ページ単価をアップさせてでもwebライター側にやってもらいたいと思っています。

また、htmlができればテキストのデータをhtmlで作成するだけのお仕事もお願いされます。

つまり需要があるのです。

ライターが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> を配置するような使い方はしてはいけません。

pタグ

一文の始まりと終わりの段落を表すタグです。

<P>タグはParagraphの略であり、 <P>～</P>で囲まれた文章などが1つの段落だと表します。

リストタグ（ul・ol）

リストを表示するタグは、<ul>と<ol>の2つあります。

<ul>はUnordered Listの略で、リスト項目に順番がない場合に使用します。
<ol>はOrdered Listの略で、リスト項目に順番をつける場合に使用します。
<ol>タグは文頭に、数字やアルファベットなどを表示することができます。

この<ul><ol>タグで囲んだ中に<li>タグを使用して項目を記述します。

dlタグ

説明リストを表示させるタグです。

<DL>はDefinition Listの略で、 <DL>～</DL>で囲んだ範囲が説明の定義を表示するリストであることを表します。
説明したい言葉とその説明内容を一対にして記述します。

<DT>～</DT>に説明したい言葉を記載し、 <DD>～</DD>に説明内容を記載します。 <DL>～</DL>の中には、複数の</DT>～</DT><DD>～</DD>リストを並べることができます。

tableタグ

webサイトでは、表組みで表現した方がわかりやすい場合が多々あります。

<TABLE>は表（テーブル）を表示するタグです。 他のタグに比べて少しだけ難しいのですが、マスターしてほしいタグです。

表の基本的な構造は、 <TABLE>～</TABLE>内に<TR>～</TR>で表の横の一行を定義します。
その中に、<TH>～</TH>や <TD>～</TD>で表のセルを定義します。
<TH>～</TH>は見出しをとなるヘッダセルといいます。
多くのブラウザでは太字で真ん中寄せされて表示されます。
<TD>～<TD>はデータセルといいます。

aタグ

別のページや場所にリンクを張るのに使用するのが<a>タグです。

<a>タグはアンカー（Anchor）の略であり、リンクの出発点と到達点を指定します。 リンク先はhref属性と呼ばれる文字列で指定します。

また、ページ内の特定の場所を到達点とするには、 name属性かid属性を使用することもできます。 その場合は、到達点にあたる場所にも<a>タグで名前をつけます。

imgタグ

画像を表示させるには<img>タグを使用します。 <img>はイメージ（Image）の略です。 <img>タグには、複数の属性の指定が必要です。 表示させたい画像ファイル…src属性（srcはsourceの略です）で指定 画像の縦横サイズ…width属性とheight属性 画像の内容…alt属性、画像を表示できない場合などに代替えで表示させるテキスト

【ブラウザ上の表示】

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タグに対して指定することが可能です。

要素にクラスを指定する

htmlタグの説明部分で、<div>と<span>という囲んだ要素を一つの塊と定義するタグを紹介しました。
この塊に対して、class指定をすることができます。

ライティング業務では、<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/