CSSでウェブサイトを作成しよう！

さて、ここまで来たらあとはCSSですね。リンクもすでに設定済みですので、早速始めましょう。

背景色を設定する

まず始めに、背景色を設定していきましょう。今回使用するレイアウトはフレックスボックスを使って構築します。背景色はグレーにします。

body {
    background: gray;
}

この設定を確認すると、背景がグレーになっているのがわかります。

コンテナーの設定

次に、ページ全体の囲み（コンテナー）を設定します。幅は1140ピクセルで、中央に配置されるようにします。

.container {
    max-width: 1140px;
    margin: 0 auto;
}

設定後、中央に配置されていることを確認してください。

ヘッダーの設定

続いて、ヘッダーの設定を行います。ヘッダーの背景色は#445721の緑色にします。

.header {
    background-color: #445721;
    padding: 30px;
}

設定後、ヘッダーがヘッダーらしき見た目になります。

メインコンテンツの設定

次にメインコンテンツのスタイルを設定します。背景色を白、パディングを30ピクセルにしましょう。

.main {
    background-color: white;
    padding: 30px;
}

設定後、コンテンツ部分が白くなりました。ウェブサイトの要素がそれっぽくなってきましたね！

サイドバーとコンテンツのレイアウト

メインコンテンツをサイドバーと主要コンテンツに分けます。HTMLではこれらが「.content」と「.sidebar」で定義されています。フレックスボックスを使って左右に並べましょう。

.container {
    display: flex;
}

.content {
    flex: 5;
}

.sidebar {
    flex: 2;
}

設定後、両者が左右に分かれて表示されます。

+---------------------------+
|      Content Area         |
|                           |
|      flex: 5              |
+---------------------------+
+------+|
| Sidebar |
| flex: 2 |
|        |
+------+

画像のサイズ調整

画像が大きすぎる場合、以下のようにして画像の幅を100%に設定し、コンテナーがはみ出さないようにしましょう。

img {
    width: 100%;
    max-width: 100%;
}

これでレスポンシブな画像表示が可能になります。

セクション内のレイアウト

次にセクション内の「.image」と「.description」を並べます。これもフレックスボックスを使います。

.section {
    display: flex;
}

.image {
    flex: 2;
}

.description {
    flex: 5;
}

+-------++-----------------+
| Image ||   Description   |
| flex: ||     flex: 5     |
+-------++-----------------+

フッターの設定

最後にフッターのスタイルを設定します。背景色を#333のグレーにし、パディングを30ピクセルに設定します。

.footer {
    background-color: #333;
    padding: 30px;
}

設定後、フッターが適切に表示されます。

まとめ

これで、フレックスボックスを用いた基本的なレイアウトの作成が完了しました。フレックスボックスを使うと、比較的簡単にレイアウトを構築することができます。

皆さんもぜひ他のパターンも試して、いろいろなレイアウトを作ってみてください！

タイムスタンプ

1 00:00:00,000 --> 00:00:08,609 さていきましょうここまで来たらあとは css ですねリンクは晴れてるし

2 00:00:04,799 --> 00:00:14,719 じゃあここにへ css を書いていきましょう

3 00:00:08,609 --> 00:00:18,059 rex ボックスを使ったねレイアウトになりますまぁこれでへと背景色はグレーのう

4 00:00:14,718 --> 00:00:19,689 まずここからいきましょうか背景色グレー

5 00:00:18,059 --> 00:00:22,229 ボディが

6 00:00:19,689 --> 00:00:26,660 バックグラウンドグレー

7 00:00:22,230 --> 00:00:31,969 ってことですねこれ見るとをグレーンできました

8 00:00:26,660 --> 00:00:37,549 でまぁこのロゴがねちゃんと白く抜けてますでは次

9 00:00:31,969 --> 00:00:41,119 今度はヘッダーの設定ですかねヘッダーは

10 00:00:37,549 --> 00:00:44,429 っとやヘッダー名前全体の囲みですね

11 00:00:41,119 --> 00:00:51,459 全体の囲みは

12 00:00:44,429 --> 00:00:53,740 8140ぴく生1140ピクセルで真ん中どれこれはコンテナんですよね

13 00:00:51,460 --> 00:00:55,120 ドット本テナーわー

14 00:00:53,740 --> 00:00:56,310 [音楽]

15 00:00:55,119 --> 00:00:57,640 8

16 00:00:56,310 --> 00:01:03,070 [音楽]

17 00:00:57,640 --> 00:01:07,060 max wits 幕スイーツが1140 px で

