プログラミング学習

【すごく簡単】Flexboxを勉強する方法【1冊本を読むだけ】

どうも、「なか」です。

この記事では、

「Flexboxってどうやって勉強すればいいの、、、」

「教材が少ないかどうすればいいのかわからない、、、」

なんて疑問を抱えた方へFlexboxを勉強する方法を紹介していきます。

実際に僕がやってみて効果的だった学習方法です。

この記事で使う方法で学習すればFlexboxを身に着けることが出来ます。

では、具体的にどうすれば良いのか?

結論としては、1冊の本を読むだけで大丈夫です。

この記事では、そこら辺のことについて深掘りしていきます。

では、記事に入っていきます(/・ω・)/

この記事の内容
  • Flexboxを勉強する方法【1冊本を読むだけでOK】
  • Flexboxと合わせてBootstrapをやっておくべき【コーディングの効率化】
  • 【おまけ】エディタにEmmetを導入すると良い

Flexboxを勉強する方法【1冊本を読むだけでOK】


基本的にFlexboxの勉強は1冊本を読むだけで完了しますね。

Flexboxの学習におすすめの本

以下の本をやれば良いです。

この本はFlexboxが学習できる本なのですが、デザインが見やすいので分かりやすいです。

また、HTML/CSSの復習的な感じでも使える教材ですね。

Flexboxの教材は少ないのですが、「いちばんよくわかるHTML5&CSS3デザインきちんと入門 」さえやっておけば良いかなって感じです。

下記の記事で感想も書いています。

いちばんよくわかるHTML5&CSS3デザインきちんと入門の感想どうも、Web制作について学習しているなかです。  この記事の内容 どんな本なのかザックリと紹介 成果物を紹介...

動画で学習したいならUdemyを使うのもあり


基本的には、「いちばんよくわかるHTML5&CSS3デザインきちんと入門 」をやればFlexboxは出来るようになります。

ただ、動画で学習したいって方はUdemyを使うと良いです。

ザっと調べてみた感じでも結構Flexboxの講座があります。


僕自身、Udemyを利用したことがありますけど質の高い講座が多いですね。

値段としても本を買うのとあまり変わらないので、動画で学習しても良いかなと思います。

性格に合わせて選ぶのをおすすめします。

具体的には以下の通り。

いずれにせよ自己投資は惜しまない方が良いですね。

質の高い教材は、グングン自分を成長させていきます。

Flexboxはググりながらで良い

いちばんよくわかるHTML5&CSS3デザインきちんと入門 」やUdemyでの学習が終わったら、後はググりつつやる感じで良いです。

正直FLexboxはそんなに覚えることがありません。

それゆえ、最低限の教材を終わらせたら後はググりつつやればOKです。

十分対応できます。

Flexboxと合わせてBootstrapをやっておくべき【コーディングの効率化】


既に学習している方なら良いですが、Bootstrapも合わせて学習しておくと良いですね。

Bootstrapとは

HTML・CSSのフレームワークのこと。

フレームワークとはコーディングの便利ツールだと思っておけば大丈夫です。

HTML・CSSだけでは実装が大変なことが一瞬で出来るようになります。

かなり便利なので、学んだことがない人は、多分驚くかなと。

Bootstrapを学ぶとコーディングの効率が上がる

実は、Bootstrap自体は最近あんまり使われていません。

しかし、コーディングの効率化について学ぶことが出来ます。

Bootstrapを使うと一瞬で実装できる機能も多々ありますしね。

Flexboxと似ている部分もあるので、取っ付きやすいかなと。

便利なツールを使用するとコーディングも捗る

BootstrapなりFlexboxなり、何で良いですが便利なツールを使用するとコーディングもはかどります。

また、レスポンシブ対応のデザインを作るのが凄く簡単になります。

カラムという概念が登場するのですが、これが非常に役に立ちますね。

僕自身、この概念を知ってからコーディングへの理解が深まりました。

それ以外にもレイアウトを整えるのにも役立つので学んでおくべきですね。

実際の学習法は以下の記事にまとめてあるので、そちらもぜひ。

【効率的】Bootstrapを学習する方法【3ステップで解説】どうも、「なか」です。 この記事では、 「Bootstrapってどうやって学習したらいいの、、、」 「色々な選...

【おまけ】エディタにEmmetを導入すると良い


おまけ的な内容になりますが、もっとコーディングを効率化したい方はエディタにEmmetというプラグインを導入するのをおすすめします。

かなりコーディングがはかどりますね。

Emmetとは?

HTML・CSSのコーディングを爆速にすることが出来るプラグイン。

長いコードも一瞬で書けるようになります。

以下のツイートはその一例。

HTML・CSSでコーディングをしている方なら導入しておくべきですね。

めんどくさいコードを書く手間が省けます。

Emmetの導入法と使い方

導入に関しては以下の記事が参考になります。

使い方に関しては以下の記事が参考になります。

コーディングを効率化したい方は導入してみるのをおすすめします(/・ω・)/

コーディングを効率化させよう

今回紹介した方法はいずれもコーディングを効率化するのためには非常に役に立ちます。

普通にHTMLとCSSをやるだけでは面倒なことが一瞬で実装できるのは便利ですよね。

Flexboxの学習法とは少しズレてしまったかもしれませんが、いずれもコーディングの効率化が本質なわけなので。

ぜひ、まだ試していない方はやってみていただけたらなと。

世界が180度変わること間違いなしですね(‘ω’)

というわけでこの記事は終わりです。

以下に今回の記事のまとめを記しておきます。

この記事のまとめ

では、素敵なコーディングライフを(‘ω’)ノ

RELATED POST