CSSでレイアウトを四角を並べる練習〜準備

動画内を検索 0:02 こんにちは吉田ですじゃあ今日はですね 0:06 えっとレイアウトの基礎編に行ってみたい 0:09 なと思いますえっとですね今日やることっ 0:12 ていうのはあの資格を並べる練習をして 0:15 レイアウトの基礎力を鍛えようという感じ 0:17 なんですけれどもこんな感じでえっと普通 0:21 のページもですね資格が並べられているん 0:23 ですね例えばこういうページがあったと 0:26 するとその下にはですねま資格があって 0:31 その中にコンテンツが入れられてるという 0:33 感じになってますでえっと今日のレッスン 0:37 ではこの資格を上手に並べられるように 0:39 この図にあるようにですねえ資格を作り 0:42 まして色をつけてでウェブページの 0:44 レイアウトらしいものを作っていこうと 0:46 こういうことをやっていきたいなと思い 0:48 ますじゃあよろしくどうぞお願いします 0:53 [音楽] 1:02 ではではえっと早速やってみたいと思い 1:05 ますのでサブライム 1:07 テキストを立ち上げてみましょう私はえ 1:12 もうすでに立ち上がってますんで新規の 1:16 ファイルcomNえWindows 1:19 ユーザーの方はcロ 1:21 nでえっといきなり保存しましょうか 1:25 コマンドSで保存でえデスクトップか 1:30 なんかにまどこでもいいんですけれども 1:32 新しいフォルダーを作っていただいて 1:36 CSSのレイアウトという名前をつけ 1:39 ましょうTSS 1:43 レayでその中にindex.ht 1:47 htmlという名前で保存をしてください 1:54 じゃあえっとファイルの用意ができました 1:56 のでうん行ってみましょうかHTMLと 1:59 書いていただいてタブキーをしますでその 2:03 ままエンターキーを押すとまちょっとその 2:05 プラビンによって出方が違うんですけれど 2:07 もこういうコード保管がされますHTML 2:10 タブで出てきますからねでタイトルの部分 2:14 にカーソルが合わさっていると思いますの 2:16 で今日はCSSレイアウトレイアウト 2:21 基礎と書いときましょうでえっとこれから 2:25 ですね資格を作ってそれを並べていくん 2:29 ですけどもその資角がえ識別できるように 2:33 資角1とまず書いてくださいで四角位置と 2:37 書いたらこれコピーしてで四角1四角1 2:42 四角1と44個ま3回ペーストしましょう 2:47 いいでしょうかでそれをえ四角2と四角3 2:53 と資角4という名前にしておきますはい 3:00 じゃあですねえっとこれ 3:04 をブラウザーで見てみましょうかさっきの 3:07 フォルダーの中にインデックスHMLが 3:10 できてると思いますので今回Google 3:12 Chromeで開きたいと思いますでえっ 3:16 とGoogleChromeまだね 3:17 ダウンロードしない方はGoogle 3:19 Chromeをえまそのページがある検索 3:21 してGoogleChromeという名前 3:23 で検索してですねダウンロードして 3:26 くださいでえっとこのファイルを僕は 3:30 ダブルクリックするとGoogle 3:31 Chromeで開くようになってるんです 3:33 けども皆さん右クリックでプログラムから 3:36 開くWindowsの人はねで 3:37 GoogleChromeで開いて 3:39 くださいはいはい文字化けしてますじゃあ 3:43 この文字化けをですね直しましょうえー 3:46 じゃタイトルの下に会業しましてかこ 3:52 メタのキャラセットチャーセット=UTF 3:57 8と書く 3:59 と文字分けが治りますでこれで更新ボタン 4:03 を押してくださいはいはいでできましたで 4:07 ですねこの四角1234で今ただ書いた 4:10 だけなんでブラウザーで見ると横に並んで 4:13 ますちょっとブラウザー分かりやすいよう 4:15 に半分こうブラウザーにして半分コードに 4:19 してみましょうかねこれが分かりやすいん 4:23 じゃないかなと 4:25 はいえ今こうなってますけどこれ 4:29 がこう表示されてるんですねではえこの 4:34 四角1から4を四角に囲みたいと思います 4:38 で四角に囲むというのはディブタグで囲む 4:41 ということじゃ四角位置の左にカーソルを 4:44 持ってきてもらってかこ 4:48 DIivかこ閉じる四角1の後ろに 4:51 カーソルを持ってきてかこ/divこれで 4:55 1つ資格ができましたじゃこれと同じよう 4:59 にですねえ四角234とやっていくんです 5:02 けどもまたサブライムテキスト便利な 5:05 ショートカットやりましょうこの四角2 5:08 っていうところをこう選択しておいてマ金 5:11 投資の方 5:12 はシフトctrl 5:15 wするとPタグでこうもう開始タグと終了 5:18 タグで囲まれてDIVと書くと返しタグと 5:23 終了卓ま一ぺに変わってくれると 5:25 Windowsの方はですねsheftト 5:28 Wでいけますんではいはいやっといて 5:33 くださいじゃあこういっぺにですねやって 5:35 いっちゃいます 5:38 DIVうんこれで4つ囲まれましたの 5:43 でブラウザーのちょ邪魔な閉じて更新 5:47 ボタンを押してみますする 5:51 とえさっき横に並んでたものがですね今度 5:56 は縦に重なりましたこれはディブタグと 6:00 いうのがま今で囲んだからなんですけど 6:03 このディブタグの特性として必ずこう 6:06 重なるということがあるんですねブロック 6:08 レベルのタグと言いますもう1つま横に 6:12 並ぶタグっていうのがあってインライン 6:13 レベルっていうのがあるんですけどもこれ 6:15 はまあまあまあ出てきた時に説明しますね 6:18 とにかくディブタグでやると重なるという 6:20 ことを覚えといてくださいでえっとこの 6:24 ディブタグに対して今資格なんてまない 6:28 じゃないかと思うかもしれないので分かり 6:30 やすいようにCSSですねえ惑線をつけて 6:35 みましょうかじゃあサブライムテキストの 6:39 新規 6:40 ファイルコマンドNWindowsはNで 6:45 えまず保存しますマSでえスタイル 6:52 .cssで保存しましょう 6:55 はいじゃあえここでですねデブタグDIV 7:02 中ボーダーをつけてきましょう 7:05 ボーダー1ピクセルぼ細さが1ピクセルで 7:10 普通の線でソリッドねであとは色#ccc 7:16 これは灰色ですボーダー1ピクセルソリッ 7:21 CCCと書いてブラウザーで確認してみ 7:25 ましょううんまだ何の変化もありますね 7:29 これはまだスタイルCSSとindex 7:32 hmm繋がってないからですよねえ基礎編 7:35 を受けられたかと分かると思うんですけど 7:37 もじゃあindexhlに対してリンクを 7:41 書きましょう5行目を作りましてLINK 7:45 Tabで色々こうコードヒントが出てき 7:49 ますけどもえリンクスタイルシートと書い 7:52 てあるところ選んでますぐ出てくる方は 7:55 それでいいですけどでエンターキーをし 7:57 ましょうでですね 8:02 styドスstilcssと書きますこう 8:06 するとえっとこの1行を書くとですね 8:10 スタイルシートとリンクしますのでさっき 8:13 の変更が反映されますじゃあブラウザーを 8:16 更新うんこうなりましたいいですかここの 8:23 ねリンクスペースREL=スタイルシート 8:27 スペースのhf= 8:32 sty.cssこれでうまくいくんじゃ 8:34 ないかなとで今右を見てみるとですね 8:38 ちょっとあの四角と資格がくっつきすぎて 8:40 ますんで話してみましょう分かりやすい 8:42 ようにねスタイル.cssの下の行に 8:48 マージン 8:49 の10 8:52 pxを入れてみましょうそうすると四角と 8:57 四角が10匹ずつ開くはずなんでこんな 9:01 感じの見え方になります 9:07 はいはいいいでしょうかじゃあですねえっ 9:11 と資格を作る準備ができましたのでえっと 9:14 今回のま準備編は以上ということでで次回 9:18 はですねこの資格に対して色々個別の設定 9:21 をしていきたいと思います