HTMLとは何か理解しよう

概要!!

このビデオは、Webページを作成するためのHTMLとCSSの基本的なマークアップとスタイリングに関するチュートリアルです。講師は与えられたデザイン案をもとに、HTMLファイルを新規作成し、ページに必要なテキスト、画像、リンク、リストを適切なHTMLタグを使って配置する過程を説明しています。メニューの作成には

と
• タグが使われ、画像や説明文はと

  タグでマークアップされます。さらに、ページの各セクションに意味を持たせるために、

  や

  のような見出しタグが用いられています。

  その後、CSSを使用してページをスタイリッシュにするために、HTML要素にクラス名を付ける方法が解説されます。最終的に、講師はブラウザでの確認を通じて、作成したページのレイアウトと機能が意図した通りに動作しているかを検証します。このビデオは、Web開発初学者が実際にコードを書きながら、基本的なWebページの構造とスタイルを理解するのに役立つ内容となっています。!!!!!!！！！！

  本文

  content_copyコードをコピーする

  zoom_out_map

  0:11
  はいどうもこんにちは。HTMLの書き方を今日は学びましょう
  0:17
  HTMLね、基本的に4を使っていきます。今は5というのが出てますけれども
  0:24
  まだ全てのブラウザに対応ということではないので
  0:28
  基本的な4を学んでいきましょうと。じゃあここですね
  0:33
  今日の内容、何するかといいますとHTMLとは何か
  0:38
  あとはそのHTMLを書く為の基本的なツールの紹介、
  0:42
  あとはデモを見ながら概要を掴む。私がデモを行いますので
  0:47
  どんな感じかというのを掴んでください。
  0:51
  じゃあ早速ですねHTMLとは、文書に意味付けをするための言語です
  0:57
  デザインをするための言語ではないということですね
  1:01
  どういうことかというと例えばビートルズを紹介するページがあったとします
  1:07
  で、例えばWikipediaとかでねあるようなページですけどビートルズが
  1:12
  紹介されています。で人間はこの文書の構造ですね
  1:18
  大きい文字であったり写真があったり、あとは文字の色であるとか
  1:23
  でその意味を理解するわけです。でもロボットはですね
  1:32
  この色とか大きさではその文書、どこが重要で
  1:38
  目立たせたい部分であるかとかっていうのはロボットは理解できません
  1:43
  で、HTMLとはポインターレッドでねWebサイトというのは
  1:48
  なるべくその自動的に判断して自動的に
  1:52
  処理しようというようなものですので
  1:55
  このロボットにね、わかりやすいような言語で書かないといけない
  1:58
  だから文字を大きくしたりしてもこのロボットには通じないので
  2:02
  あまり意味ないんですね。で、どうするかというと
  2:06
  文書をマークアップしていきます。
  2:09
  で、ここは書いてあるようにh1,<,/h1と書いてある所ありますけれど
  2:17
  ここは大見出しだよということが書かれてます。
  2:22
  これロボットがね理解できるわけ。
  2:24
  でここにh2って書いてあるのは中見出しだよ、h3は小見出しだよ
  2:29
  このように文書をHTMLタグで囲んであげると
  2:34
  ロボットも理解して自動的に処理できるようになるわけですね
  2:42
  グーグルロボットも大喜びと。で再びHTMLとは
  2:48
  機械でも判断できるように文書をマークアップするためのもの
  2:52
  機械が自動処理できるようにするためにhtmlはあります。
  2:56
  グーグルのような検索エンジンは内容をタグで理解する
  3:00
  タグに気を付けてないと適切な検索結果として反映されない、そうなんです
  3:05
  タグを上手く書かないと
  3:07
  グーグルで検索して色々なページへいくと思うんですけれども、結局は
  3:11
  その検索結果は出てこないんで誰も訪れないページになってしまう。なので
  3:17
  しっかりとHTMLタグを書いてあげましょうという。
  3:20
  で、そのHTMLに意味付けをしてロボットに何が書いてあるか
  3:25
  わからせてあげましょうということです。じゃあHTMLの基本的な構造
  3:32
  さっそくね書いていきたいんですけれども、まずツールです。
  3:38
  HTMLを書くためには文字が書けるテキストエディタ何でもいいんですけれども
  3:44
  例えばWindowsを使っている方であればメモ帳でもいいです
  3:49
  でもメモ帳だとあまりね、HTML書いたときに
  3:53
  色分けされなかったり、あまり適していないので
  3:56
  サクラエディタとかっていうのが無料でありますので
  4:00
  そちらをダウンロードして使うといいかもしれません。
  4:03
  macの場合はMi、ミーというのでしょうかね
  4:06
  がありますので、これもフリーで配布されているソフトなので
  4:11
  これを使うと良い。でもですねWindows
  4:15
  英語でも良いというのであればSublimeTextというのがあります
  4:21
  これはすごく高機能なエディタでフリーとはちょっと違うんですけれども
  4:27
  ある一定の期間内であれば、今ずっと使えるんですけれども
  4:32
  タダで使えますので、このSublimeText2を使うことをおススメします。
  4:39
  この講座でもSublimeText2を使っています。
  4:42
  これはHTMLを書くだけじゃなくてプログラミングとかにも使えますんで非常に
  4:48
  高機能なテキスト、しかも軽いんですね。動作が軽くて
  4:53
  すごくいいのでこれを使いましょう。
  4:56
  まぁ有料ならね、Dreamweaverとか使っても良いかもしれません
  5:03
  じゃあHTMLを早速ですね、書いていってどんなものか理解してみましょうか
  5:10
  ではよろしくお願いします。
  5:16
  SublimeTextというのがありますので開いてみましょうか
  5:23
  スポットライトでSublime…
  5:30
  これでSublimeTextが開きました。ここで書いていきたいと思います。
  5:35
  では私がやりますので見ててくださいね。まずは保存しちゃいましょうかね
  5:47
  デスクトップにあらかじめ今回課題で作るZooloppaのフォルダがありますので
  5:53
  こちらにindex.htmlという名前で保存します。
  6:00
  HTMLのファイル名は必ず半角英数字
  6:04
  で最後に拡張子が、.htmlと入れます。必ず
  6:09
  これ入れる…で保存。じゃあ書いていきますね
  6:16
  HTMLを書くときにまずは何はともあれ最初に書くのがあります。
  6:22
  この文書はHTMLだよ。まずこれ書いてあげる。
  6:28
  その次に頭の部分、head,<,/,head…頭の部分があります
  6:40
  その次にbodyで、<,/,body…
  6:55
  まずはですね、これがHTMLの基本的な構造になります。
  6:59
  最初に書く時必ずこれ書く。でヘッド、ヘッダーって言いますけれども
  7:07
  今ね選択されている部分、ヘッダーです。
  7:10
  ヘッダーの中にはページのタイトルを書きます。
  7:16
  スラッシュ…タイトル…今回はですね
  7:24
  架空の動物園サイトZooloppaっていうのを作っていきますので
  7:30
  じゃあZooloppa東京というタイトルにしましょう
  7:36
  で、ここまで書きました。保存しますね
  7:41
  ファイルメニューからセーブ、もしくはcmd+S
  7:48
  で、どうなっているかというとデスクトップをですね見てみると
  7:59
  Zooloppaフォルダの中にindex.htmlというのができてます
  8:04
  いま保存したやつがここにできてるんですね
  8:08
  これをダブルクリックすると白紙がでてきますね
  8:14
  あれだけ書いたのに白紙じゃないかと思うかもしれないですけども
  8:18
  間違ってないです。これはじゃあわかりやすいように半分にしまして
  8:26
  左側にソースを半分、こう置いてみてみましょうか
  8:33
  いま書いたのはヘッダーの部分ですね。タイトルの部分だけ
  8:38
  他にも書きましたけれども、実質書いたのはここだけなんですね
  8:43
  で、これはブラウザの見えている部分には表示されません
  8:47
  どこに表示されるかというと、かろうじてここにね
  8:51
  タブの部分に表示されます。でもここっていうのは人間に見える部分
  8:57
  を書く物じゃないですねヘッダーっていうのは
  9:01
  ページの情報を書く部分です。人間が見える部分っていうのは
  9:07
  bodyの中に書いていきます。例えばじゃあ…
  9:12
  Zooloppa東京へようこそと書きました
  9:21
  で保存しますcmd+S、でこのブラウザを
  9:28
  これくるくるって回っているのがあるじゃないですか
  9:31
  これを押すと更新っていう意味なんですけども
  9:34
  更新するとZooloppa東京へようこそ出てきます
  9:39
  このbodyタグの中にですね、書いたものというのがいつも
  9:45
  普段皆さんが見ているブラウザの内部、ブラウザで
  9:49
  見えている部分に表示されるわけですね
  9:52
  じゃあ、Zooloppa東京へようこそ
  9:56
  で今週の特集という言葉を追記してみますね。これで保存してみますcmd+S
  10:05
  で同じように更新ボタンを押してみます。すると今のね、
  10:13
  今週の特集っていうのが反映されましたが、しかし
  10:17
  ちょっとおかしいですよね
  10:19
  今こっちでは改行して今週の特集って書いたのにもかかわらず
  10:26
  ブラウザは改行していない
  10:30
  これはね、ブラウザがわかる言葉で指示を出さないといけないわけですね
  10:37
  ブラウザでわかる言葉というものがHTMLタグになります
  10:43
  例えば、ようこその後ろにbr,>と書いてあげると
  10:51
  更新しますね。こういうふうに改行されました
  10:55
  このカッコとカッコの間に挟まれているローマ字を
  11:00
  ブラウザが理解して、その表示方法を決めていきます
  11:05
  このHTMLタグ、だから表示させるためにあとはこの文書に意味を付けるために
  11:12
  色々書いていくわけです。これ次回以降にやっていこうと思うんですけれども
  11:17
  例えばZooloppa東京へようこそ、これ大見出しです
  11:22
  大見出しっていうのは、h1ヘッダーの1。見出しの1番ってことですね
  11:29
  で囲んであげます。これで保存すると見出し大きくなりました
  11:37
  これはh1タグに囲んであげてるからブラウザは
  11:42
  大見出しなんで意味を与えると同時に
  11:47
  ブラウザでこう大きな表示にしようと
  11:51
  しなさいよという指示を送ったわけですね
  11:53
  で、このタグっていうものがいくつかあります
  12:00
  何十個か何百個かちょっとわからないですけれども
  12:03
  本当に使うのは2,30個くらいでしょうか
  12:07
  なので英単語を2,30個覚えるくらいなら簡単にできますよね
  12:13
  それくらいの労力でHTMLが書けるようになります。なので
  12:17
  誰でも書けるという、本当にね誰でも書けるんです
  12:23
  頭使わなくていいんです。この講座では色々書けるように、
  12:31
  HTMLを書けるようになるための講座なんですけれども例えば
  12:36
  今までで皆さんが見ていたサイトというのも
  12:42
  HTMLがね裏に書かれていますね、ちょっと見てみましょうか
  12:46
  例えばミッドタウン、先週私が行ってきたミッドタウンですね
  12:51
  これ今見えてますけども、非常に美麗なサイトですよね
  12:55
  この裏側には今ソース出してみました。
  12:59
  こういうHTMLが書かれてます。
  13:03
  このHTMLを書くことによって、こういう見かけができているっていうね
  13:10
  何かすごいたくさんあって嫌になっちゃうかもしれないですけども
  13:14
  さっき言ったように英単語、ホント2,30個覚えるくらいでいい
  13:17
  ここを見ても同じような単語がね
  13:21
  ここだとulとかlyここにもlyってありますよね。ここにもlyある
  13:29
  divってある、ここにもdivってある
  13:32
  同じものたくさん使っているんですよね
  13:35
  その同じものを使って文書を書くと、このくらい長くなると
  13:41
  覚えるべきものは非常に少ないというわけです
  13:45
  じゃあちょっと戻りますね。
  13:47
  HTMLおわかりいただけたでしょうか。何となくイメージ
  13:51
  掴めていただけたでしょうかね。
  13:53
  で、HTMLの基本講座もう一度見てみます
  13:58
  何はともあれHTMLは以下を必ず書くということ
  14:02
  ヘッドがHTMLと文書ですよっていうもので挟んで、その中に
  14:08
  ヘッダ、頭があってボディー、体があるということです
  14:14
  ヘッダの中っていうのはブラウザで見えない部分、人間には
  14:19
  見えない部分ですね。グーグルなどの検索エンジンに
  14:22
  意味を渡すための箇所だと思ってください
  14:27
  ボディ。ボディがページの内容になります。皆さんがいつも
  14:32
  見ているとこっていうのはボディの中に書いてあるということ
  14:37
  記述のルールですね。記述のルールは
  14:42
  全て小文字、半角英数字の小文字になります
  14:46
  保存するときは必ず拡張子、.htmlを付けます
  14:53
  さっきのソース見てもわかるように全部小文字ですよね
  14:59
  はい、じゃあ今日やったこと
  15:03
  HTMLとは、ツールについて、HTMLの基本的な記述方法
  15:08
  次回はタグをまた色々
  15:12
  覚えていこうと思うんですけども、ご紹介していこうと思うんですけど
  15:15
  皆さん達は環境をまず整えておいてください。で、
  15:19
  エディタをダウンロードしておいてください
  15:22
  今日言ったSublimeText2がいいんじゃないかなと思います
  15:29
  これからね、お勉強して美麗なサイトが作れるようになれるように
  15:35
  お教えしたいと思いますので、頑張っていきましょう
  15:38
  どうもありがとうございました。