cssとは?《後編》cssの書き方を覚えよう!|【カトスクの女性に優しいhtml講座】

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

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

現役WEBデザイナーのカトパン&カタディお送りする、女性に優しいHTML講座!
cssとは?《後編》cssの書き方を覚えよう!|【カトスクの女性に優しい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講座へようこそ。今日は、前回cssとはっていうね、ことについてお話したと思うんやけど、それの続きをやっていきたいと思います。

今日は実際にcss言語の書き方についてやっていきたいと思います。で、復習になるんやけど、cssってなんやった?覚えとる?そう、装飾するための言語。で、htmlとは兄弟みたいな関係でしたよね。OKです。OKです。それでOKです。

で、実際にcssってどうやって書かれてるのかっていうのを今日は説明していきたいと思うんですけど、書き方ね。cssってのはまずセレクタっていうのとプロパティっていうのとっていうふうに分かれてます。

名前は覚えなくてもいいんですけど、どういう書き方になってるのかっていうのだけ分かっておいてください。で、pタグとかh1タグとかタグの勉強しましたよね。bodyタグとか。そのタグっていうのがcssでいうセクレタっていうのになります。

で、プロパティっていうのはmarginとか、あとfont-sizeとか。で、cssのね、いろんなプロパティの説明はいろいろしてると思うんやけど、そのタグに対してどうするのかっていうのがプロパティになります。で、その値っていうのは、そのプロパティに対する、どのぐらい空けるのか。とか、余白だったらプロパティがmargin。で、値が10ピクセル、20ピクセルとかっていうふうになってます。

実際にコードの画面を見てみよう!

例えば、これは全部ドットから始まってるんで、クラス名になるんですけど、ちょっとクラス名は今は分からない人も多いと思うので、まずこのbodyでいきましょうかね。

bodyっていうまずこれがセクレタになります。で、bodyって書いたあとに、この中括弧。中括弧をまず書きます。これでまず囲ってあげるんですね。で、その後にfont-size。これは要はプロパティになります。

で、81パーセントっていうのが値になります。次は、これ、fontっていうのがプロパティ。で、その後に書かれてるのが値。これもcolorがプロパティでその後に書かれてるのが、色コード。色のコードが書かれてるのが値になります。

この値っていうのはコロンとセミコロンで囲まれてます。ここだけが分かってれば、とりあえずcssは完璧。あとはcssのプロパティについていろいろね、僕とかカタディの動画を見て、「あ、こんなのあるんだ」っていうのを勉強すればcssは余裕かなっていう感じですね。

この辺のねシャープとかついてるのは、divタグってあるんだけど、divに関してはカタディが他の動画で説明してるんで、divタグはちょっと見てもらって、divに対して名前をつけれるのね。idとかって名前をつける、箱毎に。id1、id2とかって。

そのidに対してcssをつけるときは、こういうシャープをつけて、その後にidの名前、1だったら1。で、あとidに似たようなクラス名ってあるんやけど、クラスで名前を設定したときは、これだったら、li1っていうクラス名を指定してるところにcssをかけるときは、ドットをつけてあげるのね。

こういう感じでいろいろやっとんやけど、やってることは一緒なんよ。セレクタ書いて、中括弧で囲ってあげて、プロパティを置いて、その値を書いてあげる、です。今日ね、一通り、前回の動画も合わせて、ぜひ復習をしてみて、こういう書き方になってるんだ、ってまず学んでください。はい、で、これがcssについてっていうことで、以上となるんですけど、またね、チャンネル登録とかいいね、お願いします。じゃあ、ありがとうございました。

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

ABOUTこの記事をかいた人

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