htmlとは?headタグ・bodyタグとは?htmlの入門ならカトスク!|WEBデザイナー必見の女性に優しいHTML講座

WEBデザイナー必見の女性に優しいHTML講座第2回です

▲動画です。クリックして再生してください★

現役WEBデザイナーのカトパン&カタディお送りする、女性に優しいHTML講座!
htmlとは?headタグ・bodyタグとは?htmlの入門ならカトスク!|WEBデザイナー必見の女性に優しいHTML講座
というテーマでお送りしました。

LINE@:「@kubo」で検索してね

LINE@詳細はこちら

★おすすめのプレイリスト一覧★

女性に優しいHTML講座 ▶ https://goo.gl/jepS2u
くぼちゃんねる ▶ http://ur2.link/CFte
人気順で見る ▶ http://u0u0.net/CtfT
Q&Aシリーズ ▶ http://u0u0.net/CtgM
プチセミナー ▶ http://u0u0.net/D1Jz

【Photoshopバナー制作動画レッスン】
を無料プレゼント!▶ http://ur2.link/CFty

文章で読むカトスクはコチラ

カトパン先生:はい、みなさん、こんにちは。女性に優しいhtml講座へようこそ。前回の動画でhtmlでなに?って話をしたと思うんですけど、ざっくり分かりました?

ほっしー:そうですね、なんとなく。

カトパン先生:なんとなーく。

ほっしー:はい。

カトパン先生:ホームページ作るための言語なんだよーっていうのだけ。

ほっしー:はい、分かりました。

カトパン先生:分かりましたよね?で、今日は実際にほっしーと一緒に書いてみて、もうhtmlとはハイパーテキストマークアップランゲージの略ですとかはもう抜きにして、実際書いてコードとの関係が分かればいいかなって思って、実際に今日はやっていきたいと思います。実際にhtmlを書くときに、ルールっていうか、前回の動画でも見たと思うんですけど、こういう長い、ばーっと長い。

ほっしー:これ、書くんですか?

カトパン先生:そう、書くんですけど。今日はこんなに書かないです。で、これを先に見てしまうと結構、ここで壁感じると思うんですけど、htmlは3つのタグで構成されてて、タグってなんなのか、って言うとこなんですけど、htmlはこういう括弧で囲まれた、これをタグって言うんですけど、これだとhtmlっていうのがカッコで囲まれてますよね?

ほっしー:はい。

カトパン先生:で、これ対になってるんですよ。対になってるこの開始と始まりのhtmlと、最後の、対になってるところに、スラッシュhtmlって書いてあるんですけど、これ、対になってるんですけど、こういうタグを使ってhtmlっていうのは構成されてるんですけど、このタグについてはいろいろいろんなタグがあって、それについては他の動画でお話しますんで、またそちら見てみてください。

ほっしー:はい。

カトパン先生:で、今日はhtmlを書くときに絶対書かなきゃいけないやつをとりあえずやります

ほっしー:はい。

カトパン先生:html書く時は、今日はドリームウィーバーっていう、要はこれはメモ帳だと思ってください。メモ帳に今書いてるよと思って。

ほっしー:なるほど、はい。

カトパン先生:で、htmlは、まずhtmlタグ。

ほっしー:2つあります。

カトパン先生:はい、ありますね。

ほっしー:あります。

カトパン先生:これでまず全体を囲んでるんですよ。最初と最後に。これでhtml囲んでますね。

ほっしー:はい。

カトパン先生:これは、この中に書かれている言語はhtml言語ですよって言ってるタグです。もうその程度で大丈夫です。

ほっしー:はい。

カトパン先生:で、その次、headタグっていうのがあって。

ほっしー:headタグ。

カトパン先生:はい、これも対になってます。最初と最後。で、次bodyっていうのがあります。

ほっしー:body?

カトパン先生:そう。Body。bodyって覚えてください。このhtml head bodyこれがもう基本的な構造なんで。

ほっしー:html head body。

カトパン先生:はい、大丈夫です。で、htmlはもう先ほども言った通り、htmlで書かれてますよっていう中身なの。で、次head。headはheadって頭の部分。脳みその部分で、この中身で文字コードは、文字コードとかいろいろあるんですけど、日本語使ってますよ、とか、そういう情報を入れてるんですよ。なんで画面上には出てこないです。

ほっしー:そうですね、見たことないです。

