Flexboxを学ぶのに最高の本を紹介するよ!

IMG_6464.jpg

ProgateのHTML&CSSコースはとーっても良かった!

・・・が強いて挙げるなら、サンプルサイト構築にはFloatを使っていたという点。Floatはなんだかややこしいし、色々調べたところ、これからあまり使われなくなっていくとのこと。コーディングをイチから勉強するにあたって、せっかくなのでこれからの主流であるFlexboxでレイアウトを組める様になりたい。

まずはドットインストールにて学習。
詳解CSS フレックスボックス編 (全16回)
https://dotinstall.com/lessons/basic_flexbox_v2
Flexboxが何となくどういうものか分かったものの、やはり本でしっかり勉強したいということで、教本をリサーチ。しかし、流れの早いウェブ業界。Progateに限らず、教本でもサンプルサイトがFloatで組まれているものが多い模様。実際に本屋へ足を運び、中身を一つずつ確認していった結果、Flexboxを勉強するのにめちゃ良さそう!という一冊を発見。
1冊ですべて身につくhtml & cssとwebデザイン入門講座
https://www.amazon.co.jp/dp/4797398892
それもそのはず、後で気づいたのだけれども、色々なブログで紹介されていたFlexboxのチートシートを配布されていたサイト、このManaさんという方のサイトだった!
https://www.webcreatorbox.com/
有益な書籍と一覧表を提供いただき、感謝です。
ということで書籍内のサンプルサイト制作を通して、Flexboxの基本と、その他諸々学習することが出来た。
 
学んだ一例は以下の通り。
●flexboxを使ったメニューの作り方
●flexboxを使った2カラム(mainとaside)の作り方
●flexboxを使ったスマホ用コンテンツ縦並びのやり方
●background-size:coverを使った背景画像の敷き方
●linear-gradientを使った背景色の設定
●border-radius:50%を使った円の描き方
●remを使ったフォント指定(これは使える様にはなっていない)
●text-transformationを使った大文字指定
●padding: 0 4%を使ったスマホ向け余白指定
●Facebook,Twitterなどのプラグイン挿入方法
Flexboxの更に最先端に「cssグリッドレイアウト」というものがあり、こちらの本でも説明されていたが、今回はFlexboxの学習が目的だったため、飛ばした。
よし、次からはいよいよ模写だ!もしゃもしゃ!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です