【HTML/CSS】学習に役立つツールと効率的なやり方③【参考書編】
さて、今回も、HTML/CSSを勉強するときに役立った学習ツールのまとめの続きからやっていきます。
HTML/CSSの学習に欠かせないツールとは
前回2回の記事でプログラミング学習する方法として、以下を挙げましたね。
- 学習サイト
- 動画
- 参考書
- スクール
- その他
以前も書きましたが、私はスクールには通わず独学で勉強を進めているのでそこはよくわかりません。
しかし、それ以外に関しては色々と使ってきました。
今回は主に参考書の活用について私が使っていて感じたこと、オススメの手順を書いていきます。
参考書で学習
参考書を選ぶ前に
さて、参考書での学習方法ですが、そもそも参考書を使って学習するメリットや向き不向きはあるのでしょうか。
参考書で学習するのに向いている人
学習は勉強と同様なので、これまでに受験勉強や資格試験の勉強などで参考書を使うことに慣れていて、苦ではない。
もしくは、単純に読書が好きか、これらに当てはまるかどうかは結構大事です。
私はどちらも当てはまったので、良かったのですが、なぜ大事かといいうとそれが集中力とモチベーション維持に関わるからです。
これが苦手で当てはまらない人が参考書を使って学習を進めても、集中力が続きませんし、楽しくないので日々勉強しようというモチベーションも保たれません。
当てはまりやすそうな人は、
- 小説の1ページ目で眠くなる
- 普段滅多に本を読まない
- 漫画などは絵を見て内容はサラッと読む程度だ
このあたりでしょうか。
こういった方はProgateなどゲーム感覚で直感的に使えるツールや音声が入る動画学習などにしたほうが良いと思います。
ちなみに私は逆のパターンなので、動画学習などのドットインストールやYoutubeでの学習は全く集中が続きませんでした。。
参考書で学習するメリット
個人的には、
- 分からないところを見直しやすい
- 学習の全体感を把握しやすい
- 正確な情報や知識が身につきやすい
- PC1台の場合、学習環境的にやりやすい
このあたりです。
参考書は本なので、読書と同じく「あれ、これってどのページで見たっけ」というような状況のときに見返しやすいです。
そして、ページ数と項目がパッと見で分かりやすいため、学習スケジュールや参考書の種類によっては予め学習する内容を絞って取り組むことができます。
私個人的には、読書が趣味なのもあり、上記の1と2のメリットは非常に役立ちました。
また、3は内容によりまして、何でもそうですがネット上の答えって複数あって真反対なことってありますよね。
ググることは大事ですが、変に調べすぎて思考が迷宮入りするのであれば、評価の高い参考書で出来るだけその通りに進めるなどしたほうが、変に消耗しなくて済みますので、時間を無駄に浪費せず正確な情報を得やすいです。
4は簡単な話で、PCで作業するのにコード見つつ別のタブで調べ物をしてマウスを動かす回数が多くなったり、スマホで見つつPCでコードを見て、気が散ったり(笑)などの可能性が出てきます。まあこれはあくまで可能性の話ではあるので、こちらの方が向いていたり、PCでウィンドウが2つあるといった場合は当てはまりませんので参考に、です。
あと、補足として電子書籍は参考書ではオススメしません。本としてのメリットが半減します。
では、デメリットもついでにあげると、
- 重い
- 持ち運びが面倒
- 情報が古い可能性がある
- 本屋に行く手間がかかる
上記2つはそのままとして、3の情報は改訂版や出版日を確認しましょうねってことです。
4は本はどうしても人によって向き不向きがあるので、実際に手にとって見る方がいいのですが、これだと自分で探しに行かないといけません。
気分転換にはなりますが、ここに時間を掛けたくないのであれば、中身を見ずにレビューだけで買うことを決めるか、参考書での学習をやめるかになります。
以上に挙げたことを踏まえた上で、私が学習初期に使って良かった参考書のオススメを紹介します。
HTML/CSSの初心者にオススメの参考書
スラスラわかるHTML&CSSのきほん
その名の通り、HTML/CSSがスラスラ分かる参考書です。
レベル感で言うと、Progateのレッスンと道場、ドットインストールの｢ウェブサイトを作れるようになろう｣
あたりをこなして、アウトプットの方法や次に勉強することが分からない。
と言った方向けです。
内容は、実際に架空のカフェサイトを作っていく過程を説明している参考書、なのですが、とにかく説明が分かりやすい。
専門書というよりは全くHTML/CSSを知らない方でも読めるレベルなので、これより簡単な説明の参考書はないくらいです。
また、レスポンシブ対応もしているので、より実践向きかと思います。
個人的にこの制作の過程で、どのようにしてホームページ制作を進めていくべきかが見えてきたので、この先の学習の流れも掴みやすくなりました。
完成するとこんな感じです。
HTML/CSS 初級～中級者にオススメの参考書
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方
私がめちゃくちゃ好きな参考書です！
何がと言うと、先ほどオススメしたスラスラわかる〜、は本当に初心者向けなのでデザインがベーシックでオシャレではありませんが、この参考書では実践でそのまま使えるんじゃないか、というくらいオシャレなサイトを作っていく手順を説明してくれているんです。
しかもスタンダード、グリッド、シングルページ、と3つの構成を学べるので正直このレベルのサイトをサクッと作れるようになるとそれこそ実践で通用するレベルかと思います。
更に、著者の説明も丁寧でなぜそのclass名をつけるのか、なぜこの場面はこのコードを使うのか、などの根拠もすごく理解できます。
私はそこがすごく勉強になり、この参考書を読んでいる時何回も「なるほどねえ～」とつぶやいていました。笑
このレベルのサイトの作り方が分かるの凄くないですか、、？
#今日の積み上げ
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2019年11月18日
➡️スタンダードレイアウト2周目完了！
自力で模写コーディングできた！
index.htmlのみで下層ページは作ってないので、今度Bootstrap組み込んだらこのまま他ページ作ってみようかな😀
あと、デスクトップ録画って簡単便利ですね✨
さぁ2章目新しい所やるかー！#プログラミング初心者 pic.twitter.com/AWpriwFmGZ
ようやくgridでのサンプルサイト作成終わり！
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2019年12月1日
個人的にjsライブラリのmasonryかなりハマりました笑
自分のポートフォリオ案の1つはこれをベースに作っていこうと思います😌
masonry=石積み。レンガのように敷き詰めるような動きが好きです✨#プログラミング初心者 #駆け出しエンジニアと繋がりたい pic.twitter.com/6KoliL1Wlv
#今日の積み上げ ？
— マサ@あぱれるエンジニア&ブロガー (@masa8wdg) 2019年12月13日
おはようございます🐥
参考書を見つつアレンジを加えた仮のポートフォリオサイト！昨日モバイル対応含め完成させました〜
やはりアウトプットすると俄然勉強にやる気が出ますね💪
今日以降も着々と進めましょう😌#おは戦r1213dk#駆け出しエンジニア #プログラミング初心者 pic.twitter.com/LvpvssTIAy
おわりに
参考書のタイプは2つに分かれる
今回は参考書での学習方法とあわせて、自分が使っていてよかったと感じたHTML/CSSの参考書2冊の紹介でした。
重要なのは、共通して1つの架空サイトを作る過程を通して理解を深めることです。
プログラミングの参考書においてはこれがかなり重要になってきます。
というのも、参考書にはざっくりと2つのタイプがあり、こういった手順をふんで制作物などを作っていくタイプと、使える機能を網羅したタイプがあります。
まあHTML/CSSでは前者のタイプがほとんどなので、実際に手にとって見て「このサイトめっちゃオシャレ！作ってみたい！」と思えたら買う、という感情に任せて良いのではないでしょうか。そのほうが楽しんでやれますしね。
そのあとに例えばCSSの理解を深めたいなあ、と思ったら、後者のタイプの参考書を買ってみるなどしたほうがいいですよ。
とにかく、個人的にはHTML5/CSS3モダンコーディング。この参考書に出会えて本当に良かったです。めちゃくちゃレベルアップできました。
もし本屋さんで見かけたら手を取ってみてください。
次回はその他の勉強法についてあげようと思います。
それでは。
