CSSでレイアウトを四角を並べる練習〜IDの活用

0:01 吉田です前回の続きですよろしくお願いし 0:07 [音楽] 0:13 ますはいじゃあですねえっと前回はこの 0:17 準備で四角1から4までできましたけれど 0:19 もこれをえ個別にまず変えてみましょうか 0:24 今だとですねこのHTMLで作ったもの 0:28 これですねデブタグに対してえこういう風 0:32 にタグを指定して一括で枠線をつけました 0:36 けど例えばこの四角1とね四角2だけは別 0:40 の色にするとかというまニーズが必ずま出 0:43 てきますそういった場合にはどうする 0:45 かっていうのをこれから説明しましょうで 0:48 はえINDEX. 0:51 htmlを表示していただい 0:54 て1つ目のこの四角のねDのVの右にす 1:00 置いて半角スペースを入れますでID= 1:05 ヘッダと書きましょうこうすることでこの 1:09 デブタグに対してはヘッダーという名前が 1:12 つきましたそうなんですあの名前をつける 1:16 時はこのIDイルとして書いてあげるのが 1:19 決まりになってますじゃあ四角2にも名前 1:22 つけてあげましょうかID=えじゃサド 1:28 これはですねあの名前の付け方半角数字は 1:31 何でも構いません今回はヘッダとサイドと 1:35 いう名前をけましたこれをスタイルシート 1:39 で次にコントロールしてみましょうSTY 1:42 .CSSを前面に出してでえ先ほどの 1:46 ヘッダーの色をですねじゃあオレンジにし 1:50 ましょうシャープヘッダーと書きますこの 1:54 シープの後に先ほどIDでつけた名前を 1:58 指定することによってスタイルシートで 2:02 色々属性ま変更をすることができます 2:05 じゃあヘッダーのバックグラウンドは 2:10 オレンジセミコロン 2:12 じゃ保存しまし 2:15 てブラウザーを更新しますブラウザーの 2:18 更新はコマンドRかWindowsは 2:21 コントロRリフレッシュのRねはいはい 2:25 するとオレンジになりましたねそうです 2:28 じゃ続いてはですねえサイドシャープ 2:33 サイドはえーどうしようかなま何色でも 2:38 いいんですけどピンクにしましょうか 2:39 バックグラウンドを 2:44 ピンクはい保存したら更新ボタを押します 2:48 ピンクなりましたそうですねこのようにし 2:51 てえ先ほどけたじゃもう1度見てみ 2:54 ましょうかイッ.1の前面に出して 2:56 くださいねそうすると先ほどけたIDでけ 2:59 けた名前をスタイルシートでこう変更する 3:02 ことによってこのブラウザーの見た目をね 3:05 変えることができますじゃあ 3:09 えっとま残りの2つをつけましょうかね 3:12 IDを振っていっちゃいましょう四角3は 3:15 ID= 3:18 コンテント四角4はID= 3:22 フッタにしとき 3:24 ましょうでそれぞれに今度はスタイル 3:27 シートの方ねスタイルシトでシャープおお 3:32 シャープ 3:35 コンテントはバックグラウンドが 3:41 グレイでシャープフッターがえっと 3:45 バックグラウンドの色がえじゃグリーンに 3:49 しとき 3:50 ましょうでブラウザーを更新して見ます 3:55 するとですねそれぞれ変えることができ 3:58 ました 4:00 じゃあえーこれであの1つ1つ動かせる 4:04 ようになりましたのでレイアウトをして 4:07 いきましょう 4:08 かスタイルシートでヘッたこれ今回はどう 4:13 いうものを作るかと言とあの前回お見せし 4:17 たようなウェブページらしいヘッダーが 4:19 あってサイドにメニューがあって 4:21 コンテントがあってフッダーがあるという 4:24 ようなやつを作っていきますのでまず 4:26 じゃあヘッダー部分から指定してみ 4:29 ましょう 4:30 ヘッターは高さつけてみましょうねハイト 4:33 が70 4:37 ピクセルヘッタこれだけでいいかなで保存 4:40 して更新ボタンを押し 4:43 ますはいはいするとこんな感じになりまし 4:47 たでは 4:49 サイドは幅wiidTHが200 4:55 ピクセルにしますちょっとやっちゃいます 4:58 ねコンテントの方なっちゃいましょう 5:00 コンテントはwiidTHがえ700 5:06 ピクセルサドにはこうなんかリンクがあっ 5:09 てでリンクをクリックするとコンテントの 5:12 部分が変わっていくって感じですよねま 5:15 更新してみてましょうはいはい幅が変わり 5:19 ました今回は 5:21 えっと高さは入れませんこのメニューとま 5:27 サイドの部分っていうのはメニューになる 5:28 とこなんですけどあとコンテントとかって 5:31 いう部分はえっとページによってねその 5:34 メニューの数によったりあと本文のこう長 5:38 さによったりして高さが変わっちゃうん 5:40 ですよねでこう高さがそのページによって 5:43 変わるものっていうのはあのハトの設定は 5:46 しないのが普通ですなので今回はですね 5:49 このコンテントサイドには高さは入れませ 5:53 んじゃ振った振ったはまこの下辺的なもの 5:57 が要素があまりないのでフッターには何が 6:01 書いてあるかというと会社概要とかね 6:03 アバウトASとかまいろんなこう固定的な 6:05 リンクが貼ってあるので高さがそう変わる 6:08 ことがないと思いますなのでハトを入れ 6:13 ときましょうか100 6:16 ピクセルはいはいこう書いてブラウザーの 6:20 更新ボタンを押しみ 6:22 ましょううん変わりましたでえっとま幅と 6:28 高さをこう変えたんですけれどもじゃあ次 6:32 はもう少しウェブページらしく見えるよう 6:35 にサイドとコンテント今こう縦ね重なっ 6:40 ちゃってますけどこれを横に並べてみます 6:42 ねそれはま簡単なんです横に並べたいもの 6:46 に対してサイドえ横に並べたいものてのは 6:50 サイドとコンテントですよねそこに 6:51 フロートレフトと書いてあげますフロート 6:56 レフトコンテントの最後の行にもフロート 7:00 レフト必ず2つ書いてください 7:03 ねはいこうする 7:06 と横に並ぶはずですうん四角2と3は横に 7:12 並びましたこれはフロートっていうのはま 7:14 今まで重なったものが浮かんでこう横に 7:17 並ぶ左寄せに並ぶみたいなイメージですね 7:21 で少しちょっとおかしいじゃないですか 7:24 これはですねあのまあ四角4っていうのが 7:28 四角のこのフロートの影響を受けちゃって 7:31 ま浮いちゃってるなんかこう下に回り込ん 7:33 じゃってるようなイメージなんですねえ 7:36 フロートの影響を受けちゃって 7:38 るっていうことなんですけどなのでこのふ 7:41 に関してはですねこのフロートの影響を 7:43 受けないよっていうのを書いてあげます 7:45 これも覚えちゃっていいかもしれないです 7:47 ねクリアボスと書きますなんかフロートの 7:51 影響を受けてこう回り込んじゃってるなと 7:53 思ったら私はその影響を受けないよって 7:57 こうクリアボスっていうのを書いてあげ 7:58 ますそうする 8:00 とうんえまあまあ影響受けずに下に 8:04 回り込んでくれるというわけですねじゃあ 8:08 まこれでウェブページらしいものに少し 8:11 なってきたんじゃないでしょうかでもです 8:13 ね確かにちょっとこのブラウザーを伸ばし 8:17 たり縮めたりしてみましょううん縮めると 8:20 ですね四角にとせっかく並べた2と3が 8:25 落ちちゃうんですねこれはまあまあ 8:28 ブラウザーの 8:30 こう横幅に対して影響を受けてしまっ 8:34 ちゃうからまこう落ちちゃったりするん 8:36 ですけどもこれを回避するための方法もま 8:39 最後にやってきましょう 8:41 かこれはですねあのラッパーという全てを 8:46 包み込むデブタグを用意する必要があり 8:49 ますこれはWebのあとCSSの 8:52 レイアウトで必ず使うのでよく覚えとき 8:54 ましょうじゃあ行きますよINDEX. 8:58 HTML今度はは表示してボディタグの 9:01 すぐ下にかこ 9:03 diivID= 9:07 ラッパーラップするね包むて意味ですよね 9:11 ラップするデブタグを包んえっと書いて 9:15 どこに終了タを書くかって言うとこの四角 9:19 4の下の行ここ2/ 9:22 diivと書いてあげますするとえっと 9:28 ちょっとわますねここのじゃ9行目から 9:32 13行目までをこう選択してタブキーを 9:35 押し 9:36 ますで 9:38 えっと9行目から12行目をま改めて選択 9:43 してタブキをし 9:44 ますこうするとラッパーというディブの中 9:48 ねこの縦のラインで見るんですよ縦の 9:50 ラインねここの縦のラインでラッパーと 9:54 いうディブタグの中にこの4つのディブ 9:57 タグが入ってるというのがすぐ分かります 10:00 コーディングする時はこのなんか入れ子に 10:03 なっているタグっていうのは必ずこう右に 10:06 ま下げるということをすると後で分かり 10:10 やすいですねじゃあまあまあこのラッパー 10:12 作りましたで保存しまし 10:15 てブラウザーを更新しましょううんまだ何 10:20 も変わりませんじゃあSTY.CSSを 10:23 ラッパーを書きましょうシャープラッパー 10:26 1番下の業に書いていただいてWIDTH 10:30 が 10:32 970 10:33 ピクセルまずこう書きましょう 10:37 かで保存してブラウザ更新するとちょっと 10:41 広げるとね分かると思うんですけども 10:44 970Pルっていう幅の中に全てのデブ 10:48 タグが収まってますでさっき問題だった 10:51 こうブラウザをちっちゃくすると落ちちゃ 10:53 うっていう問題もこれで解消されてます 10:56 ラッパーを作ることによってダウン落ちっ 10:59 て言うんですけどこのデブがこう落ちちゃ 11:02 うってことがなくなるんですねうんうまく 11:05 いってますじゃあ最後にウェブページって 11:09 いうの 11:10 はこう真ん中寄せにすることが多いと思う 11:13 んですけども真ん中寄せやっときましょう 11:16 これ全部今左寄せになってるじゃないです 11:18 かいくら広げようがね左に寄ってますけど 11:20 もこれを真ん中に寄せますラッパー970 11:24 ピクセルの下にマージンの0とこれも覚え 11:30 ちゃいましょうこう書いてあげるとページ 11:33 の真ん中寄せになりますじゃあ保存して 11:36 更新ボタンはいはいこれでちょっと 11:41 レイアウトらしいものができたんじゃない 11:44 でしょうかねそうなんです今日やったこと 11:47 を押えといていただければまある程度の 11:50 ページま見栄のいいものが作れるように 11:52 なりますのでえっと今回のですねこの資格 11:56 を並べとるいう練習はよくしておい 11:59 くださいで次回は実際にこの中に 12:03 コンテンツがある状態のものを作っていき 12:05 たいなと思いますじゃあ次も頑張り 12:08 ましょうどうもお疲れ様でした 12:16 [音楽]