【DAY7.】30DAYSトライアル7日目をわかりやすく解説

レスポンシブサイト

 

おはこんばにちは、ミヤビです。

 

さて、今回は#30DAYSトライアルDAY7.について解説します。

 

 

これにてProgateは卒業ですが、繰り返し学習して知識を定着させましょう。

 

✔︎本記事の内容

  • DAY7.『Progate HTML & CSS 上級道場コース』の解説

 

✔︎30DAYSトライアル1stの最終目標

  • 月5万を稼ぐスキルを目指す
  • 未経験からWEB系エンジニアの転職を目指す
  • 未経験からWEB系ノマドエンジニアを目指す

 

Webサイトを作るにはレスポンシブサイトをイメージしつつコーディングしましょう。

 

なぜなら、スマホ時代の今、レスポンシブは必須だからです。

 

ユーザー大半はスマホでWebサイトを訪問します。

 

とはいえ、CSSフレームワークであるBootstrapを使えば、レスポンシブサイトを簡単に作れたりもしますが…

 

たまに、レスポンシブ対応になっていないサイトを閲覧すると萎えます。

 

萎えると、ユーザービリティーの低下を招きますので、レスポンシブを意識したコーディングを目指しましょう。

【DAY7.】30DAYSトライアル上級道場コースの学習ポイント

 

 

clearについて解説します。

 

clearでfloatを解除するマル秘テクニック

clearの解説

 

上記の画像解説のように、子要素にfloatを指定すると、親要素が高さを保てなくなります。

 

親要素から見て、子要素は浮いている状態なので、子要素はどこ行った?という感じです。

 

今回の場合だと、、、

 

  • 各.lessonは「float: left;」によって浮いている状況
  • 親要素のlesson-wrapperのbackground-colorは高さを保てなくなる

 

こんな感じで、子要素にfloatを指定すると、親要素のbackground-colorの高さが保てない状況になってしまってます。

 

解決法は、親要素に高さを持てるようにすることです。

 

つまり、空タグのclearプロパティを使い、親要素の高さを意図的に持たせるようにするということです。

 

手順を解説

 

  1. HTMLに空タグのclearクラスを挿入(.lessonの一番最後)
  2. CSSにclear: left;でfloatの回り込みを解除

 

<div class="clear">
<!-- ここは空です -->
</div>
.clear {
clear: left;
}

こんな感じですね。

 

プロパティ動作
clear: left;左側への回り込みを解除
clear: right;右側への回り込みを解除
clear: both;左右への回り込みを解除
clear: none;回り込みの解除なし

 

基本的には、clear: both;で良いと思います。

 

その他のfloatの解除方法

ちづみさんが解説しています。

 

 

  • overflow: hidden;
  • clearfix

 

overflow: hidden;を使ってみよう

親要素にoverflowのhiddenを指定すれば、親要素の高さを持たせることができます。

 

.lesson-wrapper {
overflow: hidden;
}

 

これで、親要素の高さが復活します。

 

clearfixを使ってみよう

HTMLのfloatされた親要素に、clearfixというクラスを与えます。

 

あとは、CSSで記述するだけです。

.clearfix: after; {
content"";
display: block;
clear: both;
}

 

上記で紹介した、floatを解除する方法を実践すれば、簡単にfloatの問題を解決することができます。

 

Progateで学んだこと以外でも、overflowやclearfixでfloatの問題を解決させることができます。

 

自分でも実際に試して見てみると、きっと理解も深まりますよ。

30DAYSトライアルProgate編の総まとめ【DAY1~7.】

というわけで、ここまでのプログラミング学習で重要なことは、、、

 

  • 最初から完璧を求めない
  • レスポンシブサイトを見越した完成形をイメージする
  • 次なるステップは実践です

 

上記の3点をしっかりと意識することで、挫折しにくくなると思います。

 

大事なのは、継続です。

 

最初から完璧を求めてはいけません

最初から完璧を求めたいと思ってはいけません。

 

なぜなら、挫折して継続を辞めてしまうからです。

 

どの道、プログラミングを勉強していれば挫折はするので、挫折は当たり前くらいのスタンスで勉強していいましょう。

 

最初の理解度は30%、2週目は50%、3週目は70%くらいの理解というように、繰り返し学習してコーディングの理解を深めていくことです。

 

とにかく、継続することが大事なので、わからなくても手を動かして前に進みましょう。

 

レスポンシブサイトを見越した完成形をイメージする

レスポンシブサイトを見越した完成形をイメージしつつ、コーディングしていきましょう。

 

その際の重要なことが、HTMLからCSSの順でコーディングすることです。

 

手順は下記のとおり。

 

  1. WEBサイト全体の設計をイメージ
  2. HTMLの完成形をイメージ
  3. 完成形のHTMLとおりにコーディング
  4. HTMLのどこにデザインをするか完成形をイメージ
  5. イメージした完成形とおりにCSSでコーディング

 

全体をイメージ・設計してから細部を施していきます。

 

デザインを見つつ、上から順にHTML・CSSをコーディングしていくと、全体像が掴みにくいです。

 

効率的なコーディングを行うためにも、全体から部分を意識していきましょう。

 

次なるステップは実践です

学習したらそれをアウトプットしましょう。

 

今までは、Progateでインプット作業が中心でしたが、それだけでは成長は望めません。

 

なぜなら、「勉強した気になっている」状態で満足してしまっているからです。

 

  • Progateでインプット
  • ローカル環境で、サイト模写
  • 自分で成果物の作成

 

それでは、次回からはローカル環境の設定に入ります。

 

ここから本格的に実践的なアウトプット作業になりますので、これからが楽しみですね。

 

web開発 【DAY8.】30DAYSトライアル8日目をわかりやすく解説

 

【無料あり】おすすめするプログラミングスクール3社【ニーズ別に紹介】