18 00:01:03,070 --> 00:01:10,280 margin 0ところ真ん中ぞれのもですね margin 0

19 00:01:07,060 --> 00:01:14,450 ヴァージン前 auto

20 00:01:10,280 --> 00:01:15,829 これで ok かなじゃあ見てみましょうえっ

21 00:01:14,450 --> 00:01:19,710 これで

22 00:01:15,829 --> 00:01:23,849 真ん中になってますね大丈夫そう

23 00:01:19,709 --> 00:01:32,408 ポケッこれでなぜの王となりました

24 00:01:23,849 --> 00:01:34,119 次はヘッダーの設定ヘッダーは背景色が44572いい緑ですね

25 00:01:32,409 --> 00:01:37,680 よしいきましょう

26 00:01:34,120 --> 00:01:37,680 ドットヘッダーは

27 00:01:37,900 --> 00:01:46,930 8バックグランドがーシャープの

28 00:01:41,269 --> 00:01:50,890 いきでしたっけ445721用45721

29 00:01:46,930 --> 00:01:57,260 デパリングが30でした padding が30ピクセル

30 00:01:50,890 --> 00:02:00,450 これで見てみましょう一をちょっとなんかヘッダーぽくなりました

31 00:01:57,260 --> 00:02:02,409 では続きまして今度は

32 00:02:00,450 --> 00:02:06,189 どの部分でしょうかね

33 00:02:02,409 --> 00:02:09,610 ここですかね今度は今メインというところ

34 00:02:06,188 --> 00:02:12,149 これは背景色は白でパターンが30ピクセル

35 00:02:09,610 --> 00:02:12,149 きます

36 00:02:13,210 --> 00:02:18,510 ここで html で言えばこのメインのと子

37 00:02:17,479 --> 00:02:21,280 まあ

38 00:02:18,509 --> 00:02:25,049 . main

39 00:02:21,280 --> 00:02:25,050 とバックグラウンドが

40 00:02:25,860 --> 00:02:29,210 ホワイト

41 00:02:27,659 --> 00:02:34,609 て

42 00:02:29,210 --> 00:02:35,420 6か設定見てましょうね padding 30ピクセル padding が30

43 00:02:34,610 --> 00:02:37,960 pics

44 00:02:35,419 --> 00:02:39,659 まずこれで見てみましょう

45 00:02:37,960 --> 00:02:42,270 一を

46 00:02:39,659 --> 00:02:46,210 いいです白くなりました

47 00:02:42,270 --> 00:02:52,260 こんな感じだってウェブサイトっぽくなりましたねー

48 00:02:46,210 --> 00:02:52,260 そうでそうですで続いて今度は

49 00:02:52,719 --> 00:03:01,680 これ左右に分けるわけですよねこれサイドバーと

50 00:02:57,039 --> 00:03:10,189 コンテントサイドバーにしたはずです html で見ると

51 00:03:01,680 --> 00:03:16,170 コンテントと再度ばなのでこのメインの部分に関してはディスプレイがフレックス

52 00:03:10,189 --> 00:03:18,139 ねコンテナーですよねこれがねこうなると保存してまず見てみます

53 00:03:16,169 --> 00:03:22,909 左右になりました

54 00:03:18,139 --> 00:03:28,279 これでえっとちょっとこの画像ですね

55 00:03:22,909 --> 00:03:32,900 画像がすごくちょっと大きくなっちゃってるんでこれは8今回はちょっとラフにですね

56 00:03:28,280 --> 00:03:37,900 この img タグは横幅がも100%しておきましょう

57 00:03:32,900 --> 00:03:37,900 治るっていう with が100%

58 00:03:38,849 --> 00:03:44,799 9スイーツ柄いてこな

59 00:03:40,990 --> 00:03:47,270 最大が100%するとまぁこれはあの

60 00:03:44,800 --> 00:03:50,390 はみ出さないでおさまってくれて

61 00:03:47,270 --> 00:03:53,450 こう幅によってちっちゃくなったりしてくれますね

62 00:03:50,389 --> 00:03:55,859 レスポンシブな指定の仕方です

63 00:03:53,449 --> 00:04:00,259 姫路100%にしました

64 00:03:55,860 --> 00:04:05,120 でここはちょっとオンスじゃないですけれども

65 00:04:00,259 --> 00:04:06,579 で今度は左右に分かれていて

66 00:04:05,120 --> 00:04:10,469 ここが

