33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

FlexBoxについて勉強する

本日の教材動画はこちら 

Flexboxについて理解する

前回floatの理解が難しいってつぶやいてた私ですが、どうやら最近はfloatの代わりに今回勉強する「flexbox」を利用してレイアウトを組むことが多いらしい。というわけで、今回はflexboxについて勉強しました。 

manablog.org

 ロードマック通りに勉強すると 、最初に貼り付けた動画でflexboxを勉強する形になるのですが… 

 丁度図書館で予約してたこちらの本に目を通していたところ、こちらのほうが100倍詳しくflexboxについて教えてくれていました。丁度いい時に借りられてよかった…。ので、今回は上記の本を読んでflexboxの勉強をした形になります!

 

全て読み終わった後にフローチャートに目を通していたところ、著者さんのサイトが紹介されていましたので、やはりこちらの本はとても有用なんでしょう。というか普通にとってもよかった!!後で買おうか悩むレベル。

 

本の内容が濃くflexboxの内容だけでもまとめるのが大変なため、今回はこちらの本1冊を読み終えて作った成果物だけ貼って終わりにしようかと思います。

 

indexページ

indexページ

上記がindexページ。左がPC用ページ、右がレスポンシブ対応したスマホ版用のページです。

 

newsページ

newsページ

こちらはnewsページ。flexboxをフル活用して作ったのですが、確かにfloatよりも1万倍くらい作りやすかったです…。何よりレスポンシブにしやすいのが強い。

 

menuページ

menuページ

こちらはメニューページ。こちらは「CSSグリット」というものを使ってタイル型に配置しています。「CSSグリット」については初めて触れたのですが、本の内容がとても分かりやすかったのですんなり理解できました。

 

contactページ

contactページ

最後にコンタクトページ。フォーム送信技術が現在ないため、フォームは一先ず外部フォームを利用(本内ではきちんとフォームの書き方までは教えています)。あとはグーグルマップやSNSプラグインの埋め込み方→レスポンシブへの対応の仕方を学びました。

 

何度も言いますが、上記全てこちらの御本を読むだけでできました。  

 CSSもHTMLもまったくわからない初心者が読むとちょっと難しいかもしれませんが、フローチャート通りに進めてきた人が読んだ場合内容が全て理解でき、「なるほど…!」みたいな気づきがめちゃくちゃ多かったので大変お勧めします。 

 

と同時に、flexboxで全部解決できるしfloatの勉強いらなかったのでは…?って思ってしまったんですが、本書内で「今からサイトを作る場合はflexboxでいいが、昔のサイトを手直しする場合もあるだろうからfloatについて理解はしておいたほうがいい」って書いてあり目から鱗でした。たしかに…?!

 

本の内容が有用すぎて本読みながらメモ→サイト作りつつ気づいた点をメモ…。ってやってたらB5紙70枚もメモに使ってました。まあそれくらい内容がぎっしりってことです。あと本を読み終えた後の変化点としては、テキストエディタをSublimeTextからAtomに乗り換えました。紹介されてたので試しに使ってみたら思いのほか使いやすかった。

 

そんなわけで今回ブログの内容はちょっと薄いのですが、その間に本1冊まるまる読んであれこれ理解を深めていたのでそのご報告となります!フローチャート通りに進めると次回は「Bootstrapを理解しよう【爆速でサイト制作】」に突入する模様。この単語は本の中でも出て来ませんでしたので、一体何が始まるのか今からドキドキです。