LIFE:生き方

外出自粛・在宅時間を有効活用!Kindle Unlimited本でHTML/CSSを速習する方法

外出自粛・在宅時間を有効活用!Kindle Unlimited本でHTML/CSSを速習する方法

個人力をブログ発信する次世代グローバル会社員のジョマです。
Twitterアカウントはこちら

コロナで外出自粛となり、在宅の方が多いと思います。
こんな時こそ時間を有効活用して、HTML/CSSを使ったWebサイト開発の勉強をしませんか?

この記事では外出自粛・在宅で生じた時間をHTML/CSSを使ったWebサイト開発の学習に利用したい方に向けて、「Kindle Unlimited本を活用した速習方法」について解説します。

この記事はこんな方に向けて書いています。

コロナで在宅勤務となった方

自宅の時間を活用してHTML/CSSを勉強したい方

なるべくお金をかけずにHTML/CSSを勉強したい方

この記事を読み終えると、Kindle Unlimitedの月額980円だけでHTML/CSSの基礎を速習することが出来るようになります。

Kindle Unlimited本でHTML/CSSを速習する方法

最初に結論です。

以下のステップを踏めば、HTML/CSSを使ったWebサイト開発を速習することができます。

Kindle Unlimited本でHTML/CSSを速習するステップ
  1. Webプログラミングの全体像を把握する
  2. HTML/CSSの基礎を学ぶ
  3. コードを写経してWebサイトを制作
  4. デザインカンプからWebサイトを制作

それでは解説していきます。

Kindle Unlimitedとは?

ご存知の方も多いと思いますが、Amazonの読み放題サービス「Kindle Unlimited」は月額980円(初回の30日間は無料)で対象となっている電子書籍を全て読むことができるサービスです。

詳細についてはこちらのサイトを参考にして下さい。

たった980円で書籍、コミック、雑誌を含む和書12万冊が読み放題になります。

もちろん12万冊といっても個人出版の薄っぺらな内容の本(全てではありませんが)も結構あります。

プログラミング関連の本についても個人出版が多くて内容もピンキリなのですが、中には良書もあります。

この記事では筆者が大量に読んできたKindle Unlimitedのプログラミング関連本の中から、厳選したオススメを紹介します。

速習のための4ステップ

それでは、速習の4ステップを解説していきます。

Step 1:Webプログラミングの全体像を把握する

プログラミング完全初心者の方は、そもそもHTML/CSSって何?という状態かと思います。

そんな方には、まずは「独学で身につけるためのプログラミング学習術」でプログラミング言語の全体像をつかんでいただくことをオススメします。

独学で身につけるためのプログラミング学習術: Ver.5

プログラミングと言ってもHTML, CSS, JapaScriptからPython, Swift, Goなど、本当に様々な言語があります。

これらはWebサイト、Webアプリケーション、スマホアプリなど「何を作るか」によってどの言語を使うかが変わってきます。

この本は、その全体像をわかりやすく説明している良書なので、最初の一歩として読んでみて下さい。

Step 2:HTML/CSSの基礎を学ぶ

全体像がわかったら次はHTML/CSSの基礎を学習しましょう。

だた、すみません!

ここは本よりもWebオンライン学習をオススメします。

なぜかというとこの後のステップで本の写経に入るのですが、この前提として

PC上に開発環境ができていること

コーディング内容をブラウザ表示できるレベルの基礎知識がある

ことが必要です。

このためには本で学習するよりも無料のWebオンライン学習サイトの方が効率的です。

Webオンライン学習サイトはProgateドットインストールが2大サイトです。

ドット
インストール
開発環境の構築が必要(PCにエディタをインストールしてローカル開発) Link
Progate 開発環境の構築が不要(Webサイト上でそのまま学習開始できる) Link

ここでは、開発環境構築(エディタのインストールなど)が必要なドットインストールをオススメします。

