Copyright 資格とっ太郎 All Rights Reserved

Size: px

Start display at page:

みさええいさか
5 years ago
Views:

2 こんにちは資格とっ太郎ですここでは HTML の知識について学んでいきたいと思いますサイトを作成するのは基本的にはツールで作ってしまうのですが最低限の HTML の知識が無いとあれなんかレイアウトが崩れちゃったぞなんか思ったより画像が小さく表示されちゃったぞちょっと自分好みにカスタマイズしたいんだけどなみたいなことに対応できませんですのでここでは一緒に HTML を勉強していきましょう 1 HTML とはなにか? さっきから HTML HTML と当たり前のように書いていますが HTML とは WEB サイトを構成するためのプログラム言語のようなものだと思ってください例えばこちらのサイト僕のメール講座の募集ページなんですがここにアクセスするとこんな画面になります Copyright 2014 資格とっ太郎 All Rights Reserved - 2 -

4 これがいわゆる HTML ソースですで人間が見るとなんだかややこしい感じになっちゃいますがこの HTML ソースをインターネットエクスプローラーなりサファリなりグーグルクロームといったウェブブラウザが読みこむと普段僕らがインターネットを閲覧するような感じで表示してくれるというわけですどうでしょうか? 考え方自体はそんなに難しくないですよね? ではではこういった HTML ソースは基本的にサイト作成ツールが自動的に作ってくれるものなのですが最低限覚えておいた方がいい HTML のことをもう少し勉強していきましょう 2 タグってなに? HTML はタグと呼ばれるもので構成されていてこのタグによってサイトが構成されていますさきほど紹介した僕の作りかけのサイトの HTML ソースをご覧くださいなんだか < とか > で囲まれたものがたくさんありますよね? それがタグですそのタグ一つ一つに意味があって例えば <html> </html> というタグはこれは HTML で書かれたものですよ ~ というのを表していますそしてタグには開始タグと終了タグというものもあって開始タグと終了タグのあいだに書かれているものに効果を発揮するというのが基本的な考え方です Copyright 2014 資格とっ太郎 All Rights Reserved - 4 -

5 例えばさっきの <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 -

6 マーケティングというキーワードをアピールすることができます <title> </title> タイトルタグですこのタグのあいだにページのタイトルを記載しますこちらもヘッダー内に書かれるページ情報ですのでブラウザでは表示されません <body> </body> これで囲まれた部分はページの本体部分ですつまりここで囲まれた部分がやっとブラウザで表示されて人の目に触れる部分になります <p> </p> これは段落を指定するタグですこれに囲まれた文章が一つの段落として認識されて </p> タグの終わりには自動的に改行が入ります <br/> これは単純に改行するためのタグですこれを記述すると一行改行されます文章とか画像の表示位置をずらしたいときには良く使います <img> 画像を表示させるタグです使用例 : <img src=" ここに画像の場所を記載 " style="width:600px;" /> (width:600px; のところで画像の表示の大きさを指定しています ) Copyright 2014 資格とっ太郎 All Rights Reserved - 6 -

7 <a> リンクタグですリンクを貼りたい時に使用します使用例 : <a href=" ここにリンク先 URL を記載 "> リンクを設定したい文字や画像 </a> というわけでいちおう僕が普段自分でいじることもあるような基本的な HTML タグを紹介しましたあまり深く踏み込むと例によって結構泥沼なんで ( 笑 ) 最初はこのくらいを覚えておけば基本的なサイト作成は大丈夫ですあと CSS っていう言葉もありますがこれについては僕にもほとんどわかりません ( 汗 ) ですがサイトを作る時は一応覚えておいた方がいいので考え方だけ紹介します 3 CSS ってなに? CSS とはスタイルシートといってその名の通りサイトのスタイルを指定する記述です通常の場合 HTML ファイルには文字情報や画像情報やリンク情報といったコンテンツと最低限の改行くらいしか指定されていないんですがじゃあどうやって普段僕らが見ているようなキレイに整ったサイトになるのでしょうか? それを解決するのが CSS です Copyright 2014 資格とっ太郎 All Rights Reserved - 7 -

8 つまり CSS は見た目 ( レイアウトやデザインなど ) を整えるための記述だと思っていただければ良いと思います例えばページの中の上から 300px はヘッド部分にして左から 200px をメニュー欄にして中央の横幅 800px を本文にして本文にはこういう文字フォントを使用して色はヘッド部分の文字の大きさは 50px でフォントと色はみたいなものを CSS で指定するのが普通ですですので普通サイト作成ツールでサイトを作ると html ファイルと css ファイルが自動的に出力されます (.html.css ) あと画像ファイルとかも当然出力されますがなにもわからずにファイルを見るとなんだかいろんなものが出来上がってるなぁくらいにしか思いませんが実はそれぞれのファイルにはそういう役割があるのでこのくらいは最低限覚えておいてくださいねそれでは HTML の知識はこの辺にしておきましょうというかこの程度の知識さえあればサイトなんて全然作れますから ( 笑 ) でわからないタグとかこの文字を中央寄せにしたいみたいな場合が出てきた時はその都度 Google 大先生に聞けばだいたい解決できますそれでは今日はここまでです Copyright 2014 資格とっ太郎 All Rights Reserved - 8 -

9 HTML はタグの使い方を全部覚えるというよりも必要な時に必要なタグを調べて使える程度のことができればだいたい OK ですプログラマーでもない限り普通の人がタグを全部覚えていたところでオーバースペックなんでその時間は他に使ってください次回はいよいよサイト作成ツールについての説明になります例によってサイト作成ツールを選ぶときに一番大事なのはみたいなことになってますもしこの時点でに入る言葉がぱっと思いついたらすごく感が鋭いですよあっもちろんですが一番大事と言っても僕の個人的な考えですのでどんな人にもどんな場合にも一番大事というわけではなくてあくまでこれからインターネットでビジネスを始めて理想の働き方を実現していく人つまり Infinity 参加者にとって一番大事だろうと僕が思うことですヒントは今まで Infinity で配ったレポートの中にに入る文字は隠されています三文字です操作性も一見大事そうに見えますが ( もちろん大事ですが ) もっと大事なものがありますせっかくなので想像力を働かせて考えてみてくださいね今回はちょっと難しいかもしんないですけど ^^;) それでは Infinity も残り 2 日です! 最後までよろしくお願いします Copyright 2014 資格とっ太郎 All Rights Reserved - 9 -

◎phpapi.indd

◎phpapi.indd PHP や HTML の知識がなくても大丈夫 PHP や HTML の基本も学べる FileMaker データベースを Web に公開したい FileMaker を使って動的な Web サイトを作りたい FileMaker しか知らない人が Web アプリケーションを作れるようになる! はじめにまず本書を手に取ってくださりありがとうございます本書はある程度 FileMaker Pro の扱いに慣れ