67 00:04:06,580 --> 00:04:17,310 どれぐらいですかねこれはねやっぱり号対2くらいですかねぇ

68 00:04:10,469 --> 00:04:18,040 なので8ここで.コンテントはふれっくすが

69 00:04:17,310 --> 00:04:22,339 えっと

70 00:04:18,040 --> 00:04:25,230 後で撮っと再度バーガー

71 00:04:22,339 --> 00:04:28,709 8プレックスがにサイドバー

72 00:04:25,230 --> 00:04:33,180 フレックスがに電動なるでしょうか

73 00:04:28,709 --> 00:04:36,180 これでをなんかいい感じになりましたねー

74 00:04:33,180 --> 00:04:40,400 ok ok いいじゃないですか

75 00:04:36,180 --> 00:04:44,000 こうなっていてじゃあ今度は

76 00:04:40,399 --> 00:04:48,679 これなんかほぼね良さそうですけれども

77 00:04:44,000 --> 00:04:54,740 今度この図を見ると8ここねセクション

78 00:04:48,680 --> 00:04:55,850 さっきは分けてイメージとディスクっていうのがありましたのでこのセクションが今度

79 00:04:54,740 --> 00:04:59,420 は黄砂いう並べる

80 00:04:55,850 --> 00:05:01,849 ねセクションはフレックスですよねこれね

81 00:04:59,420 --> 00:05:04,330 html コードで言うと

82 00:05:01,848 --> 00:05:10,389 この部分この部分ね

83 00:05:04,329 --> 00:05:14,180 この部分は青くしょんはこのイメージとデスクのコンテナーになるので

84 00:05:10,389 --> 00:05:17,600 フレックスコンテナなるので

85 00:05:14,180 --> 00:05:21,540 ここ.セクションわー

86 00:05:17,600 --> 00:05:25,210 ディスプレイがフレックスです

87 00:05:21,540 --> 00:05:30,790 でその中身.

88 00:05:25,209 --> 00:05:35,319 イメージ写真の部分はえーっとフレックスが

89 00:05:30,790 --> 00:05:37,560 努力ですがこれににしておきましょうかではリアがにで

90 00:05:35,319 --> 00:05:45,959 で.で救っ

91 00:05:37,560 --> 00:05:51,060 ともうちょっとこうしましょうね.デスクは8フレックスが割合がじゃあこれは

92 00:05:45,959 --> 00:05:52,089 やっぱり後にしておきましょうかニートもうねこれで見てみるととなるでしょうか

93 00:05:51,060 --> 00:05:53,829 を

94 00:05:52,089 --> 00:05:55,310 ありました

95 00:05:53,829 --> 00:05:58,879 そうですね

96 00:05:55,310 --> 00:06:06,860 これでちゃんとなってますね

97 00:05:58,879 --> 00:06:11,610 それと最後はあとここフッターの部分は333で padding が30ピクセル

98 00:06:06,860 --> 00:06:16,160 じゃあこれ.振ったあ padding が

99 00:06:11,610 --> 00:06:20,060 30ピクセルのバックグラウンドが

100 00:06:16,160 --> 00:06:24,830 8#の333これはこう

101 00:06:20,060 --> 00:06:26,968 6つ書くのと同じねこれはあの略せるですこういうふうに333

102 00:06:24,829 --> 00:06:27,979 グレーですね

103 00:06:26,968 --> 00:06:29,389 エイ

104 00:06:27,980 --> 00:06:31,090 はい

105 00:06:29,389 --> 00:06:32,750 できました

106 00:06:31,089 --> 00:06:35,839 これで

107 00:06:32,750 --> 00:06:36,430 ちゃんとレイアウトをね組むことができました

108 00:06:35,839 --> 00:06:42,099 ん

109 00:06:36,430 --> 00:06:45,269 フレックスボックスを使うとねわりかし簡単にこういうふうに

110 00:06:42,100 --> 00:06:46,500 レイアウトを作ることができるんです

111 00:06:45,269 --> 00:06:50,609 はい

112 00:06:46,500 --> 00:06:51,709 できましたでしょうかまずここまでできれば色んな事が色んな

113 00:06:50,610 --> 00:06:55,970 [音楽]

114 00:06:51,709 --> 00:06:59,399 レイアウトが作れるようになると思いますので皆さんもこれだけじゃなくて他のものも

115 00:06:55,970 --> 00:07:03,080 で練習してみてくださいそれでは

116 00:06:59,399 --> 00:07:03,079 江戸レイアウト以上にしましょう

====