Progateの方がお手軽に学習を始められますが、今後Webサイト開発をしていく場合に開発環境構築はさけられないので、ここでやってしまいましょう。

ドットインストールでは開発環境構築用のレッスンもあるので、手順通りやれば難しいことではありません。

ドットインストールで以下のレッスンを受講して下さい。全部無料です!

HTML/CSSの学習環境を整えよう(全5回)

はじめてのHTML (全14回)

はじめてのCSS (全15回)

 

Step 3:コードを写経してWebサイトを制作

HTML/CSSの基礎が理解でき、PCに開発環境を構築できたら、まずはコードをそのまま書き写しながらWebサイトを作ってみましょう。

ちなみに、巷ではこれを写経といいます。

オススメ本はこちらです。

6ステップでマスターする 「最新標準」HTML CSSデザイン(固定レイアウト版)

この本の手順に従ってコーディングするだけでなんちゃってブログ風のサイトが出来上がります。

筆者が実際に作成したサイトをポートフォリオに載せていますので、参考にして下さい。

写経する際には単に丸ごと書き写すだけでなく、自分でいじりながらコーディングすることで理解をより深めることができます。

Step 4:デザインカンプからWebサイトを制作

写経でWebサイトを作れるようになったら、次はデザインカンプからWebサイトを作ってみましょう。

デザインカンプって何?という方はこちらを参考にして下さい。

オススメ本はこちらになります。

HTML&CSS コーディング・プラクティスブック 1 実践シリーズ

HTML&CSS コーディング・プラクティスブック 2 実践シリーズ

デザインカンプと指示書を元に

デザインカンプの解析 → コーディング準備 → 段階的にコーディング

実際のWeb制作案件と同じ流れの構成となっているので実践的な内容といえます。

 

実際のWeb制作案件もデザインカンプを元に制作することになるので、これができるということは既に案件を取れるレベルに達したことになります。

ちなみにサーバーを立ち上げたい方は、以前にブログ用のサーバーを立ち上げるまでの過程を記事にしていますので参考にして下さい。

会社員でも出来る!!1ヶ月でゼロからブログ開設+Adsense合格この記事では、会社員をしながら1ヶ月でAdsense合格までたどり着き、収益化の第一歩を歩みだすまでの軌跡について解説します。...

 

更にJavaScriptも学習してみよう

HTML/CSSがある程度わかったら、次のステップとしてJavaScriptも学習してみましょう。

JavaScript関連でもKindle Unlimited対象の良書があるので、紹介しておきます。

まずはこちら。

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)

本書では、「ふりがな」を振ってわかりやすくコードを理解できるようにした今までありそうでなかったユニークな本です。

もう一つ紹介しておきます。

独学プログラマーのためのAIアプリ開発がわかる本

JavaScriptが少しわかってきた方には、この本をオススメします。

写真を送るだけで自動で文字起こししてくれるLINE Bot「文字起こし君」を開発した著者が、その手順を解説した本です。

一見難しそうですが、この本通りに進めるだけでGoogle のAIエンジンを活用したLINE Botが作れます。

筆者は更に改良を加えて「ベトナム語の画像からテキスト検出して英語に翻訳」するLINE Botを開発しました。

https://twitter.com/jomanomad/status/1220334296394715141?s=20

 

 

こういった無料で使えるマイクロサービスを繋げて、新しいサービスを開発できるのは自分にとって目に鱗でした。

まとめ

いかがでしたでしょうか?

それでは、最後にもう一度ポイントを確認しましょう。

Kindle Unlimited本でHTML/CSSを速習するステップ
  • Webプログラミングの全体像を把握する
  • HTML/CSSの基礎を学ぶ
  • コードを写経してWebサイトを制作
  • デザインカンプからWebサイトを制作

在宅・外出自粛で時間が出来る今だからこそ、新しいことにトライしてみませんか?

あわせて読みたい

COMMENT

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

CAPTCHA