このマニュアルについて推薦環境このレポート上に書かれている URL はクリック可能です出来ない場合は最新版 AdobeReader をダウンロードしてください ( 無料です ) 免責

Size: px

Start display at page:

Download "このマニュアルについて推薦環境このレポート上に書かれている URL はクリック可能です出来ない場合は最新版 AdobeReader をダウンロードしてください ( 無料です ) 免責"

はなはやしもと
5 years ago
Views:

1 HTML CSS 講座初級編 HTML セクション 3 時限目誰もが覚えるべき HTML タグ著 : コスパ ( 鈴木 ) 1

2 このマニュアルについて推薦環境このレポート上に書かれている URL はクリック可能です出来ない場合は最新版 AdobeReader をダウンロードしてください ( 無料です ) 免責事項本レポートはその記載内容について保障するものではありません本レポートに記載されている内容をご利用頂いた場合にいかなる損害が発生したとしても一切の責任は負いかねますのでご了承願いますすべて自己責任の上ご利用下さい著作権について本レポートの内容の表記は著作権法で保護されている著作物です本マニュアルは再配布は禁止と致しますまた以下の点をご精読の上ご利用下さいませ本レポートの著作権はコスパ( 鈴木 ) にあります著作権者の許可なくこのレポートの一部または全部をいかなる手段においても複製転載流用転売公開貸与することを禁じます本レポートの内容は作成時点での著者の見解が含まれています本レポートの内容の一部または全部を改変編集することを禁じます但し著者は事前許可なく誤りの訂正内容の改変等を行うことが出来るものとします著作権等の違反行為を行った時その他不法行為に該当する行為を行った時は関係法規に基づき損害賠償請求を行う等民事刑事を問わず第三者機関を使った法的手段による解決を行う場合があります 2

3 HTML のマニュアルをつくろう! そう思ったもののなんだかんだ書いていると検索すればその辺で書いているようなことばかりしか思いつきませんでしたそれではコスパのマニュアルとしてなんの意味もない! そう考えた私はそれからは深海へと飛び込み沈んだまま帰ってくることはありませんでしたここ最近手打ちでサイトをつくっていて感じたことは手打ちサイトで手軽にサイトはつくれないということです ( 必ず全員に言えることではありませんが ) 一から HTML を解説し手打ちで作れるほどのスキルをあなたに提供する必要があるかどうか? そう考えるとその必要はないという答えしかサイトアフィリではある程度数を重視する必要がありますその上で必要なことは完璧を求めないこといろんなキーワードをつかうこと早くつくれること手打ちでこれらをすべて賄うには多くの時間と労力がかかります ( 体験済 ) 覚えるまでも覚えてからも上記 4 点に力と時間を注ぐならサイト作成はツールやプログラムにまかせるのが一番です 3

4 この文書の在り方とはいえウェブサイトを運営するのであれば HTML は避けては通れないと思ってもいいと思います中には難しいことはおぼえなくてもいいと HTML を使わないサイト作成ツールでなんとか事なきを得ようとしている人やプレナーさんもいますで私はどうすればいいのかととりあえず私が教えるんだから覚えることを前提に考えよう! と知らないよりは知っている方がいいという価値観が私にはありますそれにブログやサイトのカスタマイズでは HTML を触ることがしょっちゅうありますたとえばこのテンプレ文字サイズちっちゃいな大きくしようリンクが緑だよ青で下線もつけたいから変えちゃおうってときにカンタンにできるといいですよね文字サイズが小さいとよみづらくストレスを与えリンクがほかの色ではリンクとは分かりにくく商品リンクに気づかずに離脱してしまうかもしれませんその危険を回避する方法を知っていたら万が一のときに役にたつと思いませんか? 覚えなくてもできるようになりたい! とたとえばコピーだけで済ませたいなど考えはあるかもしれませんが私はそれには答えることはできないということでご理解ください (HTML について知ってくるとなぜできないか分かってきますよ ) 今より一歩先に進めるあなたを楽しみにしています 4

5 目次目次このマニュアルについて... 2 HTML のマニュアルをつくろう!... 3 この文書の在り方... 4 目次... 5 マークアップ... 8 HTML 構造全体... 9 各領域の中... 9 入力は全て半角英数字で! 改行タグ段落タグリンクをつける a href= ハイパーリンクをつける a href を覚えるにはこの文章にリンクをつけたい場合画像を設置する img src= 画像の URL を指定する img src を覚えるにはここに画像を設置したい場合今後出るのでとりあえず知ってほしい HTML タグ <h1><h2><h3>~<h6> まであり <span> <div> <form> そのほかマークアップ編で紹介した HTML タグ

