【閲覧くださっている皆様へ】URLが変わりました。一部転送が完了していない内部リンク先があります。「404 Not Found お探しのページは見つかりませんでした。」という表示になる場合は、"https://bits-lifestyle.com/jigaku-study/●●"から、"https://study.bits-lifestyle.com/●●"へ書き換えてアクセスくださいますよう、お願いいたします。ご迷惑をおかけいたします。

 
スポンサーリンク

【プログラミング初心者】HTML&CSSの勉強方法

HTML&CSS

私はプログラミングの勉強を始めるとき、エクセルマクロとHTML&CSSを勉強しました。HTMLとCSSは厳密にいうとプログラミング言語とは言えないのですが、WEBを作成するなら必須となる言語です。

今回は、プログラミング初心者が HTML&CSSを学ぶ方法を私の体験に基づき、具体的にお話いたします。

初学者にはプロゲートがおすすめ

プロゲートとは

初学者向けのプログラミング学習サイトで、PC・スマホ両方で勉強できます。HTML&CSSのほかに、JavaScript、jQuery、Ruby、Java、PHP、Python、Swiftの講座があります。

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

プロゲートを始めた理由

実際に手を動かしてコーディングできる

HTML&CSSは初学者用の書籍や学習サイトもたくさんあります。その中で私は、実際にコーディングできるアプリ等を探していました。

プロゲートは実際にエディタにコードを書くと、どのように画面に反映されるかを表示した上で、正解か不正解かを判定されるようなシステムになっています。

ネット上での評判が良かった

とにかく、ネット上の評判が良かったです。

「プログラミング 初心者 学習」などで検索して、いくつか紹介ブログ等を読んでも、おすすめサイトの最初に「Progate」と書いてあるものばかりでした。

イラストがかわいい

実際にHPを見てみると、絵もかわいくデザインも最新な感じで、すごく好感が持てます。

実際使ってみてよかった点

無料の講座で1~2講座ずつお試しできる

例えばHTML&CSSなら次のようになっています。

※「道場」編は、練習問題です。

無料会員有料会員
初級編 学習
初級編 道場
中級編 学習
中級編 道場
上級編 学習
上級編 道場

無料で初級編全部見れるなんてありがたいです。(PC・スマホ両方)実際やってみると、私は迷わず有料でやりたくなりました!

ちなみに有料会員になると、ほかのプログラミング言語の講座も含めすべて見放題です。

有料でも月980円で使い放題、月ごとの解約が可能

上記のように、全部の講座が1か月使いたい放題で980円って安いと思います。プログラミングの本て1冊1000円じゃなかなか買えないですから・・・

私の場合はちょうど転職時の1か月休暇のときに受講したため、元は十二分に取れました!

あと、次月からの解約もすぐ、簡単にできるのが良心的です。

スマホでも勉強できる

スマホでプログラミングってどうやるの?と思いますよね。ここがすごく工夫されている点です。

PCサイトのようにすべてのコードをエディタで直接入力するのではなく、ある程度の単語が固まりになっていて、それを並べ替える形で練習できます。

もちろん、並べ替えるだけでは本当の力はつかないのですが、PCサイトと並行して使うと、予習や復習には最適です。スマホだとどこでもできるのでとても便利でした。

勉強の進捗管理ができる

プロゲートは無料でも会員登録が必要ですが、なんと無料でもマイページがあるんです。

マイページで、今の自分の学習進捗とか、これまでの学習実績がわかるので、モチベーションの維持もしやすいです。自分で計画表を作ったりする必要もありませ。

有料には実践編もある

上記でも書きましたが、プロゲート有料編では各級の「道場コース」が受けられます。

「学習編」は1つ1つに区切って説明付きでコードを書いていくのですが、「道場編」ではヒントなしで自分ですべてのコードを書いていく練習です。

説明を受けたときは「わかった気」になっていても、実際には定着していないことが良くあります。それを防ぎ、自分の定着を確かめながら復習できるのが「道場編」の魅力です。

コーディング以外の説明も受けられる

これも初学者には大変ありがたい。

私も最初、HTMLとCSSは学んだものの。実際にはどんなツールを使ってどんな設定をしていけばWEBサイトができるのかわからずもやもやしていました。

プロゲート有料編には設定やツールなどの実践的な知識も学べるので。学んだ後すぐに実践していけました。

プロゲートを使ったおすすめの勉強方法・スケジュール

いつもだったら、ここで「計画表」を作成して提示するんですが、上記のようにプロゲートには初めからそれがあります(*’▽’)

【プロゲートに記載の所要時間(目安)】

HTML & CSS 初級編  3時間50分
HTML & CSS 中級編  4時間30分
HTML & CSS 初級編 道場コース 2時間30分
HTML & CSS 中級編 道場コース 3時間20分
HTML & CSS 上級編  2時間
HTML & CSS 上級編 道場コース 1時間40分

私の場合で言えば、学習コースは大体上記の時間で勉強できました。

道場コースについては、はじめは全然自分ではコードが書けなくて、ヒントや答えを見まくっていました(笑)
道場コースについては確か、3回くらい同じ内容をやってやっと自力でコーディングできるようになりました。

なので、時間は上記の2~3倍は掛かっています。

プロゲート学習後の勉強方法

私の場合は、

①巷のWEBサイトを見本にコーディングして、そのサイトに近づけていく練習(主にワードプレス中心)

②ワードプレスで実際にブログを作成しながら、必要な個所でHTMLやCSSをカスタムしていく練習

③改めて本を買い、HTMLとCSSの勉強

④Wordpressで1から作ったオリジナルテーマをHTML&CSSで装飾

という流れでやっていきました。

WordPressを使っちゃったので、②まではHTML&CSSのスキルは低かったです。スキルは低くても実際WEBで調べて見本コードをコピペすれば割と作りたいデザインは作れます。

HTML&CSS をきちんと学ぶと、レイアウトが自分で作れるようになるため、Topページ作成のお仕事等も受注できるようになることがメリットです。

プロゲートで学習後の勉強方法はこちら

301 Moved Permanently
とcssの実践練習方法:サイト模写の具体的方法(lp/


WP Twitter Auto Publish Powered By : XYZScripts.com
タイトルとURLをコピーしました