![見出し画像](https://assets.st-note.com/production/uploads/images/25901963/rectangle_large_type_2_0d8e82fef58ee076fc76a2cb6bade12d.png?width=1200)
ドットインストール(詳解CSS編)【後編】
さて前編では「フレックスボックス編」までを行いました。
そして今回は後編となりますが、まず最初に、
「レスポンシブウェブデザイン編」をしてから、次に「実践!アプリ紹介ページを作ろう」をしました。
「レスポンシブウェブデザイン編」まですれば、「実践!アプリ紹介ページを作ろう」はできるので、この順番で行いました。
「実践!アプリ紹介ページを作ろう」は、基本的には動画の通り真似して進めていけば最終的にサイトが完成するので、特に問題はなかったです。
:nth-child(even)を使って画像と文章のセットを左右交互に並べていく方法は今後も使っていくことがあると思うので新たな学びになりました。こんな感じです。↓↓↓
【HTML】
<div class="container">
<section>
<div class="pic">
<img src="img/image1.png">
</div>
<div class="desc">
<p>文章1</p>
</div>
</section>
<section>
<div class="pic">
<img src="img/image2.png">
</div>
<div class="desc">
<p>文章2</p>
</div>
</section>
<section>
<div class="pic">
<img src="img/image3.png">
</div>
<div class="desc">
<p>文章3</p>
</div>
</section>
</div>
【CSS】
.container section {
display: flex;
}
上記の通りに表示すると、以下のようになります。
画像1 文章1
画像2 文章2
画像3 文章3
ところが、CSSを下記の通りにすると・・・
【CSS】
.container section {
display: flex;
}
.container section:nth-child(even) {
flex-direction: row-reverse;
}
画像1 文章1
文章2 画像2 (←反対になった!)
画像3 文章3
このようになりました。
つまり、「.container section:nth-child(even){flex-direction: row-reverse;}」とすることで、container内の偶数番目のsectionの向きを反対にすることができました。
せっかくなので、このサイトを1から自力で作れるように再び挑戦したいと思っています!
そしてその後、残りの「グリッドレイアウト編」と「変数編」をしました。
「グリッドレイアウト編」は、結構細かいことまで触れてる感がしました。もちろん1回で理解するのは不可能ですが、とりあえずは「grid-template」と「grid-area」を抑えておけばいいのかなって感じです。
「変数編」も、要は「--変数名: 値;」を覚えれば良い感じですよね。。。
そんな感じで終わりました。笑
ということで、ドットインストールのHTML&CSSが一通り終わりました。
とりあえずもう一度「実践!アプリ紹介ページを作ろう」を自力でしようかなと思います。
その後は、「Bootstrap 4入門」をしていく予定です。
それでは!
(次回に続く)
この記事が気に入ったらサポートをしてみませんか?