6 最後に

7 HTML の超基本 HTML の説明を始める前に知っておいてほしいこと 7

8 マークアップ HTML の基礎であるマークアップに関しては少し長いですが動画がありますのでそちらをご覧ください本当になにもわからない人用に作成しているのでむだに長く重複した説明も多くなっていますこちらではおさらいをしつつ BODY 内のマークアップの説明もしていますマークアップは簡単に言えばタグで挟んで意味付けをするというような意味でしたね実際にウェブページを参考にしながらどこのマークアップがどこを形作っているのかを説明しているので HTML 文書とウェブページがどうなっているかまったくわからないという方は見てみてください手っ取り早く覚えたい! という気持ちも分かるのですがそんな簡単に覚えられたら私も苦労してませんよってことでここでは更に大雑把に構造をみておきましょう 8

9 HTML 構造全体 BODY 内 (HEAD は表に出ないので省略 ) header menu article header タグでマークアップされた領域 article タグでマークアップされた領域 div id=menu でマークアップされた領域 footer footer タグでマークアップされた領域 HTML5 の場合各領域の中このそれぞれの領域の中で a タグや img タグ span タグなどが使われます特に記事を表す article は一番お世話になる領域 ( コンテンツの更新はここになります HTML5 以外では div id でマークアップされその id 名が article contents main などとなっていることが多いです ) また他のページへのリンクが集まった div id=menu 内は一番 a タグのお世話になる場所です div id の id 名には決まりがなくわかりやすい名前が各自の判断で付けられますテンプレートの中身をみるときは柔軟になって判断しましょう 9

10 入力は全て半角英数字で! 最も重要なことそれは必ず入力は半角英数字で行うということです <a href= > ブログへ </a> 半角スペース半角英数字と半角記号ダブルクォーテーションが全角のように見えますがフォントの関係で半角が大きくなっていますうまくタグの設置がいかない場合英数字や記号が全角になっている場合が非常に多いです普段入力するときは文字が小さくわかりづらいことが多いですがそれは経験からのひらめきでカバーしましょう ( それまでは経験しましょう ) 10

11 誰もが覚えるべき HTML タグそれではどんなタグがあるのかを説明していきますとくにアフィリエイトで使うものを中心に説明しています自分でつかうことがない場合でもソースを見れるようにしておくことは重要ですから自分でも普段から見るようにしておきましょう 11

12 <br> 改行タグ HTML タグはマークアップが基本ですがタグ単体で効果が出るタグもありますその一つが <br> タグ難しいことは考えず改行するときは <br> を入れると考えれば良いです例文 ) 通常のテキストでは通常通りに改行すれば読みやすく整理できますね途中で改行する方がストレスレスに文章を読ませることができます HTML 文書では br タグを使わないと <br> このように改行することができません <br> ただし何個も使うのは決まり的にはよくないですなんでかって? 興味があるなら検索して調べてみてください 12

13 <p> 段落タグ恐らくもっとも使うタグ段落ごとにこの p タグでマークアップして段落をつくります <p> 段落とはここでは詳しく説明をしませんがセンテンスのひとかたまりと考えてください一つの段落で話すのは一つのことだけたとえばここでは段落の話をしています </p> <p> では次に単語ごとの説明をしていきましょうと別の話をするときは段落を分けます一つの段落で一つの話をすると全体的にも文章が読みやすくなります </p> <p> この段落分けが難しい場合はあまり考えなくてもいいです改行したいときに p タグを使うという感じでとりあえず大丈夫です </p> 13

14 <a> <a href= > リンク先へ </a> リンクをつける主にハイパーリンクをつけますクリックするだけですぐに任意のページにアクセスできるようにします自分の紹介したいページを紹介するとき SEO 対策で被リンクを送るときアフィリリンクを貼って商品を紹介するときなどに使いますこれを覚えないとアフィリエイトが始まらないようなタグ a は anchor( アンカー = いかり ) の略 14

15 a href= ハイパーリンクをつける最も使う形はこれ <a href= > ブログへ </a> <a href= アンカーテキスト </a> リンク先の URL リンクしたいテキスト <a href=~~> </a> a 要素の href 属性最後は必ず閉じる a href を覚えるには私はエーエイチレフと呼んでます 15

