ドットインストール（詳解CSS編）【後編】

さて前編では「フレックスボックス編」までを行いました。

そして今回は後編となりますが、まず最初に、
「レスポンシブウェブデザイン編」をしてから、次に「実践！アプリ紹介ページを作ろう」をしました。

「レスポンシブウェブデザイン編」まですれば、「実践！アプリ紹介ページを作ろう」はできるので、この順番で行いました。

「実践！アプリ紹介ページを作ろう」は、基本的には動画の通り真似して進めていけば最終的にサイトが完成するので、特に問題はなかったです。
:nth-child(even)を使って画像と文章のセットを左右交互に並べていく方法は今後も使っていくことがあると思うので新たな学びになりました。こんな感じです。↓↓↓

【HTML】
<div class="container">
　<section>
　　<div class="pic">
　　　<img src="img/image1.png">
　　</div>
　　<div class="desc">
　　　<p>文章１</p>
　　</div>
　</section>

　<section>
　　<div class="pic">
　　　<img src="img/image2.png">
　　</div>
　　<div class="desc">
　　　<p>文章２</p>
　　</div>
　</section>

　<section>
　　<div class="pic">
　　　<img src="img/image3.png">
　　</div>
　　<div class="desc">
　　　<p>文章３</p>
　　</div>
　</section>
</div>

【CSS】
.container section {
　display: flex;
}

上記の通りに表示すると、以下のようになります。

画像１　文章１
画像２　文章２
画像３　文章３

ところが、CSSを下記の通りにすると・・・

【CSS】
.container section {
　display: flex;
}

.container section:nth-child(even) {
　flex-direction: row-reverse;
}

画像１　文章１
文章２　画像２　　（←反対になった！）
画像３　文章３

このようになりました。
つまり、「.container section:nth-child(even){flex-direction: row-reverse;}」とすることで、container内の偶数番目のsectionの向きを反対にすることができました。

せっかくなので、このサイトを１から自力で作れるように再び挑戦したいと思っています！

そしてその後、残りの「グリッドレイアウト編」と「変数編」をしました。

「グリッドレイアウト編」は、結構細かいことまで触れてる感がしました。もちろん１回で理解するのは不可能ですが、とりあえずは「grid-template」と「grid-area」を抑えておけばいいのかなって感じです。

「変数編」も、要は「--変数名: 値;」を覚えれば良い感じですよね。。。
そんな感じで終わりました。笑

ということで、ドットインストールのHTML＆CSSが一通り終わりました。
とりあえずもう一度「実践！アプリ紹介ページを作ろう」を自力でしようかなと思います。

その後は、「Bootstrap 4入門」をしていく予定です。

それでは！

（次回に続く）