0:11 こんにちはウの吉ですえさてさて今日は 0:14 ですねいよいよHML終わってスタイル 0:17 シートCSSですねの書き方についてやっ 0:21 ていきます今日はその入門編第1回目なん 0:23 でえスタイルシートがどんなものなの 0:25 かっていうのを概要を掴んで 0:28 くださいCS 0:30 ねスタイルシートとはカスケディアル 0:32 シーツの略でですねウェブページの 0:35 スタイルを作るための言語になります 0:37 例えば書き方としてはまH1中括弧 0:40 フォント配分サイズコロン15ピクセル中 0:44 括弧閉じるみたいなこんな形の文法になる 0:47 んですけれどもま何やってるかと言うと 0:49 タグの最低義ですH1タグで書くとえま 0:54 文字は大きくなってで太になりますけど 0:56 それをまた最低義でき 0:58 るってことですね例えばえーこういうよう 1:02 なですねズロッパのページがあります 1:05 けれどもH1で囲まれてる部分っていうの 1:08 はこのタイトルの部分ですロパと書かれた 1:10 とこねここをスタイルシートによってえ赤 1:14 にしますよって書いてあげれば全部赤に 1:18 なりますねでフォントサイズをちっちゃく 1:21 するよってここにフォントサイズコロン 1:25 15ピクセルとか書いてあげれば 1:27 ちっちゃくなったりするんですねこのよう 1:29 にですねまタグの最低義ですこれは背景色 1:32 を変えるこんなこともできますこれは 1:35 ボディタグを最低義することによって色を 1:37 変えることができるというわけですね 1:40 まあまああの見た方が早いと思いますんで 1:44 ちょっとデモンストレーションをやってみ 1:46 たいと思い 1:48 ます前回まで作ってるズロッパていうのは 1:51 こういうねえ画面になってると思います 1:53 けどもこれはまだHTMLだけでスタイル 1:56 シートはついてませんじゃあこれをですね 2:00 えスタイルシートによって変えていこうか 2:04 なと思いますではではえじゃあこのロッパ 2:09 フォルダーをですねサブライムテキストで 2:13 にドラッグアドロップして開きまし 2:15 てここにCSS作っていきましょうかね 2:19 まず保存しますでMacの人はコマンSで 2:24 Windowsの人はCSで保存すること 2:27 ができますじゃあSTYCSS前何でも 2:31 いいんですけども大体スタイルシートの 2:33 場合STY.CSSが一般的でしょうかね 2:36 STYCSSにし 2:38 ますはいはいできましたじゃあさっきの 2:41 文法に乗っ取ってえ例えばですねHTML 2:47 さっきのこのページっていうのはこの 2:49 INDEX.HTMLこのコードになるん 2:51 ですけどもこのH1部分ロパ東京って書い 2:55 てあるとこここはブラウザーで言うと 2:59 ブラウザーの表示図この部分になりますよ 3:01 ねこれをスタイルシートで書いてみ 3:03 ましょうではではえH1中括弧 3:09 えじゃまず色からしましょうねカラシFF 3:14 000これは赤という意味ですじゃあ 3:18 ブラウザーを更新してみてみましょううん 3:21 まだ赤にならないですよねこれはま当然な 3:24 んですなぜかと言うとこっちのSTY. 3:27 CSSとINDEX.HTMLいうのは 3:30 まだ結びついてませんなのでえこの 3:33 INDEX.HTMからST.CSSを 3:37 使ってあげるよっていう宣言を書かないと 3:40 いけないですねそれをヘッダーの中に書き 3:44 ますじゃあえどこでもいいんですけども 3:47 タイトルの下ありに書きましょうかかこえ 3:51 L 3:52 NKlel=スタイル 3:58 シーで 4:00 Hこれはリンク部分ですねイコSTY. 4:06 CSSこう書いてあげますこう書いて 4:09 あげるとじゃこのブラウザを更新すると 4:12 ですね赤くなりました 4:16 うんこれ 4:18 でINDEX.HTMLからさっきの 4:21 STY.CSS読み込む設定になったん 4:24 です 4:24 ねあとはもうこのSTY.CSSにえ設定 4:29 を書いて行くだけですじゃあ背景色書いて 4:32 みましょうボディうじゃバックグラウンド 4:36 バックグラウンドをじゃ 4:40 えっと 4:42 9999FFにしてみましょう9999 4:46 FFこれは青っぽいそうですね更新してと 4:51 青っぽい背景色になりましたこれはHML 4:55 タグ見てみましょうHMLタグっていうの 4:57 はこのボディ今に対してCSSをかけまし 5:01 たこのボディっていうのは全てを包んで 5:05 いるタグですなのでそのページの背景とか 5:08 初期設定みたいな意味になるんですよねな 5:12 のでボディの背景色はこの色にしました 5:16 じゃあ 5:17 このインデックHMLの中に使われてる 5:20 タグ見てみましょうかあこ 5:23 IMG画像タグのこのIMGを再定義して 5:27 みましょうじゃあIMGにはですですね 5:30 IMG中隔 5:33 ボーダーコロンえーどうしよう3ピクセル 5:37 のソリッドのシャープ 5:41 えーじゃあ緑にしましょうかね00FF 5:47 00こう書いてあげるとですねどうなるか 5:49 と言いますと更新しますうん枠線が出まし 5:53 たIMGが使われてるところに関しては 5:57 枠線をつけなさいというような 6:00 設定をしたんですよねちょっとこうこう 6:03 書いてありますけれど 6:05 もじゃあIMGソリッドて書いてある 6:08 ところをドテッにする 6:12 と更新ボタン度点線みたいになりましたね 6:17 これどんどんスタイルを変えていくことが 6:19 できますよじゃあこれはHTMLと連動し 6:22 てるっていうことを掴んでくださいね今度 6:24 はPタグに囲まれてるとこ日本最大級の 6:28 架空の動物園ですっていう書いてあるとこ 6:31 ですねPタグの最適しとみましょうかPで 6:34 書いてあるところ 6:36 はカラーこれがフォントの色ですカラーが 6:40 シャープの 6:43 fffffffffこれは真っ白という 6:45 こと 6:47 ですうん変わりまし 6:49 たこんな感じでねPで書いてある部分に 6:53 関してはこう変えたわけですだんだん 6:55 分かってきたんじゃないですかタグでね 6:57 囲まれてるとこっていうのが 7:00 まそのCSSの対象になるわけですじゃ 7:04 最後もう1つやってみましょうかえじゃあ 7:07 H2で囲まれたとここれはものすごいバカ 7:13 でかい文字にしましょうかH2はフォント 7:16 配布のサイズが100 7:19 pxにすると今動物って書いてあるとこは 7:23 H2ですじゃあ更新してみましょうすると 7:25 これだけ大きくなりましたうんはいえ 7:30 スタイルシートというのはですね今を見て 7:33 お分かりになったようにタグを再定義する 7:35 ためのものですで色々種類がありますので 7:41 次回以降はですねこのスタイルシートの 7:44 種類を細かくやっていこうかなと思います 7:49 はいえっとじゃあまた次回お会いし 7:52 ましょうどうもありがとうございまし 7:58 た