htmlとは?divタグとは?|【カトスクの女性に優しいhtml講座】

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

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

現役WEBデザイナーのカトパン&カタディお送りする、女性に優しいHTML講座!
htmlとは?divタグとは?|【カトスクの女性に優しい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講座へようこそ。今日は、カタディにdivタグについて教えていただきたいと思います。divタグってねそもそも何なんですかね。

カタディ先生:divタグっていうのはそのタグ自体に意味ないんだけど、htmlをこーディングする上で必要になってくるタグ。そのタグ自体に意味はないんです。じゃ、どういうふうに使っていくかっていうのを、実際のwebサイトを使ってやっていきたいと思います。まずここにデザインスクールの、これ何期生でしたっけ?

カトパン先生:これ、9月生ですね。

カタディ先生:9月生の方の作品があるんですけども、webサイトって基本的に、これ1枚のサイトだと思うんですけど、ブロック毎に分けてコーディングをするっていうのが鉄則というか、一番やりやすいやり方なんですけども。じゃ、どういうふうに分けてくかって言うと、大抵メニューのエリア、で、このメイン画面があって、右にコンテンツエリアをつくって、左にサイドバーのエリアを作るっていう感じのブロック分けなんですよ。

カトパン先生:はい。

カタディ先生:このコンテンツとサイドバーが左右変わるっていうのはあるんですけども。

カトパン先生:あぁ、右にメニューがあるやつとか。

カタディ先生:そうですね。で、そのときにdivタグをどういうふうに使うかっていうと、そのエリア毎を分けてあげるって、さっき言ったと思うんですけども、そのエリアを作るためにdivタグを作るんですよね。

カトパン先生:なるほど。箱を作るみたいな。

カタディ先生:そうですね、箱を作るイメージです。実際には見えないんですけども、イメージ的に箱を作る。どういうことかって言うと、例えば、まずこの全体。webサイト全体を包む箱を作ってあげる必要があるんですけども。このdivタグですね。dib id wrapper。wrapperってよくwebサイト全体を包むためにid名をふるんですけども、このid名って何なのかっていうのは、別の動画で説明したと思うので、そちらをチェックしてみてください。

カトパン先生:はい。

カタディ先生:まず、全体を囲みます。

カトパン先生:このwrapperっていうのは特には決まってはないんですね。

カタディ先生:そうですね。大体wrapperとかwrapとか、そういう感じで。

カトパン先生:必ずこれじゃないといけないっていうわけじゃないけど、一般的にこれが使われるみたいな?

カタディ先生:そうですね。

カトパン先生:あー、なるほど。全体を囲む箱はwrappaerってことですね。

カタディ先生:wrapper。このメニューを囲んでる、headerって言われる、一般的にheaderって言われる部分なんですけども。

カトパン先生:メニュー、header。

カタディ先生:そうですね。ここもdivタグで囲まれてる。ボックスを作ってあげてるんですね。

カトパン先生:なるほど、なるほど。さっきのサイドバーはどこになるんですか?

カタディ先生:サイドバーはこのdiv id side。このsideっていうのもいろんなサイドバーっていうクラス名とかid名っていうのはあるんですけども、基本このside。横にあるよっていうのを示すためにあるんですけども。

カトパン先生:はいはい。じゃコンテンツっていうのはじゃあ、あるってことですね。

カタディ先生:そうですね。コンテンツっていうのは、コンテンツ全体をまずmainで囲ってあげて。

カトパン先生:その中に今これボックス1っていう箱が入っているんですね。

カタディ先生:そうですね。このブラウザで見てみると、このVan Vinoについてっていうコンテンツ1、Van Vinoのワインっていうこのコンテンツ2っていう、エリア毎にさらに細分化してあげる。

カトパン先生:なるほど。

カタディ先生:そうすることで、コーディングがcssなんですけども、しやすくなってくるんですね。

カトパン先生:あー、なるほど。サイドとかコンテンツとかボックスを作ることによって、例えばサイドは200何十ピクセル、コンテンツの幅は何ピクセルっていう、箱に対してcssが書きやすいって。

カタディ先生:そうですね。

カトパン先生:コーディングしやすいんですね。

カタディ先生:そうですね。

カトパン先生:管理しやすい、整理が。

カタディ先生:管理がしやすい。

カトパン先生:なるほど。

カタディ先生:いい言葉使いますね。

カトパン先生:ありがとうございます。

カタディ先生:divタグって言うのは、おさらいすると、エリアを作ってあげる。そのエリアの中にさらにエリアを作ることもできるので、そうやってdivタグで箱を作ってあげてコーディングをしてくと、cssがやりやすいんです。ま、こんな感じなんですけども、分かりますかね?divタグ。

カトパン先生:そうですね、僕自身はもう分かってるんですけど、みなさん分かりましたか?divね、なんかdivって結構出てきますよね。

カタディ先生:出てきます。

カトパン先生:ほんとにhtmlの中で一番出てくるんじゃないかっていうね。感じなんですけど、特にそれには、先ほどもおっしゃってたんですけど、そこに意味は持たないと。そこに名前をつける。箱を作ってあげるためのタグ

カタディ先生:タグですね。

カトパン先生:っていうだけの認識でいいですかね?

カタディ先生:そうですね。まあ、やってくうちにdivタグってこういう感じなんだなってイメージは付くと思うので、それはもう徐々にね、徐々に慣れていけば、全然問題ないと思います。

カトパン先生:もうhtmlについてっていう動画で一番最初に出てきたほっしーもこれぐらい使えるようになってるかもしれないです。。

カタディ先生:なってないと困りますよね。

カトパン先生:困りますね。

カタディ先生:困りますねー。せっかく教えたんだから。

カトパン先生:一番最初あのほっしーがどれだけ成長するかちょっと楽しみですね。

カタディ先生:そうですね。その動画もちょっと配信していければ良いかなと思います。

カトパン先生:はい。

カタディ先生:じゃ、今日はdivタグの説明はこんな感じで大丈夫ですかね。

カトパン先生:はい、ありがとうございます。じゃあまた次回の動画でお会いしましょう。ありがとうございました。

カタディ先生:ありがとうございました。

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

ABOUTこの記事をかいた人

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