スクリーンショット_2019-01-21_23

先生を掛け持ちすると理解が深くなる

今週からドットインストールの学習に加えて、本を使った学習もスタートさせました。

選んだ本はこちら。

教材にあまりお金をかけたくないので、図書館で借りてきました。全279ページを返却期限までの14日間で読み終わるように、毎日20ページずつ読み進めるというルールにしました。

始めて2日経ったところですが、ドットインストールの先生とこの本の著者とでは、説明の仕方が微妙に違っている部分があり、それがむしろよかったです。

あのとき先生が言ってたことはそういうことだったのか!と、自分が理解したつもりでとどまっていたことに気づけました。

説明する人が変わるということは、視点が変わるということになり、別の視点から言語化された説明を聞くことで、知識という水滴が、深い理解という大きな川へと成長していくような感覚がありました。

そんなわけでドットインストールの学習もより楽しめるようになり、進み具合も早くなりました。

今日は4回分の学習日誌をまとめてアップします。視聴時間は合計8分16秒でした。

05 画像を絶対配置してみよう

第5回ではpositionプロパティを使って、画像(下図の赤枠)をヘッダー内の右下に絶対配置する方法を学習しました。

positionプロパティもうろ覚えだったので、まとめサイトで復習しつつ、進めました。サルワカというサイトはなんでも超わかりやすくて重宝しています。

さらにFont AwesomeというWebアイコンフォントサービスを使って、リンクのアイコンを表示させる方法も習いました。

Font Awesomeから使いたいアイコンを選び、そのアイコンのページに公開されているコードをコピーさせてもらって、HTML内の表示させたい場所に貼り付ければOK。

はい、この通り!なーんと便利なんでしょう!

今後、本番のポートフォリオサイトの制作にも使えるかもしれないので、Font Awesomeのサイトはブックマークしておきました。

06 共通のスタイルを切り出しておこう

今回は共通のスタイルに関して、まとめてスタイリングできるように、これまで書いてきたCSSのコードの整理をする回でした。

寝る直前に視聴していたので、楽ちんな回で助かりました!

07 疑似要素でサブタイトルを作ろう

第7回では疑似要素でサブタイトル(下図の赤枠)を表示させるコーディングを学習しました。

私にとっては疑似要素が初出だったため、おなじみのお助けサイト「サルワカ」のこちらの記事で疑似要素自体の勉強をしたら、第7回の内容を理解することができました。

08 スタイルを再利用できるようにしよう

今回も第6回と同じく、これまで書いてきたCSSのコードの整理をする回でした。

共通のスタイルを洗い出しておくのはとても重要なことなんですね。

第8回を完了したので、実践!ウェブサイトを作ろうのレッスンパックを半分終わらせたことになります。やったー!


この記事が参加している募集

この記事が気に入ったらサポートをしてみませんか?