16 この文章にリンクをつけたい場合例文 ) <p>html タグをつかわないとどうなるのか?<br> プレーンテキスト上では Enter キーを押せば改行できますがブラウザはその改行が理解できません文字だけ捉えて画面上に表示します </p> <p>html タグはブラウザにここが改行だよって教えて上げるために使うっていうふうに覚えておくといいでしょう </p> <p> では下をクリックして確認してみてください </p> <p>>> こちらをクリック <<</p> 表示例 >> こちらをクリック << <p> では下をクリックして確認してみてください </p> >> こちらをクリック << <p><a href= up/use.html >>> こちらをクリック <<</a></p> <p> で囲む ( マークアップ ) する必要はありません 16

17 <img> <img src= > 画像を設置する画像を設置 ( 表示 ) するときに使います img はイメージと読めば覚えやすいでしょう HTML を触っているとなんかいも出てきます画像が表示されないぞ? ってときに疑うところがここ 17

18 img src= 画像の URL を指定する最も使う形はこれ <img src= > <img src= > 画像の URL( 場所 ) <img src=~~> img 要素の src 属性最後の閉じタグはありません img src を覚えるには私はイメージエスアールシーと呼んでます 18

ここに画像を設置したい場合例文 ) <p> 今話題になっている目覚まし時計を知っていますか?</p> <p> 普通目覚まし時計と言えば音で起きるものでどのくらいの大きさを鳴らすのか? というところを中心に選ぶと思います </p> <p> ところが今音ではなくべつのもので起こしてくれる特殊な目覚まし時計があるらしいのです!

19 ここに画像を設置したい場合例文 ) <p> 今話題になっている目覚まし時計を知っていますか?</p> <p> 普通目覚まし時計と言えば音で起きるものでどのくらいの大きさを鳴らすのか? というところを中心に選ぶと思います </p> <p> ところが今音ではなくべつのもので起こしてくれる特殊な目覚まし時計があるらしいのです! </p> <p> それがこれ </p> 表示例 <p> 見て分かるでしょうか? そうなんと光で優しく起こしてくれるのです!</p> それがこれ <p> それがこれ </p> それがこれ <img src= > <p> 見て分かるでしょうか? そうなんと光で優しく起こしてくれるのです!</p> 19

20 今後出るのでとりあえず知ってほしい HTML タグ <h1><h2><h3>~<h6> まであり別名見出しタグ SEO 上重要な役割をもつこれを意識して文章を組立てれば分かりやすく構築できます <span> スタイルシートを適用するインライン要素この文字色変えたいな~ ここだけ大きくしたいな~ ってときなどに暫定的に使うタグ <div> スタイルシートを適用するブロック要素メニュー用の領域をつくる特定の背景画像を埋め込むなどのために暫定的に使うタグ <form> 自分でつくることはほとんどないとおもいますアンケートや問い合わせ用フォームを設置するときにお世話になるタグとくにカスタマイズのときに場所の手がかりになるので知っておきましょう 20

21 そのほかマークアップ編で紹介した 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 権利表記のほかここにメニューを置くこともあります (HTML5 以外のマークアップ例 :div id= footer など ) 21

22 最後にアフィリエイターとしては使うタグは限られてくると思いますやっぱりサイト作成に関してはツールに任せちゃった方が早いしブログや無料 HP スペースに関してはテンプレートを使った方が早いからですそれでも自分自身はできないよりはできる方がいいという価値観をもっていて結局知識として知らないと使うかどうか分からないのです他人の意見だけでモノを決めたくないので本レポートがあなたの日々の活動の一助になれば幸いです次は属性についてですそれではまた! 22

23 継続することは大変で苦労するかもしれません苦労した分倍返しで成功しましょう! 質問などはこちらまで 23

Microsoft Word - MOBO

Microsoft Word - MOBO 画像にモザイクモザイクぼかし楽々使い方 ( 画像付き ) まっきー著推奨環境このレポート上に書かれている URL はクリックできますできない場合は最新の Adobe Reader を無料でダウンロードしてください http://www.adobe.co.jp/products/acrobat/readstep2.html 著作権についてこのレポートは著作権法で保護されている著作物です

このマニュアルについて 推薦環境 このレポート上に書かれている URL はクリック可能です 出来ない場合は 最新版 AdobeReader をダウンロードしてください ( 無料です ) 免責

このマニュアルについて推薦環境このレポート上に書かれている URL はクリック可能です出来ない場合は最新版 AdobeReader をダウンロードしてください ( 無料です ) 免責