ドットインストールが独学初心者に向いている理由

ドットインストールのCSS入門（全17回）を無事に終わらせることができました。このサイトのコンセプトは『3分動画でマスターできる、初心者向けプログラミング学習サイト』というものですが、実際にやってみてどうだったか所感を記しておきます。

千里の道も一歩から

私はCSSに関する専門書や入門書を買ったりはせず、ドットインストールだけ視聴するという勉強法にしてみました。ドットインストールの場合、学習から実践・復習まで、すべてPCの画面上で完結するため、PCを開きさえすれば学習できます。

しかし書籍で学習する場合は、実践や復習の段階で別途PCを用意しなくてはならず、少し面倒に感じてしまったことでしょう。

マスターするまでは千里のように長い道のりでも、とりあえずコードを書くという一歩を踏み出すために、PCに向かうハードルは極力低くしておいた方が良いと思います。

継続は力なり

レッスンを通じて、コーディングという技術の取得への近道は、実践しながら画面を作り上げていき、それを反復して覚えていくことだとわかってきました。そうなると継続（反復）へのハードルの低さも重要になります。

ドットインストールは無料会員でもユーザー登録さえすれば、動画視聴画面のそばに学習状況を知らせるアラートが出現します。そこには完了率がグラフで表され（下図）、毎回レッスンの視聴が終わると自動的に更新されるため、着実に進んでいる実感を味わえます。

またこれとは別に週1回、進捗をお知らせしてくれるメルマガも届きます。こちらには何日に何本視聴できたか表示されていて、一週間単位で学習状況を振り返れるのです。

このように進捗を自動で管理してくれると楽ですし、モチベーション維持にもつながります。

CSS入門を終えて、さらに学習意欲は高まっているので、次はFirebaseでウェブサイトを公開してみよう（全9回）をやってみたいと思います。

それでは最後に学習日誌を記して終わります。

#15 フッターのリンクを完成させよう

第15回ではフッターの調整を行いました。まず幅を上のコンテンツと同じ400pxに設定。そしてフッターの余白は上はなし、左右は中央揃え、下は60pxに設定したものが下図です。

そしてリンク画像（メール・ブログ・写真）をマウスオーバーしたときに、画像の透明度を変えて見た目を変化させるopacityというプロパティを使用し、60％の透明度に変化するよう指定しました（下図）。

これにて完了。らくちん、らくちん！

#16 floatで要素の位置を変えてみよう

続いてフッターのコピーライトの調整を行いました。文字色をライトグレーに、サイズは14pxに設定しました（下図）。

また新しいプロパティも登場！floatプロパティというものです。floatを使うと、適用した要素を本来の配置場所から浮かせることができ、floatを適用しなかった要素は適用した要素の周囲を回り込んで配置されます。

今回はリスト（メール・ブログ・写真）にfloat: left; として、左側に浮かせる設定をしたので、その後ろの要素（コピーライト）はリストを回り込んで表示されました（下図）。

floatについてはTechAcademyマガジンにも使い方の説明がありましたよ。第16回はこれで終了。あっという間にできちゃった♪

#17 プロフィールサイトを完成させよう

第17回は仕上げに取りかかりました。ユーザーが今見ている位置（ページ）を把握できるように、HOMEボタンに下線をつけました（下図）。

他にも細々した調整を行い、これにてCSS入門の全レッスン終了です！ぱふぱふっ！