課題解説：HTMLとCSSの基本的なマークアップとスタイリング
こんにちは！今回のブログ記事では、HTMLとCSSを使った基本的なレイアウト方法について解説します。具体的には、Flexboxを使用して、画像とテキストのセクションを効果的にレイアウトするテクニックについて説明します。細かい部分まで忠実に再現していきますので、ぜひ参考にしてくださいね。
HTMLのマークアップ
まずはじめに、以下のHTMLのマークアップを見てみましょう。
<section class="fx-container">
<img src="your-image.jpg" class="image">
<div class="desc">
あなたの解説テキストがここに入ります。
</div>
</section>
このセクションでは、Flexboxコンテナを使用して、画像とテキストを配置しています。
┌────────────────────┐
│ fx-container │ ← このセクションがFlexboxコンテナになります
│ ┌────────────┐ │
│ │ img (image) │ │
│ └────────────┘ │
│ ┌────────────┐ │
│ │ div (desc) │ │
│ └────────────┘ │
└────────────────────┘
CSSのスタイリング
次に、このHTML要素をスタイリングするためのCSSを見ていきましょう。この例では、Flexboxを使用して全体のレイアウトを作成します。
.fx-container {
display: flex;
}
.image {
flex: 1;
}
.desc {
flex: 3;
}
img {
width: 100%;
max-width: 100%;
}
それでは、CSSについて細かく見ていきましょう。
セクションのスタイリング
.fx-container {
display: flex;
}
この部分では、最外部のセクションをFlexboxコンテナとして定義しています。display: flex;を指定することで、内部のアイテムがFlexbox レイアウトになります。
イメージとテキストの割合設定
.image {
flex: 1;
}
.desc {
flex: 3;
}
ここで、.imageクラスに対してflex: 1;を、.descクラスに対してflex: 3;を指定することで、画像とテキストの割合を設定しています。画像が1に対して、テキストが3の割合になります。
┌────────────────────┐
│ ┌────┐ ┌────────┐ │
│ │ 1 │ │ 3 │ │
│ └────┘ └────────┘ │
└────────────────────┘
画像の幅調整
img {
width: 100%;
max-width: 100%;
}
画像の大きさがコンテナを超えてしまう場合には、imgタグに対して幅を100%に指定しておくと良いでしょう。また、max-widthを100%にすることで、ブラウザのサイズに応じて画像が自動的に伸縮します。
まとめ
今回の解説では、HTMLとCSSを駆使してFlexboxレイアウトを作成する方法について学びました。以下にまとめを示します。
1. Flexboxコンテナの設定 (`display: flex;`)
2. 各要素の割合を設定 (`flex: 1;`, `flex: 3;`)
3. 画像の幅を調整 (`width: 100%;`, `max-width: 100%;`)
これらのポイントを押さえておくことで、初心者でも簡単にレイアウトをカスタマイズすることができます。次回もお楽しみに！
あなたのスキルアップを支える、
CSSマスター
お読みいただきありがとうございました！質問やフィードバックがありましたら、コメント欄でお気軽にお知らせください。
タイムスタンプ
1 00:00:03,770 --> 00:00:09,089 それでは課題解説いきますねー
2 00:00:07,650 --> 00:00:13,760 こちら
3 00:00:09,089 --> 00:00:18,759 html はこんな感じになります web セクションで
4 00:00:13,759 --> 00:00:25,079 ありましてえっとここの大きなですね
5 00:00:18,760 --> 00:00:32,039 このワークですねこの緑色のところ緑色のところはこのセクション
6 00:00:25,079 --> 00:00:38,009 にあたりますでこのセクションはこっからここまでね
7 00:00:32,039 --> 00:00:45,210 で囲まれているわけですねこれが fx コンテナーになります
8 00:00:38,009 --> 00:00:47,140 でその中に自分のイメージと後はデブクラスですくっていうのが
9 00:00:45,210 --> 00:00:50,910 これがイメージですね
10 00:00:47,140 --> 00:00:55,049 でこちらがデスクになりま
11 00:00:50,909 --> 00:01:00,209 じゃあその css ばって言うと
12 00:00:55,049 --> 00:01:04,459 セクション一番外側のこの緑色のところですね
13 00:01:00,210 --> 00:01:05,370 緑色のところはディスプレイがフレックス
14 00:01:04,459 --> 00:01:09,089 で
15 00:01:05,370 --> 00:01:09,960 ブレックスコンテナがになりましたこのセクションフレックスコンテナになったんです
16 00:01:09,090 --> 00:01:14,350 ね
17 00:01:09,959 --> 00:01:20,109 で左側のイメージというのは割合が1
18 00:01:14,349 --> 00:01:25,699 ドットイメージこのクラスの.イメージはここに対応しますけれども割合が1
19 00:01:20,109 --> 00:01:27,640 x1でもう一つこのクラスですくって言うとこの右側ですね
20 00:01:25,700 --> 00:01:30,060 こっちこれは
21 00:01:27,640 --> 00:01:34,560 割合がさんので flex 3
22 00:01:30,060 --> 00:01:41,070 そしてもう一つですねあの子の画像の大きさ
23 00:01:34,560 --> 00:01:43,680 大きすぎると思うんですけれどもこれは img タグに対してええっと幅を100%
24 00:01:41,069 --> 00:01:48,779 にしておくといいかもしれないですね
25 00:01:43,680 --> 00:01:50,610 あの max ビーズでもいいかもしれないですこの img タグに対して100%
26 00:01:48,780 --> 00:01:52,299 ってやると
27 00:01:50,609 --> 00:01:53,549 9
28 00:01:52,299 --> 00:01:57,239 そっ
29 00:01:53,549 --> 00:02:00,868 このボックスありますよねこれはイメージ
30 00:01:57,239 --> 00:02:05,750 このボックスになりますけれどもここに対して
31 00:02:00,868 --> 00:02:13,000 画像が100%になっているよということがですね
32 00:02:05,750 --> 00:02:13,000 なのでどんどん伸び縮みしたときにここがマックスイーツにしておくともっといいかな
33 00:02:13,530 --> 00:02:23,900 でじゃバイ max 配布 wits っていうのがあるんですよ
34 00:02:17,939 --> 00:02:27,270 そうするとところでブラウザ尾道地味させたときについてくるようになってくれるんで
35 00:02:23,900 --> 00:02:28,390 より良いかなと思います
36 00:02:27,270 --> 00:02:30,099 はい
37 00:02:28,389 --> 00:02:35,189 どうでしょうか
38 00:02:30,098 --> 00:02:36,099 かけましたでしょうかこのクラス名は何でもよかったんですけれども
39 00:02:35,189 --> 00:02:38,969 うん
40 00:02:36,099 --> 00:02:41,579 これがうまく実現できてた人は
41 00:02:38,969 --> 00:02:46,159 ok というわけです
42 00:02:41,580 --> 00:02:46,160 はいじゃあ以上で解説を終わります