WEB サイトの作り方 その 2(HTML 編 ) 製作 : 資格とっ太郎 Copyright 2014 資格とっ太郎 All Rights Reserved - 1 -
こんにちは 資格とっ太郎です ここでは HTML の知識について学んでいきたいと思います サイトを作成するのは 基本的にはツールで作ってしまうのですが 最低限の HTML の知識が無いと あれ なんかレイアウトが崩れちゃったぞ なんか思ったより画像が小さく表示されちゃったぞ ちょっと自分好みにカスタマイズしたいんだけどな みたいなことに対応できません ですので ここでは一緒に HTML を勉強していきましょう 1 HTML とはなにか? さっきから HTML HTML と当たり前のように書いていますが HTML とは WEB サ イトを構成するためのプログラム言語のようなものだと思ってください 例えば こちらのサイト http://jscatch.com/ 僕のメール講座の募集ページなんですが ここにアクセスするとこんな画面に なります Copyright 2014 資格とっ太郎 All Rights Reserved - 2 -
で サイトの適当なところで右クリックをして ソースを表示 というところ をクリックすると こんな画面が出てきます Copyright 2014 資格とっ太郎 All Rights Reserved - 3 -
これがいわゆる HTML ソース です で 人間が見ると なんだかややこしい感じになっちゃいますが この HTML ソ ースをインターネットエクスプローラーなり サファリなり グーグルクロー ムといった ウェブブラウザが読みこむと 普段僕らがインターネットを閲覧するような感じで表示してくれる というわ けです どうでしょうか? 考え方自体はそんなに難しくないですよね? ではでは こういった HTML ソースは基本的にサイト作成ツールが自動的に作っ てくれるものなのですが 最低限覚えておいた方がいい HTML のことをもう少し 勉強していきましょう 2 タグ ってなに? HTML は タグ と呼ばれるもので構成されていて この タグ によって サ イトが構成されています さきほど紹介した僕の作りかけのサイトの HTML ソースをご覧ください なんだか < とか > で囲まれたものがたくさんありますよね? それがタグです そのタグ一つ一つに意味があって 例えば <html> </html> というタグは これは HTML で書かれたものですよ ~ というのを表しています そしてタグには 開始タグ と 終了タグ というものもあって 開始タグと 終了タグのあいだに書かれているものに効果を発揮する というのが基本的な 考え方です Copyright 2014 資格とっ太郎 All Rights Reserved - 4 -
例えばさっきの <html> 了タグです </html> だと <html> が開始タグで </html> が終 で その間に書かれているものに対して HTML で記述されています というこ とを示す役割になります と こんなイメージで HTML の記述をいじる場合は 基本的にはタグの操作と か修正になるので 基本的なタグは覚えておきましょう! <html> </html> 先ほど説明した通り HTML で記述されていることを示すタグです <head> </head> この <head> タグで囲まれた部分は ヘッダー と呼ばれて ページの情報を書き込む場所になります ページタイトルや 重要キーワード サイトの要約文などなど で この <head></head> の中に記述されたものは 基本的にブラウザでは表示されません <meta> これはヘッダーの中に記述するタグです 終了タブはありません いろいろ用途がありますが 主に検索エンジン向けにキーワードをアピールする場合や サイトの要約文を記述するときに使われます 文字コードを指定する場合にも使われます 使用例 : <meta name="keywords" content=" マーケティング, ダイレクトマーケティング " /> さっき紹介したサイトのキーワードアピールの部分です これを記述することで 検索エンジンに対して マーケティング ダイレクト Copyright 2014 資格とっ太郎 All Rights Reserved - 5 -
マーケティング というキーワードをアピールすることができます <title> </title> タイトルタグです このタグのあいだにページのタイトルを記載します こちらもヘッダー内に書かれるページ情報ですので ブラウザでは表示されません <body> </body> これで囲まれた部分は ページの本体部分です つまり ここで囲まれた部分が やっとブラウザで表示されて 人の目に触れる部分になります <p> </p> これは段落を指定するタグです これに囲まれた文章が一つの段落として認識されて </p> タグの終わりには自動的に改行が入ります <br/> これは単純に改行するためのタグです これを記述すると一行改行されます 文章とか画像の表示位置をずらしたいときには 良く使います <img> 画像を表示させるタグです 使用例 : <img src=" ここに画像の場所を記載 " style="width:600px;" /> (width:600px; のところで画像の表示の大きさを指定しています ) Copyright 2014 資格とっ太郎 All Rights Reserved - 6 -
<a> リンクタグです リンクを貼りたい時に使用します 使用例 : <a href=" ここにリンク先 URL を記載 "> リンクを設定したい文字や画像 </a> というわけで いちおう僕が普段 自分でいじることもある ような 基本的 な HTML タグを紹介しました あまり深く踏み込むと 例によって結構泥沼なんで ( 笑 ) 最初はこのくらいを 覚えておけば 基本的なサイト作成は大丈夫です あと CSS っていう言葉もありますが これについては僕にもほとんどわかりま せん ( 汗 ) ですが サイトを作る時は一応覚えておいた方がいいので 考え方だけ紹介し ます 3 CSS ってなに? CSS とは スタイルシートといって その名の通りサイトの スタイル を指定 する記述です 通常の場合 HTML ファイルには文字情報や画像情報やリンク情報といった コ ンテンツ と 最低限の改行くらいしか指定されていないんですが じゃあどうやって 普段僕らが見ているような キレイに整った サイトにな るのでしょうか? それを解決するのが CSS です Copyright 2014 資格とっ太郎 All Rights Reserved - 7 -
つまり CSS は見た目 ( レイアウトやデザインなど ) を整えるための記述だと思 っていただければ良いと思います 例えば ページの中の 上から 300px はヘッド部分にして 左から 200px をメニュー欄にして 中央の横幅 800px を本文にして 本文にはこういう文字フォントを使用して 色は ヘッド部分の文字の大きさは 50px で フォントと色は みたいなものを CSS で指定するのが普通です ですので 普通サイト作成ツールでサイトを作ると html ファイルと css ファ イルが自動的に出力されます (.html.css ) あと画像ファイルとかも当然出力されますが なにもわからずにファイルを見ると なんだかいろんなものが出来上がってる なぁ くらいにしか思いませんが 実はそれぞれのファイルにはそういう役割 があるので このくらいは最低限覚えておいてくださいね それでは HTML の知識はこの辺にしておきましょう というか この程度の知識さえあれば サイトなんて全然作れますから ( 笑 ) で わからないタグとか この文字を中央寄せにしたい みたいな場合が出て きた時は その都度 Google 大先生 に聞けば だいたい解決できます それでは今日はここまでです Copyright 2014 資格とっ太郎 All Rights Reserved - 8 -
HTML は タグの使い方を全部覚えるというよりも 必要な時に必要なタグを調 べて使える程度のことができれば だいたい OK です プログラマーでもない限り 普通の人がタグを全部覚えていたところでオーバ ースペックなんで その時間は他に使ってください 次回は いよいよサイト作成ツールについての説明になります 例によって サイト作成ツールを選ぶときに一番大事なのは みたいなことになってます もしこの時点で に入る言葉がぱっと思いついたら すごく感が鋭いです よ あっ もちろんですが 一番大事 と言っても 僕の個人的な考えですので どんな人にも どんな場合にも一番大事 というわけではなくて あくまで これからインターネットでビジネスを始めて 理想の働き方 を実 現していく人 つまり Infinity 参加者にとって 一番大事だろうと僕が思うこ とです ヒントは 今まで Infinity で配ったレポートの中に に入る文字は隠され ています 三文字です 操作性 も一見大事そうに見えますが ( もちろん大事ですが ) もっと大事な ものがあります せっかくなので想像力を働かせて考えてみてくださいね 今回はちょっと難しいかもしんないですけど ^^;) それでは Infinity も残り 2 日です! 最後までよろしくお願いします Copyright 2014 資格とっ太郎 All Rights Reserved - 9 -