誰もが覚えるべき
HTML タグ
著：コスパ（鈴木）
このマニュアルについて
■推薦環境■ このレポート上に書かれている URL はクリック可能です。出来ない場合は、最新版 AdobeReader をダウンロードしてください。（無料です） ⇒ http://www.adobe.co.jp/products/acrobat/readstep2.html ■免責事項■ ・本レポートは、その記載内容について保障するものではありません。 ・本レポートに記載されている内容をご利用頂いた場合に、いかなる損害が発生したとしても、一 切の責任は負いかねますのでご了承願います。すべて自己責任の上、ご利用下さい。 ■著作権について■ 本レポートの内容の表記は、著作権法で保護されている著作物です。 本マニュアルは再配布は禁止と致します。また、以下の点をご精読の上、ご利用下さいませ。 ・本レポートの著作権は、コスパ（鈴木）にあります。著作権者の許可なく、このレポートの一部、 または全部を、いかなる手段においても複製、転載、流用、転売、公開、貸与することを禁じます。 ・本レポートの内容は、作成時点での著者の見解が含まれています。本レポートの内容の一部、ま たは全部を改変、編集することを禁じます。但し、著者は、事前許可なく、誤りの訂正、内容の改変 等を行うことが出来るものとします。 ・著作権等の違反行為を行った時、その他不法行為に該当する行為を行った時は、関係法規に基づ き損害賠償請求を行う等、民事・刑事を問わず、第三者機関を使った法的手段による解決を行う場合 があります。そう思ったものの、なんだかんだ書いていると、検索すればその辺で書いてい るようなことばかりしか思いつきませんでした。 それではコスパのマニュアルとしてなんの意味もない！そう考えた私は、それ からは深海へと飛び込み、沈んだまま帰ってくることはありませんでした… ここ最近、手打ちでサイトをつくっていて感じたことは、 「手打ちサイトで手軽にサイトはつくれない」ということです。 （必ず全員に言えることではありませんが…） 一から HTML を解説し、手打ちで作れるほどのスキルを あなたに提供する必要があるかどうか？ そう考えると、その必要はないという答えしか…。 サイトアフィリでは、ある程度数を重視する必要があります。 その上で必要なことは、 完璧を求めないこと いろんなキーワードをつかうこと 早くつくれること 手打ちで、これらをすべて賄うには、多くの時間と労力がかかります。（体験済） 覚えるまでも、覚えてからも。上記４点に力と時間を注ぐなら、 サイト作成はツールやプログラムにまかせるのが一番です。
この文書の在り方
とはいえ、ウェブサイトを運営するのであれば、HTML は避けては通れない と思ってもいいと思います。中には、難しいことはおぼえなくてもいいと、 HTML を使わないサイト作成ツールでなんとか事なきを得ようとしている人 やプレナーさんもいます。 で、私はどうすればいいのかと。 とりあえず、私が教えるんだから、覚えることを前提に考えよう！と。知らな いよりは知っている方がいい、という価値観が私にはあります。 それに、ブログやサイトのカスタマイズでは、HTML を触ることがしょっち ゅうあります。たとえば、 「このテンプレ、文字サイズちっちゃいな…大きくしよう」 「リンクが緑だよ。青で下線もつけたいから変えちゃおう」 ってときに、カンタンにできるといいですよね。 文字サイズが小さいとよみづらくストレスを与え、リンクがほかの色ではリン クとは分かりにくく、商品リンクに気づかずに離脱してしまうかもしれません。 その危険を回避する方法を知っていたら、万が一のときに役にたつと思いませ んか？ 覚えなくてもできるようになりたい！と、たとえばコピーだけで済ませたいな目次 このマニュアルについて ... 2 HTML のマニュアルをつくろう！ ... 3 この文書の在り方 ... 4 目次 ... 5 マークアップ ... 8 HTML 構造 全体 ... 9 各領域の中 ... 9 入力は全て半角英数字で！ ... 10 改行タグ ... 12 段落タグ ... 13 リンクをつける ... 14 a href＝ハイパーリンクをつける... 15 a href を覚えるには ... 15 この文章にリンクをつけたい場合 ... 16 画像を設置する ... 17 img src＝画像の URL を指定する ... 18 img src を覚えるには ... 18 ここに画像を設置したい場合 ... 19 今後出るのでとりあえず知ってほしい HTML タグ ... 20 <h1><h2><h3>～<h6>まであり ... 20 <span> ... 20 <div> ... 20 <form> ... 20 そのほかマークアップ編で紹介した HTML タグ ... 21
HTML の超基本
マークアップ
HTML の基礎であるマークアップに関しては、少し長いですが動画がありま すので、そちらをご覧ください。 http://simple-make.com/html/01-markup/ 本当になにもわからない人用に作成しているので、むだに長く、重複した説明 も多くなっています。 http://simple-make.com/html/02-build/ こちらではおさらいをしつつ、BODY 内のマークアップの説明もしています。 マークアップは、簡単に言えばタグで挟んで意味付けをするというような意 味でしたね。実際にウェブページを参考にしながら、どこのマークアップが どこを形作っているのかを説明しているので、HTML 文書とウェブページが どうなっているかまったくわからないという方は、見てみてください。 手っ取り早く覚えたい！という気持ちも分かるのですが、そんな簡単に覚えら れたら私も苦労してませんよってことで… ここでは、更に大雑把に構造をみておきましょう。HTML 構造 全体
各領域の中
このそれぞれの領域の中で、a タグや img タグ、span タグなどが使われます。 特に記事を表す article は一番お世話になる領域 （コンテンツの更新はここになります。HTML5 以外では、div id でマークアップされ、その id 名が article、contents、main などとなっていることが多いです）。 また、他のページへのリンクが集まった div id=menu 内は、 一番 a タグのお世話になる場所です。 ※div id の id 名には決まりがなく、わかりやすい名前が、各自の判断で付け られます。テンプレートの中身をみるときは、柔軟になって判断しましょう。 header article menu footer header タグでマークアップされた領域 article タグでマークアップされた領域 div id=menu でマークアップされた領域 footer タグでマークアップされた領域 BODY 内（HEAD は表に出ないので省略） ※HTML5 の場合
入力は全て半角英数字で！
最も重要なこと。 それは、必ず、入力は半角英数字で行うということです。<
a href
=”
http
://
cosspa.net
/”>
ブログへ
</
a
>
※ダブルクォーテーションが全角のように見えますが、フォントの関係で半角が大きくなっています… うまくタグの設置がいかない場合、 英数字や記号が全角になっている場合が非常に多いです。 普段入力するときは文字が小さく、わかりづらいことが多いですが、 それは経験からのひらめきでカバーしましょう（それまでは経験しましょう）。 半角スペース 半角英数字と半角記号誰もが覚えるべき
HTML タグ
それではどんなタグがあるのかを説明していきます。 とくにアフィリエイトで使うものを中心に説明しています。 自分でつかうことがない場合でも、ソースを見れるように しておくことは重要ですから、自分でも普段から見るようにしておきましょう。<br>
改行タグ
HTML タグはマークアップが基本ですが、タグ単体で効果が出るタグもあり ます。その一つが<br>タグ。 難しいことは考えず、改行するときは<br>を入れる と考えれば良いです。 例文） 通常のテキストでは、通常通りに改行すれば、 読みやすく整理できますね。 途中で改行する方が、ストレスレスに文章を読ませることができます。 HTML 文書では、br タグを使わないと、<br> このように改行することができません。<br><p>
段落タグ
恐らく、もっとも使うタグ。 段落ごとに、この p タグでマークアップして段落をつくります。 <p>段落とは、ここでは詳しく説明をしませんが、センテンスのひとかたまり と考えてください。一つの段落で話すのは、一つのことだけ。たとえばここで は段落の話をしています。</p> <p>では次に、単語ごとの説明をしていきましょう、と、別の話をするときは 段落を分けます。一つの段落で一つの話をすると、全体的にも文章が読みやす くなります。</p> <p>この段落分けが難しい場合は、あまり考えなくてもいいです。改行したい ときに p タグを使う、という感じで、とりあえず大丈夫です。</p><a>
<a href=”http://yahoo.co.jp/”>リンク先へ
</a>
リンクをつける
主にハイパーリンクをつけます。 クリックするだけですぐに任意のページにアクセスできるようにします。 自分の紹介したいページを紹介するとき、SEO 対策で被リンクを送るとき、 アフィリリンクを貼って商品を紹介するときなどに使います。 これを覚えないとアフィリエイトが始まらないようなタグ。 a は anchor（アンカー＝いかり）の略。a href＝ハイパーリンクをつける
最も使う形はこれ↓
<a href=”http://cosspa.net/”>ブログへ</a>
<a href=”http://～～/">アンカーテキスト</a>
リンク先の URL リンクしたいテキスト
<a href=～～> </a>
a href を覚えるには
私は「エーエイチレフ」と呼んでます。
この文章にリンクをつけたい場合
例文） <p>HTML タグをつかわないとどうなるのか？<br> プレーンテキスト上では、Enter キーを押せば改行で きますが、 ブラウザはその改行が理解できません。 文字だけ捉えて、画面上に表示します。</p> <p>HTML タグは、ブラウザに「ここが改行だよ」っ て、教えて上げるために 使うっていうふうに覚えて おくといいでしょう。</p> <p>では下をクリックして確認してみてください。 </p> <p>＞＞こちらをクリック＜＜</p> <p>では下をクリックして確認してみてください。 </p> <p><a href=”http://simple-make.com/html/01-mark 表示例 ＞＞こちらをクリック＜＜ ＞＞こちらをクリック＜＜<img>
<img src=”http://cosspa.com/img.jpg”>
画像を設置する
画像を設置（表示）するときに使います。 img はイメージと読めば覚えやすいでしょう。 HTML を触っていると、なんかいも出てきます。 画像が表示されないぞ…？ってときに疑うところがここ。img src＝画像の URL を指定する
最も使う形はこれ↓ <img src=”http://cosspa.com/img.jpg”> <img src=”http://～～/”> 画像の URL（場所）<img src=～～>
img src を覚えるには
私は「イメージエスアールシー」と呼んでます。 img 要素の src 属性 最後の閉じタグはありませんここに画像を設置したい場合
例文） <p>今話題になっている目覚まし時計を知っています か？</p> <p>普通、目覚まし時計と言えば音で起きるもので、 どのくらいの大きさを鳴らすのか？というところを 中心に選ぶと思います。</p> <p>ところが今、音ではなく、べつのもので起こして くれる、特殊な目覚まし時計があるらしいのです！ </p> <p>それがこれ↓</p> <p>見て分かるでしょうか？そう、なんと、光で優し く起こしてくれるのです！</p> <p>それがこれ↓</p> <img src=”http://simple-make.com/test.jpg”> <p>見て分かるでしょうか？そう、なんと、光で優し く起こしてくれるのです！</p> 表示例 それがこれ↓ それがこれ↓今後出るのでとりあえず知ってほしい HTML タグ
<h1><h2><h3>～<h6>まであり
別名、見出しタグ。 SEO 上、重要な役割をもつ。これを意識して文章を組立て れば、分かりやすく構築できます。<span>
スタイルシートを適用するインライン要素。 この文字色変えたいな～、ここだけ大きくしたいな～って ときなどに、暫定的に使うタグ。<div>
スタイルシートを適用するブロック要素。 メニュー用の領域をつくる、特定の背景画像を埋め込むな どのために、暫定的に使うタグ。<form>
自分でつくることはほとんどないとおもいます。 アンケートや問い合わせ用フォームを設置するときにお世話になるタグ。 とくにカスタマイズのときに、場所の手がかりになるので、 知っておきましょう。そのほかマークアップ編で紹介した HTML タグ
HTML…HTML 文書であることを定義します。 HEAD…HEAD 領域をマークアップします。 BODY…BODY 領域をマークアップします。 ※以下は HTML5 専用 header…タイトルやトップ画像を設置します。 （HTML5 以外のマークアップ例：div id=”header”など） nav…ナビメニューを設置します。 （HTML5 以外のマークアップ例：div id=”navigation”など） article…記事本編を設置します。（HTML5 以外のマークアップ例：div id=”article（main,contents）など”） footer…権利表記のほか、ここにメニューを置くこともあります。
最後に
アフィリエイターとしては、使うタグは限られてくると思います。 やっぱり、サイト作成に関してはツールに任せちゃった方が 早いし、ブログや無料 HP スペースに関しては、テンプレート を使った方が早いからです。 それでも、自分自身は、できないよりはできる方がいい、 という価値観をもっていて、結局知識として知らないと、使う かどうか分からないのです。他人の意見だけでモノを決めたく ないので。 本レポートが、あなたの日々の活動の一助になれば幸いです。 次は、属性についてです。それではまた！継続することは大変で、苦労するかもしれません。 苦労した分、倍返しで成功しましょう！
