【デイトラ】Web制作コース初級編②『コーディング練習編』の感想と学習記録

こんにちは、アルパカ（@engineeraru）です。

デイトラのWeb制作コース初級編『コーディング練習編』を学習するときに役立つ情報をまとめました。

デイトラ Web制作コース初級編『コーディング練習編』の学習記録

【DAY5】ゼロからサイトを作る①

POINT
ミスに慣れる！

ミスは「仕組み」で対策する

パソコンは人間と違って「曖昧な指示」は受けてくれません。

一文字でも間違えると、ちゃんと動いてくれないんですよね。

特に間違えやすいのは記号のミスや、スペスミスなどです。

ミスしたときに「自分の注意不足だった、次から頑張ろう」と努力するのはおすすめしません。

VSCodeのプラグインを使うなど「仕組み」で対応するのが、良いプログラマになる第一歩ですね。

参考Code Spell Checker記事

作るものを「パーツ」で考える

Webページを作るときは、全体像を理解した上でコーディングすると分かりやすいです。

上記の6個のパーツを、順番に作っていくイメージです。

今回作ったのは一番上の「header」ですね😊

初心者の天敵float

たぶん、HTMLを学んで最初の難関がfloatです。めちゃくちゃ理解しづらい場所なんですよね…。

空タグとclearでfloatを解除するテクニックが紹介されていました。

簡単に言うと

float指定しているから「次の要素」は続けて（右側に）表示されてしまう
でもやりたいことは、「次の要素」を改行して表示すること
だから「clear」をつかう

みたいな感じ。

clearはあまり使われないとも聞くので、理解できなくても一旦先に進むのもあり（だと個人的には思います）。

理解したい人は

が参考になりますよ！

復習時に読むべき記事

【DAY6】ゼロからサイトを作る②

POINT
flexboxを理解する！

displayとflexの理解

Flexboxを使うためには、display:flexとします。

CSSの超基本のおさらいですが、要素の指定方法は

どこの　＝　セレクタ
なにを　＝　プロパティ
どうする　＝　バリュー

という形式でしたよね。

つまり、

プロパティがdisplay
バリューがflex

という指定によって、flexboxが使えます。

プロパティが「display」なら「要素の配置の仕方」を変えると理解すると良いかも。

※「プロパティがcolor」なら、テキストの色が変わるのと同じです

そもそもdisplayってなんだっけ？という人は、全体像を確認しておくと良いですね

参考http://www.htmq.com/style/display.shtml

flexboxを理解するのにオススメな教材

flexboxを使いながら理解するなら、このゲームが超オススメ！

flexbox froggy
flexbox froggy 回答

あと、ProgateのFlexboxの教材も役に立ちますよ！

今どこを作っているのかを理解する

DAY5でも書きましたが、Webページの全体像をまずは理解しておくと良いですよ。

「今何をやっているんだっけ」と見失いそうになったら、下記の図を見て、どこをやっているか把握してみてくださいね。

復習時に読むべき記事

【DAY7】ゼロからサイトを作る③

POINT
レスポンシブに必要なものを理解する

レスポンシブデザインとは？

昔はパソコン向けのWebページしかありませんでした。

しかし、今はスマホでWebページを見るのが当たり前ですよね。

なので、パソコンでもスマホでも「良い感じ」に見られるページを作るのは現代なら必須です。

そのためには「レスポンシブ対応」を行うわけですが、やっていることは

「あるサイズ以上の横幅になったら、見た目を変える」

という処理を入れるだけ。

順番に

タブレットの画面サイズの場合　→　見た目を変える
スマホの画面サイズの場合　→　見た目を変える

という処理を書いているだけですね。

専門用語が色々と出てきましたが、まとめると

メディアクエリは、@media (条件) { …. }と書く
max-width: ◯◯px　の　◯◯部分がブレイクポイント

という理解でOKだと思います。

メディアクエリの指定順番

CSSは上から順番に読み取るので、メディアクエリの指定順番は

モバイルファーストの場合は「小さい→大きい」
デスクトップファーストの場合は「大きい→小さい」

で書くようです。

今回作ったのはデスクトップファーストで、max-widthを「大きい→小さい」の順番に記述していきましたね。

メディアクエリのmax-width指定は「以下」です（「未満」じゃない）

メディアクエリのmax-width指定は「以下」です。

以下なので「指定した値を含む」ということ（「未満」と混同しがちなので注意！）

Most media features accept optional ‘min-’ or ‘max-’ prefixes to express “greater or equal to” and “smaller or equal to” constraints. This syntax is used to avoid “<” and “>” characters which may conflict with HTML and XML. Those media features that accept prefixes will most often be used with prefixes, but can also be used alone.

» 参考：Media Queries

復習時に読むべき記事