0:10 こんにちはウグのです今日はですねえっと 0:14 CSSの書き方えまその書式について色々 0:19 具体例を交えながらやっていきたいなと 0:21 思います 0:23 えっとま前回もやったんですけれども 0:27 あのH1の書き方からねまずやってみ 0:30 ましょう例えばH1の文字色を赤にし 0:34 なさいというような感じにするとH1は 0:38 カラーを赤にしなさいこんな感じで書くん 0:40 ですねで書式はという 0:44 とまこんな中学校に挟まれてこうなってる 0:47 んですけども名称ですねこのH1と書かれ 0:51 てる部分これセレクタと言いますHMの 0:54 どの部分に適用するか 0:56 決めるでカラーと書いてあるところが 1:00 プロパティですプロパティというのはどの 1:03 ような属性を変更するか決めるところ今日 1:06 はこのプロパティについて色々やって 1:08 いこうと思うんですけれどもえプロパティ 1:11 ですねでプロパティの右にはコロンが必ず 1:15 来ますでコロンの右側には値が来るとで値 1:20 には具体的な内容を決めますここで言うと 1:23 カラーはま赤ですとかていうのがこの赤の 1:26 部分が値になり 1:28 ます最後はこのも忘れないで欲しいんです 1:30 けどセミコロンをつけますこうすると1つ 1:34 のこう 1:35 プロパティのセットの終了意味するところ 1:38 になりますのでこのコロン付け忘れちゃう 1:41 とねエラーになって色々表示がおかしく 1:43 なっちゃったりしますんで必ずコロンは 1:45 セミコロンはつけてくださいコロンと1番 1:49 後ろにはセミ 1:51 コロン全てこの合わさった形これをCSS 1:56 のルールセットと言います 2:00 でえっとこれは中括弧で囲むんですね 2:04 プロパティとアまこれさっき言ったやつ 2:06 ですねコロンで今日の最後にセミコロンを 2:08 入れますじゃあ行ってみましょうか今日 2:11 覚えるプロパティーというのは文字に 2:14 関するプロパティ背景や色に関する 2:17 プロパティ幅や高さ余白境界線などについ 2:21 てやっていき 2:22 ますじゃまず文字を変更するカラーですね 2:26 えっとま最初カラーでフォントサイズ 2:30 フォントウェイトラインハイトランていう 2:31 のがありますじゃあちょっと実際にですね 2:35 えコドを書いて見てみましょうか前回使っ 2:39 たズロッパにちょっと字を足してます 2:41 けれどもほぼ同じやつをですね色々CSS 2:45 を書いてえ試していこうかなと思います 2:48 まずじゃあ文字を変えるプロパティですね 2:51 えっとやってみましょうかこれがHTML 2:55 ですで横側にCSSがあるような感じに 2:58 なってますじゃCSSににH1はカラー 3:03 カラーがえシープFF 3:08 00000こうするとえっとH1に囲まれ 3:13 ている部分ここですねこれは赤になります 3:16 よということを意味していますじゃあこれ 3:20 をブラウザーで開いてみましょうかえです 3:24 ねデスクトップにズロッパや色々ま置い 3:28 てるんですけれども 3:30 今日のプロパティに関することこれです 3:33 ねちょっと見てみますGoogle 3:36 Chromeでえ見てみましょう 3:41 かそうする 3:43 とうんH1って書いてとこまだ赤になって 3:46 ませんこれはなぜかと言うとですねま前回 3:49 もやりましたけれどもこのSTY.CSS 3:53 とINDEX.CSSがまだ繋がってない 3:55 んですねなのでこのヘッタの中タイトルの 3:58 下ありにリンクえっとスタイルシートへの 4:03 リンクを書いてあげますえこのですね 4:06 サブライムテキスト2だとLKtabで 4:09 やると保管されるので非常に便利ですもう 4:12 1回っ言ましょうかリンクタブキそうする 4:15 とこのどれにしますかて出てきますんで 4:18 エンターキーですぐ保管コードが保管され 4:21 ますじゃあHDFDSTY.CSSこう 4:25 書いてあげるとSTYLE.CSSと 4:27 INDEX.HLMLが繋がりました 4:31 じゃあ更新してみ 4:33 ましょう赤くなりましたねでこれまず文字 4:37 が赤くなりましたじゃあえっともう少し 4:40 プロパティやってみますねえっとですね 4:44 先ほど紹介したのは文字のフォントサイズ 4:48 あとはフォントウェイトこのじゃ2つやっ 4:51 てみましょうかフォントサイズっていうの 4:53 は文字の大きさですえじゃあH1の 4:57 フォント配布サイズは100pxでもっと 5:02 もっと大きくしてみますこうするとこんな 5:05 大きくなりました 5:07 うんじゃあ次はですねフォントウェイト 5:10 フォント配布ウェイトこれは文字の太さに 5:15 なりますえボールドかこうノーマルか 5:18 なんて書き方するんですけどえっとH1は 5:22 元々がボールドになってるのでじゃ 5:25 ノーマルにしてみましょう 5:26 かノーマルにしました更新ボタンとうん 5:30 細くなりましたねこんな感じで変えられ 5:33 ます例えばこの今文字がたくさん書かれて 5:37 いるところこれはPタグで囲まれてるん 5:40 ですけれどもhtmlをねお見せすると 5:44 この部分ですねこの部分Pタグで囲まれて 5:48 ますじゃあえっとPもやってみましょうか 5:51 Pはえっとフォントウェイトが 5:56 ボールドにしてみ 5:58 ます更新うんそうするとここボールドに 6:02 なりました 6:03 ねでは 6:07 えっともう1つちょっとボールだと見 6:10 づらいでノーマルに戻します 6:13 ねさっきのこの紹介で言うとですねライン 6:18 ハイトというのがありましたラインハイ 6:21 トっていうのは行間のことです行間を変更 6:25 してみますねたくさん文字があった方が 6:27 分かりやすいんでえやってこのPのところ 6:30 でやってみ 6:31 ましょうじゃあえっとPのラインハイトは 6:38 じゃあ1.2これ120%って意味ですね 6:43 1.2にしてみますすると 6:46 すごくね魚と魚の間が狭くなったのがお 6:50 分かりいただけるんじゃないでしょうか 6:52 もっと広げてみましょうか見やすいように 6:54 ですね 6:57 1.7うんこうすると割とありました 7:01 こんな感じでまどれがいいっていうことは 7:03 ないんですけれどもその自分の作った 7:06 ページによってこのラインハイトってのを 7:08 変えて見やすいように作りましょうじゃあ 7:13 どんどんいきますよ今日はプロパティをね 7:14 いくつか紹介していきますんで今が文字に 7:17 関するプロパティでした今度は背景を変更 7:20 するプロパティについて紹介します背景は 7:23 え背景色を変えるであるとか背景に画像を 7:27 入れるであるとかっていうことができます 7:29 ではやってみましょうえっとです 7:32 ねスタイルシートでじゃあ背景はボディ 7:37 ボディの背景書いてみましょうボディって 7:39 いうのはページ全体のことです 7:41 バックグラウンドのえ色をじゃピンクにし 7:45 てみましょうか 7:47 ねはいピンクになりましたでです 7:52 ねこのさっきからえっとピンクだとかFF 7:57 このカラーのね設定っていうのが 7:59 えよくわからないのかなと思いますので 8:02 説明させていただくとこれは英語でえ代表 8:07 的なものっていうのはあの色指定が英語で 8:11 できるんですね例えばオレンジであるとか 8:13 ブルーであるとかあグレイであるとかこう 8:17 いうものに関しては英語で色指定ができ 8:20 ますでも細かい色指定っていうのはえっと 8:24 シrrggbb 8:27 で指定しますこれはどういうことかと言う 8:30 とですね最初のRRってのがレッの領域 8:33 ですで0が最小Fが最大 8:37 0123456789 8:39 ABBCDEFこれが入ります例えば 8:46 レッドレッドの領域を最大にするにはFF 8:50 と書きますでグリーングリーンの領域これ 8:53 はグリーンのライトだと思ってください 8:54 これは00にしますでブルーブルーこれも 8:58 じゃあ00にしみましょうかそうすると赤 9:01 のライトが最大で後のえっとグリーンと 9:04 ブルーはついてませんでどんな感じになる 9:09 かというともうお分かりだと思いますけど 9:11 真っ赤になりますねこの文字も真っ赤なん 9:14 で消えちゃいましたけれど 9:16 もじゃあですねえっと最初の領域がレッド 9:20 レッド次がグリーングリーングリーン 9:22 グリーンもじゃあ半分ぐらいつけましょう 9:24 か99でブルーブルーも半分ぐらいつけ 9:28 ましょう99 9:30 すると薄いピンクになってくれますね要は 9:34 RGBというライトの付き具合まあと例え 9:38 るって言うなら絵の具をどう混ぜるか 9:40 みたいな感じでしょうかで色を作っていき 9:43 ますはいはいでえっとこの 9:47 バックグラウンドの色を今作りましたけど 9:50 今ですね背景に何を入れるかっていう話 9:53 ですねじゃあ今度は画像入れてみます画像 9:58 あらかじめですねフォルダーの中に用意し 10:00 てありますどんなものかというとこんな 10:05 やつですねえちょっと見てみましょう 10:10 か大きいやつがいいのかなうん大きいやつ 10:13 とちっちゃいやつを用意して 10:15 ますこんな感じの画像を用意してますこれ 10:18 を背景として読み込んでいます 10:20 ねではそれでどうするかというと 10:23 サブライムテキストでですね 10:26 バックグラウンドのURL 10:29 でえダブルコーテーションイメージズ 10:32 フォルダーの中に入ってますので 10:34 イメージズフォルダーのBGUnderL 10:39 .jpgという名前で保存されてますこれ 10:43 を指定してみますねで保存してでロパ東京 10:47 これを更新しますするとはいはい背景画像 10:51 が表示されまし 10:53 た今度は小さい画像をですね表示してみ 10:56 ましょう小さい画像を表示すると 11:02 うんこうなりますさっきのえ大きい画像と 11:05 ちっちゃい画像を用意しておいてで確かめ 11:09 て見てるんですけどタイル上に並ぶんです 11:11 ねうんタイル上に並びます小さい画像を 11:15 用意しといて模様にするためにまこういう 11:18 タイル上に並べてくれてるんですけどこれ 11:21 はえ指定することができます例えば 11:26 リピートXって書いてあげると横に 11:30 リピートしますこんな感じ右だけに 11:33 リピートしますよねでリピートYって書い 11:36 てあげると縦にリピートし 11:40 ますでノリピートってのもんですよノー配 11:46 リピート広角と1回しか表示されません 11:50 タル上にならないっていうことですで 11:53 えっと最近ですねあの大きめの画像を使い 11:58 まして今回で言えば例えばLのやつねを 12:00 使ってノーリピートにすると1回だけしか 12:04 表示させないっていうような使い方が割と 12:08 あるんじゃないかなと思いますうんこれは 12:12 ちょっと横が足りないですねあの大きさが 12:14 足りないのですたらずな感じになってます 12:17 けどこういう背景の使い方ができますはい 12:21 はいえっと今日はですね結構ありますんで 12:25 次に行ってみましょうか背景画像の使い方 12:29 ってのはこれでよくてあと幅と高さ幅や高 12:32 さを指定することができますえーじゃあ今 12:36 Pタグの部分ちょっと背景画像があると見 12:40 づらいんで背景は画像なくしてですね 12:44 ピンクにしとき 12:48 ましょう今ですねこのようにこう文字が 12:52 あるんですけどもこれ右の方にずっと出 12:54 ちゃってますよねこれをそうだなじゃ幅を 12:59 直しましょうこのPタグの中のwiid 13:03 THっていうのがこれが幅なんですけれど 13:06 もこれを 13:08 えーじゃあ600PXにする 13:13 とはいはいこのような感じで幅が600 13:18 PXになって 13:20 ますこれはですねPもあの四角に囲まれ 13:24 てるんですねちょっと分かるように背景に 13:27 バックグラウンド 13:30 えっと色を入れてましょうシャープグレ 13:33 イって入れてましょう 13:35 かで余計なものは取りましょう 13:39 ねバックグラウンドに配色を入れてみます 13:42 Pタグのそとこれで分かると思うんです 13:45 けどこれ600ピクセルになってます 13:48 じゃあ続いてえっと配当を入れてみ 13:51 ましょうか 13:53 配当そうだなじゃ500 13:57 PX終わりにはセミコロン 14:01 すると今のPタグ500ピクセルの高さに 14:05 なりまし 14:07 た結構高いですねまあまあまああんまり 14:10 こう高さを入れるっていうのはそこまで 14:13 多くないんですけどもこの幅とか高さを 14:15 入れることができ 14:18 ますじゃあえっとですね続きまして 14:26 は余白の設定 14:29 今度はマージンですねこれもあのPタグで 14:33 やってみようかなと思うんですけど 14:35 マージンとパディングっていうのがあり 14:36 ます外側の余白とあと内側の余白を設定 14:42 することができますちょっとやってみ 14:44 ましょうこれもじゃあPタグでやってみ 14:47 ましょうかねまず 14:50 マージンあー20ピクセルスペース30 14:55 ピクセル40ピクセルスペース50 14:58 ピクセル 15:00 と書くとどうなるか見てみましょうはい 15:04 うんこうなりましたこれは一体どういう 15:08 ことかと言 15:11 とこちらを見ていただくと分かるかもしれ 15:14 ないですけど上に20ピクセル右に30下 15:18 に40左に50という設定になりますこれ 15:22 マージンと書いてえっとまず20ピクセル 15:26 これが上になります30が右時計までです 15:30 ね上右下左 15:35 ですじゃあ今度は 15:38 パディングの設定してみましょうかパ 15:41 ディンググっていうのは内側の余白です 15:44 えっと今のをコピーしてこのマージンを 15:48 パディングに変えてみますねパディングが 15:51 上が20ピクセルで右が30ピクセル下が 15:56 40ピクセルの左が50ピではブラウザー 16:01 で確認してみましょうはいはいこうなり 16:03 ましたでPの中の上が20右が30下が 16:09 40左が 16:12 50これがですねえっとマージンとパ 16:15 ティンググっていうのはレイアウトする時 16:18 には非常に多く使えますのでよく覚えて 16:21 おいてくださいね外側の余白がマージンで 16:25 内側の余白がパディングになります 16:31 えっとじゃ続いていきましょうか最後です 16:35 ね枠線とリストやりましょうかえっと枠線 16:40 は前回も紹介したんですけどもその何かま 16:44 要素に対して枠線をつつけることができ 16:47 ます 16:48 えーここで出てないやつにしてみましょう 16:51 か前回と同じimgタグIMGタグって 16:55 いうのはHMLの中のこの部分ですね 16:59 じゃこの部分にですね 17:02 えっとあこれ前回やったからH2にやって 17:06 みましょうかH2に目線つけてますねH2 17:11 え 17:13 ボーダーのコロンえー3ピクセル 17:19 ソリッド幅が3ピクセルの普通の線で色が 17:25 レッにしときましょう 17:28 見てますねはいはい見てくださいこれH2 17:32 で書かれたとここってのこれHMLの中で 17:34 2つあるんですけれどもその2つに適用さ 17:37 れまし 17:37 たこれが枠線ボーダーですねもう一度見て 17:42 みましょうボーダーは3ピクセルでじゃ太 17:46 さ変えてみますね5ピクセルのドティとあ 17:52 間違いましたDoですねdtTEDで 17:57 グリーンと書きますそうするとうん変わり 18:01 ましたこんな感じ 18:04 で転線になりました 18:07 ね 18:08 はいじゃあ 18:11 次今度はリストタグでしょうかねリストの 18:16 えっと今HMLで使われてるとこっていう 18:20 の 18:22 はこの1番下の部分ですね動物のえリンク 18:27 が貼ってありますけどこれリストですで 18:29 リストを構成しているこのLiタグに関し 18:33 てえ設定をしてみますね 18:37 Liでリスト配スタイルこれで設定します 18:42 今は実はディスクっていうのがデフォルト 18:45 になってます黒丸がつきますからねこれを 18:49 そうだなじゃあノーンにするとどうなるか 18:52 という 18:53 とこの下の部分はこの黒丸がなくなり 18:59 ますでえスクエアにするとさっき黒丸だっ 19:06 た部分が四角に変わりますこんな感じで 19:10 ですねいくつか種類があるんですけれども 19:13 サークルだと白抜きの丸ですねに変える 19:17 ことができ 19:18 ますはいはい今日はえ代表的なですねあの 19:24 プロパティーを見ていきましたけれども 19:27 この代表的なプロパティを今やっったのを 19:30 覚えといていただくとまある程度できるん 19:32 じゃないかなと思いますでウページを制作 19:36 していく中で特に使われるものを今日 19:39 ピックアップしましたのでまこれはよく 19:41 覚えておいてくださいはいえじゃあまた 19:45 次回ですねお会いしましょうどうもお疲れ 19:47 様でし 19:53 [音楽] 19:57 たです