独学で未経験からWebデザイナーになるためにやった全てを公開

【HTML&CSS】コーディディングが苦手な人が絶対に見るべき解説サイト

コーディディングが苦手な人が絶対に見るべき解説サイト

 

カンプ

Webデザイナーになるにはコーディングのタグ打ちは必須です

このページではコーディングが苦手な人が絶対に参考にするべき解説サイトをご紹介

 

独学のHTML&CSSの勉強方法

 

HTMLとCSSの基礎を勉強した時、コーディングの練習として

僕は購入した本とHTML・CSSの解説サイトを見て学んでいました

 

バイト時代は電車通勤だったので本を見ながら通勤していた思い出があります。

教材に関しては【2018】Webデザインを独学で勉強する人に超おすすめの本29冊をご覧下さい。

Webデザインを独学で勉強する人に超おすすめの本29冊【2019年】Webデザインを独学で勉強する人に超おすすめの本29冊

 

タグやスタイルの使い方などの暗記をするのには電車通勤中には持ってこいでしたが、コーディングなどの技術部分は本を読んで覚えるより実際にタグ打ちしながら覚える方が上達します。

バイトの休憩中は解説サイトを参考にしてタグ打ちの練習をし実際にサンプルサイトをたくさん作っていました。

コーディングの練習をする場合、パソコンのタイピングが必須となります。ブラインドタッチ(キーボードを見ずに打つ)が出来ない人は最初にタイピングの練習もする必要があります。

MEMO
キーボードのタイピングの練習をするなら寿司打がおすすめ

 

HTMLとCSSを早く覚えるのは実際に手を動かす事が一番です。

カンプ

考えるな、

感じろ

コードの読み方に関しては「HTML・CSSの正しい読み方」の記事がありますので、合わせてチェックしてみて下さい。

 

【HTML&CSS】コーディングが学べるおすすめサイト

HTML、CSSの解説サイトは検索すると意外にたくさん出てきます。

その中でも僕自身が分かりやすく使いやすいと感じたサイトを紹介していきます。

サルワカ:イチからWebデザインを習得する講座

https://saruwakakun.com/html-css/basic

初心者でも分かりやすく解説してくれているHTML&CSS入門のサイト

【どの書籍よりも、またどのウェブページよりも分かりやすくオシャレなWebサイトを作るための知識を解説】と書いている通り、とっっっっても解説が見やすくて分かりやすいです。

僕が独学で勉強していた頃にはなかったサイトなのですが、当時これがあったらこのサイトが聖書(バイブル)になっていたでしょう。

それだけ猿若ではHTML&CSSの情報を網羅しています。

最新のHTML5&CSS3にも対応しており、

正直このサイトだけ見ておけばOKですね。

これからWebデザイナーを目指す初心者におすすめです。

サイトはこちら

HTMLタグ ホームページ作成の基本

 

http://masaboo.cside.com/new_html1/ht_menu.htm

少し古いサイトになりますがHTMLの事を一つ一つ丁寧に解説してくれています。

メニューも分かりやすく整理されているのでリファレンスとしても使いやすい。

サイトはこちら

0から始めるHTMLとCSSの基本・基礎-webデザイン入門-

http://endoutakae.com/2012/02/08/webdesign/

ブログ記事ですが初心者目線でHTMLとCSSの基本、基礎を非常に分かりやすくまとめています。

⇒ サイトはこちら

CSSレイアウト実践講座

http://css.uka-p.com/

CSSはここを見て色々と基礎を覚えていきました。

こちらもCSSを細かく個別に分けて解説しています。

サイトはこちら

Webクリエイターボックス

https://www.webcreatorbox.com/

Webデザイナー界ではかなり有名人Manaさんのブログ

Webデザインに関する問題を検索したらだいたいこのブログがヒットするぐらい情報量が半端ないです。

初心者におすすめの記事をピックアップしておきます

スタイルシートデザインを始めたい方へ-WEB工房きくちゃん-

http://www.stylish-style.com/

CSSの基礎から実践まで細かいコーディングの解説をしています。ステップ毎に分かれているので、区切りがつけやすくCSSのコーディングはここを参考にして学びました。

サイトはこちら

 

HTMLが練習できる参考サイト

Codeprep

 

https://codeprep.jp/

※ 2018年3月にサービス終了となっています

Codeprepは、実際にプログラムコードを記述しながら学べるWebサービス。

HTML、 CSSからアプリ開発まで幅広くカテゴリが豊富なサイトであり、Web初心者にも入りやすいサイト設計なので、コーディング知識がない状態でも安心してスタートできます。

まだ使えます
サービスは終了していますが、まだサイト自体は閉鎖される残っておりサービスは無料で使えます。いつ閉鎖されるか分かりませんが、残っているうちはコーディング練習サイトとして活用しましょう(笑)

サイトはこちら

Progate

https://prog-8.com/mypage

ゲーム感覚でHTMLの基本コーディング基礎を学ぶことができる無料の学習サービスです。

設問ごとに分かりやすくヒントが設置されており、自分だけの力でコードの勉強ができるように工夫が施されています。学習の進捗情報も分かり、なかなかコーディングの勉強に時間が取れないという方は利用してみて下さい。

メールアドレスを登録すればすぐに利用可能。

応用や実績になると有料プランの登録が必要になってきますが、基礎部分であれば全部無料なので、コーディングの基礎を覚えたい初心者であれば無料で利用できるサービスです。

公式サイトはこちら

 

HTML&CSSの動画解説サイト

ここまでおすすめの解説サイトを紹介してきましたが、サイトを見て学ぶだけじゃ頭に入ってこない人のためにおすすめの動画サイトを2つ紹介します。