カトパン先生:画面上には出てこない情報がheadの中に入ってるんですね。で、画面上にこうやって出てるじゃないですか?こういうバナーとか、文字とか。こういうのは全部bodyの中に入ってるんですね。

ほっしー:へえー。

カトパン先生:それから、さっき見たやつ、長いやつもよく見ると、ここにhtmlっていうのがあって、次headがありますよね。

ほっしー:あります。

カトパン先生:headの中にいろいろ情報を入れてるんですよ。この中身っていうのはそのホームページによっていろいろ変わって、ここまでですね。

ほっしー:はい。

カトパン先生:で、次bodyが始まって、一番最後bodyで囲まれてるんですよ。で、htmlで囲まれてる。

ほっしー:はい。

カトパン先生:だからページが長いからこんなにあるんですけど、とりあえず今日は画面上に文字を出そうっていうところまでいきたいと思います。

ほっしー:はい。

カトパン先生:で、ざっくりhtml書くときに必要なタグは分かりましたか?

ほっしー:分かりました。html head body

カトパン先生:はい。そしたら、bodyの中に書いたら、画面に出てくるんで、なんか打ってみましょうか。

ほっしー:はい。

カトパン先生:これで、こんにちは、って打ってみてください。

ほっしー:こんにちは、ですね。

カトパン先生:で、打ちました。ちょっと保存しますね。

ほっしー:はい。

カトパン先生:で、これで保存した、さっき編集したやつで、拡張子このindex.htmlっていのがhtml言語で保存されたファイルなんですけど。

ほっしー:なるほど。

カトパン先生:これをダブルクリックしたら、ここに画面上に出てきましたね。

ほっしー:あー、出てきました。

カトパン先生:こういう感じで、今はこんにちは、しか入れてないですけど、こういう感じでどんどん画像とかこういう文章とかを入れて、こうやってホームページを作っていく、っていう感じになるんで、簡単に考えたら、こういうbodyの中にとりあえず必要な要素を入れていくんですよっていうことです。

ほっしー:なるほど。簡単ですね。

カトパン先生:そうなんです。意外とbodyの中にとりあえず入れていけばいいんだってのが分かれば、やっていけそうな感じしますよね。

ほっしー:そうですね。思ってたよりは。

カトパン先生:はい、こんな感じでどんどん要素を入れて、ホームページを作っていくっていう流れになるんで、この他のタグ。いろんなリンクを、ボタンを押したときにリンクとか飛ぶじゃないですか?

ほっしー:はい。

カトパン先生:とか、文章書くときににもタグって必要なんですよ。

ほっしー:へぇー。

カトパン先生:あとは、改行するときってエンターとか押すじゃないですか、普通に。

ほっしー:はい。

カトパン先生:でもエンターだけじゃきかないんで、そのためのタグもいるんですよ。

ほっしー:ほー。

カトパン先生:だからそのタグについて、また他の動画でいろいろお伝えしていきたいと思います。はい。じゃ、今日はありがとうございました。

ほっしー:はーい、ありがとうございました。

月一で交流会を開催中!はじめてでも楽しめるアットホームな会です

ABOUTこの記事をかいた人

地味な人生からの大逆転劇!私が好きなことを仕事にするまで...
株式会社日本デザイン WEBディレクター・WEBデザイナー・動画クリエイター
20歳WEBデザイン業界を目指すが、未経験のため15社を一次審査で落ちプチ鬱に
22歳 雑誌の編集部になんとか受かるが、過酷すぎて耐えられず早々に辞める
24歳WEB業界に転身。念願のWEBデザインの仕事に就くがセンスがなく惨敗
26歳 大坪拓摩と出会い、根性だけを認められアシスタントという形で雇われる
それから4年間、理論やルールに基いたセールスデザインを大坪に叩き込まれ、デザイン力が奇跡のように向上!紹介のみで仕事が埋まる売れっ子デザイナーとなり、動画制作・YouTubeプロデュースなどクリエイティブな仕事を幅広く請け負う
2015年10月、自身のこれまでの経験(もともとのセンスのなさも!)を活かして「現役デザイナーが教える」「センスはいらない」というコンセプトで日本デザインスクールを設立。現役としても活動を続けながら全国400名以上の生徒を45日という超短期間でプロのWEBデザイナーに育てる。座右の銘はミッキーの「夢は必ず叶う!」