▽Q&A▽マガジンを見る>ログイン>登録する>再チャレンジライター募集のライターステーションTOPmagazinewebライターの収入アップの近道!htmlを覚えて付加価値をつける1月24Webライターの稼ぎ方webライターの収入アップの近道!htmlを覚えて付加価値をつけるwebライターは、ライティング技術があればできますが、htmlの簡単な部分だけでも覚えておくとお仕事の幅が広がります。htmlで仕事の幅が広がる理由webライターが作成するテキストはwebページを作るためにもっとも大切な内容です。webページを表示させるにはhtml言語で作成する必要があります。場合は、発注している方がしています。ページ単価をアップさせてでもwebライター側にやってもらいたいと思っています。htmlができればテキストのデータをhtmlで作成するだけのお仕事もお願いされます。htmlを勉強するにはライターがhtmlを始めるにはhtmlを覚えるのって大変なんじゃないの?実はそうでもありません。使用して構築されています。簡単にサイトを作成することができるツールです。お仕事においては「htmlできます」といってOKです。素直に依頼してきた方に聞いて大丈夫です。タグと呼ばれる記号で文字を囲みます。これは、タグで目印をつけるという意味からマークアップといいます。webライターの方が覚える7つのhtmlタグは以下の表示・動作をさせるものです。表を表示ハイパーリンクを貼る画像を表示ここから、コピペで使えるhtmlタグのリファレンスになります。hタグ見出しを表示するhtmlタグです。<H1>~<H6>のHとはHeadingの略で、見出しを意味しています。<H1>が最も上位の見出し(大見出し)となり、数字が大きくなるにつれて下位の見出しとなります。小見出しといった使い方になります。配置するような使い方はしてはいけません。見出し1見出し2見出し3見出し4見出し5見出し6pタグ一文の始まりと終わりの段落を表すタグです。<P>~</P>で囲まれた文章などが1つの段落だと表します。【HTMLソース】<p>ここが1つの段落を表しています。</p><p>ここが1つの段落を表しています。</p>【ブラウザ上の表示】ここが1つの段落を表しています。ここが1つの段落を表しています。リストタグ(ul・ol)リストを表示するタグは、<ul>と<ol>の2つあります。Listの略で、リスト項目に順番がない場合に使用します。Listの略で、リスト項目に順番をつける場合に使用します。<ol>タグは文頭に、数字やアルファベットなどを表示することができます。この<ul><ol>タグで囲んだ中に<li>タグを使用して項目を記述します。dlタグ説明リストを表示させるタグです。<DL>~</DL>で囲んだ範囲が説明の定義を表示するリストであることを表します。説明したい言葉とその説明内容を一対にして記述します。<DD>~</DD>に説明内容を記載します。<DL>~</DL>の中には、複数の</DT>~</DT><DD>~</DD>リストを並べることができます。class=”dt-blue”>光の三原色</dt><dd>光で見える色です。赤・緑・青で作られていて、混ざると明るくなり白に近づいていきます。blue”>色の三原色</dt><dd>光が当たり反射して見える色です・シアン・マゼンダ・イエローで作られていて、混ざると暗くなり黒に近づいていきます。赤・緑・青で作られていて、混ざると明るくなり白に近づいていきます。光が当たり反射して見える色です・シアン・マゼンダ・イエローで作られていて、混ざると暗くなり黒に近づいていきます。tableタグwebサイトでは、表組みで表現した方がわかりやすい場合が多々あります。<TABLE>は表(テーブル)を表示するタグです。他のタグに比べて少しだけ難しいのですが、マスターしてほしいタグです。<TABLE>~</TABLE>内に<TR>~</TR>で表の横の一行を定義します。<TD>~</TD>で表のセルを定義します。<TH>~</TH>は見出しをとなるヘッダセルといいます。多くのブラウザでは太字で真ん中寄せされて表示されます。<TD>~<TD>はデータセルといいます。知識2aタグ別のページや場所にリンクを張るのに使用するのが<a>タグです。<a>タグはアンカー(Anchor)の略であり、リンクの出発点と到達点を指定します。リンク先はhref属性と呼ばれる文字列で指定します。name属性かid属性を使用することもできます。その場合は、到達点にあたる場所にも<a>タグで名前をつけます。name=”a”>などを記載する。【ブラウザ上の表示】ページファイルの途中の到達点にabcという名前を付けますabcと名前を付けた到達点にリンクします今見ているページと別ページの名前を付けた到達点にリンクしますimgタグ画像を表示させるには<img>タグを使用します。<img>はイメージ(Image)の略です。<img>タグには、複数の属性の指定が必要です。最後に少々特殊な使い方をするタグを紹介します。<div>タグと<span>タグです。このタグ自体に意味はありませんが、囲んだ要素を一つの塊と定義します。<span>タグは「ここの一部」と指定するためのものです。難しくいうと、<div>はブロック要素、<span>はインライン要素と言われています。<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タグに対して指定することが可能です。href=”sample.css”></head><body><h2>今日の天気</h2><p>今日は<strong>晴れ</strong>となるでしょう。class=”info”>洗濯日和となるでしょう。</p><h2>明日の天気</h2><p>明日は<strong>雨</strong>となるでしょう。class=”info”>傘をお忘れずにしましょう。今日は晴れとなるでしょう。洗濯日和となるでしょう。明日は雨となるでしょう。傘をお忘れずにしましょう。要素にクラスを指定するhtmlタグの説明部分で、<div>と<span>という囲んだ要素を一つの塊と定義するタグを紹介しました。この塊に対して、class指定をすることができます。align=”center”>ここには<br>一塊の文章がはいります。</div>【ブラウザ上の表示】ここには一塊の文章がはいります。要素として、<article>と<section>という要素もあります。こちらは、指示があれば使用するかもしれないくらいの認識で問題ありません。コーディングにおすすめエディタwebサイトにhtmlタグを入れることをマークアップといいます。ソフトを習得するのにも時間がかかります。マークアップは、無料で使えるテキストエディタでも十分事足ります。オススメソフト-sublimetext-Atom使用方法https://qiita.com/banaoh/items/c2e2e2ef857d1dbfaac7wpなどのCMSを使った依頼が多いので、wpなどにも慣れよう例えばライターステーションでライターが編集する場所はここWordPressなどのCMSでライターさんがhtmlを触る部分は、各ページの本文を記入する部分になります。本文を記入する部分では、「ビジュアル」「テキスト」のタブがあります。<p>タグなどが自動ではいります。ツールが限られるため、できることも同様に限られています。余計なタグが入ったり再編集時にうまくいかないなんてことも。「テキスト」のタブは、htmlで直打ちが可能です。「ビジュアル」と同じくツールバーがあり、htmlタグを入力ができます。htmlタグを見ながら入力ができるため、細かい操作ができるところはメリットです。マークアップで入力ミスがあると大幅にページが崩れるなんてことも。なれないうちは、「ビジュアル」「テキスト」を切り替えながら入力するとスムーズです。webライターとして以外にwebコーダーとしてのお仕事が広がります。学習に役立つツールを紹介します。順を追って学べるのでわかりやすいです。(JIPDEC)より個人情報について適切な取り扱いが行われている企業に与えられる「プライバシーマーク」を取得しています。