最近動画のコンテンツを扱ったサイトが増えてきています。

僕の時はまだほとんど流行っていませんでしたが、これからは動画を見て学ぶ時代がきそうですね。

実際に手を動かすことができますし、動画などで学ぶことができるので本よりも学びやすいので人に教わって覚えたい方はぜひ参考にしてみて下さい。

ドットインストール

https://dotinstall.com/

1つのコンテンツ動画を3分にまとめて解説しているので空き時間や忙しい日でも勉強がしやすいのが特徴。

HTMLとCSS以外にもプログラミング関係の解説動画がたくさんあり、現役のWebデザイナーやプログラマーも参考にしているサイトです。

より高度なプログラミングの学習や動画の文字起こしなどはプレミアムサービス(有料)に登録しなければいけませんが、基本的には無料で利用することができます。

公式サイトはこちら

Udemy(ユーデミー)

https://www.udemy.com/

Udemy」はビデオで講師の授業を学べるオンライン学習サービス。

ビデオだから何度でも繰り返し何度でも観る事ができるし、時間と場所を気にしなくても良いので独学で勉強する人にはお手軽でおすすめです。

自分が選ぶ講師によって授業内容や内容も違ってきます(有料や無料があります)

色んなコースがあるので一度チェックしてみてください

⇒ UdemyのHTMLコースを見てみる

おすすめ

僕がおすすめの講師は田村由美さん

丁寧で分かりやすく口コミ評判も高いです。

75%OFFなど定期的に激安セールを行っているので興味がある方は今すぐチェックしてみましょう。

⇒ 実践Webサイトコーディング講座の詳細を見てみる(無料動画あり)

⇒ 公式サイトはこちら

やってはいけないコーディングの勉強法

以下3点はコーディングが覚えられない人によく見られる特徴です

  • コードを丸暗記する
  • コピー&ペーストを使う
  • ノートに書いて覚える
  • 全て一気に覚えようとする

コードを丸暗記する

学校のテスト勉強の延長でコーディングを丸暗記するのはダメです。

なぜなら、Webサイトをコーディングする時、暗記では対応できるボリュームを超えていますし、ほとんどが応用が求められます。

コピー&ペーストを使う

コードは打ち込んでいかなければ自分の体に染み付きません。

コピー&ペーストはコーディングにおいて楽ですが、最初のうちは必ず全て手打ちしましょう。コードの意味を理解して記述しておかないと身につきませんし、大事な時に思い出せないなら意味がありません。

ノートに書いて覚える

手で書いたほうが覚えるという方もいるかと思いますが、コードを書き慣れる意味も含めてちゃんとエディターで書いてそれがきちんと自分の思い描いたように実行されるのか見える状態で練習したほうが良いです。

それにノートに書いたコードは検索できないので、必要な時にすぐに探せないからです。検索するなら自分のエディターを作るかネット検索する方が圧倒的に早くて効率的です。

全て一気に覚えようとする

無理にHTML・CSSを全部覚える必要はありません。

全部覚えようとすると大変ですし、実際そこまでほとんど使わないHTML・CSSはたくさんあります。つまり、重要度を均一にするのではなく実用性があり必要なもの・よく使うものに重点をおいて調べたほうが身につきやすいですし、応用力もつきます。

手打ちでコーディングしていくと<div>や<p>タグをよく使うなーと感じるように、タグは打ち込んでいると体感で分かってきます。

関連記事 【HTML&CSS】コーディディングが苦手な人が絶対に見るべき解説サイト

 

人に教えてもらうと上達スピードも早い

コーディングでつまずいた時、検索で解決できるものではなかったり、自分のやり方が適切なのか、もっといい方法はないのかと悩む事もあるかと思います。

人に教えてもらうと上達スピードも速いので、金銭的に余裕がある人はデザイン専門学校に通い「プロに聞く」のが一番てっとり早いです。

しかし、僕のようにお金がなく専門学校に通えないから独学で勉強してる人も多いはずです。専門学校の費用は50万〜100万円とかなりの金額になりますよね。

そんな時に利用して欲しいのがオンラインスクールに通うとう手段もあります。

最近、僕の周りで評判が良いのはTechacademyですね。

専門学校に比べると費用もグッと下がりますし、さらに学生であればお得な割引が適用されかなり格安になります。

⇒ Techacademyの公式サイト

無料体験があるので、興味がある人はまず無料体験でも利用してみてはいかがでしょうか。

Techacademyの
無料体験の詳細はこちら

 

まとめ

カンプ

コーディングは本やサイトを見ているだけでは覚えられないのでひたすら手を動かし覚える事をオススメします

上達する為には何度も同じサンプルページを作り、しっかりHTMLとCSSの意味を理解するまで作り続けて下さい。

MEMO
例えばCSSの「float」はサイトを作る時に良く使いますし初心者がつまずいてしまうスタイルの一つでもあります

CSSのスタイルの意味をしっかり考えながら打ち続けるとそのうちCSSを意識しながらHTMLを打てるようになってきます。

そうなってくれば最終的に頭でHTMLとCSSを組み立てながらコーディングができる様になります(ここまでくれば一流のコーダーです)

最初は難しい場面に何度もでくわしてしまうと思いますが、WEBデザイン関係の解説サイトやブログ・教材をしっかり見れば解決できると思うので根気よく頑張って下さい。

コーディングはやればやるほど成長していきます。

慣れれば簡単ですし頭でコーディングを考えて打ち込める様になると楽しいですよ。

 

コーディングが学べるサイト

コーディングの練習ができるサイト

動画解説サイト

↓おすすめのオンラインスクール「Techacademy」です↓

Techacademyの
無料体験の詳細はこちら