副業

【読書感想文】「フレキシブルボックスで作るHTML&CSS3レッスンブック」

模写コーディングで挫折した際の次の手

私はプログラミングの超初心者ながら,いつかプログラミングで副業をしたいと考えています.

そしてProgateのHTML&CSSコースを何度も周回し,Webサイトの模写コーディングに取り組んでいました.

しかし,現実の壁にぶち当たります.

Progateを卒業した程度の力では,実際のWebページを見ながらコードに起こすことは非常に難しいということを痛感しました.

勢いを失った私は,同じ気持ちを抱えた人たちと傷をなめ合うべく,「模写コーディング 難しい」と検索し,今の自分をレベルアップさせてくれる方法を探していました.

その際に「これだ!」と目をつけたのが,

「フレキシブルボックスで作るHTML&CSS3レッスンブック」です.

本記事では,「フレキシブルボックスで作るHTML&CSS3レッスンブック」を使用した感想を書きます.

結果:模写のレベルが爆上がりした

まじめな話,この本はええよ

手放しで絶賛します.

模写コーディングに挫折した時に藁にもすがる思いでこの本で勉強した結果,模写のレベルが驚くほど上がりました.

プログラミング
【HTML&CSS】挫折していたwebサイトでリベンジ達成【模写コーディング】

続きを見る

何がいいって,Progateを終わった直後のレベルの人向けのコンテンツになっているところが最高です.

「Progate終わったけど次は何したらいいんだ...」と路頭に迷っていた私にピッタリ!

以前には,Progateの直後に読むべきプログラミング本ということで「1冊ですべて身に付くHTML&CSSとWebデザイン入門講座」を紹介しました.

誰でも学べるWebデザイン
【読書感想文】「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」

続きを見る

これらの本の違いを比較するとこんな感じです.

「フレキシブルボックスで作るHTML&CSSレッスンブック」1冊ですべて身に付くHTML&CSSとWebデザイン入門講座
・実践的・網羅的
・理論的・感覚的
・Progateの内容:それ以外 = 3 : 7・Progateの内容:それ以外 = 5 : 5

どちらもHTML,CSS初心者のうちは大変参考になります.

どちらがより自分に合うかは,目指すものや現在のレベルによって人それぞれ違うでしょう.

私にとっては,今回の「フレキシブルボックス~」の方が,より求めていたものに近いと感じました.

本書の強み

本書の良かったポイントは,以下の通りです.

1.padding, marginが分かる

私の場合,Progateで勉強した知識だけでは模写コーディングはうまくできませんでした.

その最大の原因は,paddingとmarginを使いこなせなかったことにあります.

paddingを入れてるはずなのに入ってないし入れたくないのになぜか空白のスペースができていることが非常に多い.

そして原因も不明.

余白は実際に何が起きているのか見にくい分,余計に扱いづらいんですよね.

本書はpaddinga, marginの説明に多くの手間をかけています

新たにボックスを作ったりレイアウトが崩れたりするたびに,「この要素のこのpaddingがあっちの要素のあのpaddingに含まれているから~」など,図で視覚的な説明を入れてくれます.

これ,地味なんですけどめちゃくちゃ助かる.

ことあるごとに余白に振り回されるんですもん.

他でつまずく時と違って,余白問題でつまずくと無性にイライラしてきますしね.

ようやく救世主が舞い降りてくれました.

2.フレキシブルボックスの便利さを知る

フレキシブルボックスとは,「display:flex」で記述することで要素を整列させる必殺技です.

このフレキシブルボックスが,めちゃくちゃ便利

Progateではフレキシブルボックスのさわりを紹介していただけだったのでどんな場面で使うのかピンときませんでしたが,この本を読んだ後にはフレキシブルボックス大好きになります.

どんな場面でも使えるし,動きがシンプルで理解しやすいのです!

floatとは大違い.

Progateがなぜあんなにもfloatをゴリ押してきたのか,今となっては大きな疑問です.

フレキシブルボックスを学んでしまったら2度とfloatには戻れません.

3.2カラムのWebページを作れる

フレキシブルボックス,は図などを横並びにすることも得意ですが,別の使い方もあります.

それが,2カラムページの作成!

2カラムとは,パッと見たときの画面が縦に2つに分かれているページです.

なので2カラムページを作れるとできることが大きく増えそうなのですが,案外その方法を教えてくれる本って今までなかったんですよね.

しかし本書は別です.

2.で紹介したフレキシブルボックスを用いながら2カラムページのつくり方まで教えてくれます.

フレキシブルボックス最強.

まとめ:ブレイクスルーの可能性あり

この本はとんでもない逸材のような気がします.

内容は難しくないのでスラーっと読めてしまいましたが,その割には私が使いこなせていないスキルがたくさん載っていました.

ということは,しっかり消化して自分の中に落とし込むことができている可能性が高い!

実際,今回仕入れた知識を使って早く模写コーディングを再開したいぜ!と調子に乗り始めた私がいます.

プログラミングの勉強を始めて以来,こんなにワクワクしているのは初めてです.

これでブレイクスルーが起きて模写コーディングのスランプを脱出できたらいいんですけどね.

とりあえず本書を一度写経してみて,フレキシブルボックスとか新たに学んだ知識を体に覚えさせていきたいと思うからそこんとこよろしく!

 

-副業