SAKURAGRAPHICA

初心者がHTML+CSSでコーディングを覚えるために必要な学習方法や、PC環境の構築など、管理人の経験をもとにまとめました。HTMLのコーディングはプログラミングとは言えませんが、プログラミング的な要素というのは「好き嫌い」がはっきり分かれます。

「これから始めてみようかな？」と考えてる人は、まずは「学習方法（初心者編）」を試して下さい。ここで「ん～～～」と思った方は多分この仕事には向いてません。

単にWEBサイトを作れるようになりたいだけならHTMLやCSSだけを覚えればいいですが、これで食っていきたいと思っている場合は、HTMLとは関係ない知識も必要になってきます。

学習方法（初心者編）

「HTMLやCSSに触れるのは初めて」という方向け。まずはここから「HTMLでホームページを作る仕組み」の理解から始めてみるといいと思います。

オンライン学習サイト

色々なサービスがありますが、代表的なサイトを2つご紹介します。一応注意点ですが、学習サイトのレッスンを修了したからといって、お金が取れるホームページが作れるようにはなりません！

HTMLを「かじる」程度のものだと思ってください。

Progate（プロゲート）

HTMLやCSS以外にも様々な言語のプログラミング学習が可能です。どのコースもほとんどの場合は、さわりの初級コースは無料で学習可能な様ですが、中級コース以上は有料となります。

HTML＆CSSの学習コースは全7レッスンで、初級～上級に分かれており各コース1時間～4時間程度の学習時間（実際はそんなにかかりません）となります。

プロゲートの特徴としては、オンラインのエディタ機能がありますので、実際にHTMLやCSSでコーディングしながらレッスンを進められるので、自身のPCやスマホに学習のための環境を作る必要が無いところです。

サービス概要

ドットインストール

こちらもメジャーな学習サイトです。主な特徴は動画視聴による学習となります。

1レッスン1分～3分程度の動画を「流し見」する感じで、プロゲートとの違いは「オンラインエディタ」による学習機能が無い事です。単に動画を視聴するだけなので、個人的な意見ですが頭に入りずらいと思います。（管理人は書いたり打ち込んだりして覚えるタイプなので）

ドットインストールも「無料会員」と「有料会員」がありまして、プレミアムレッスン動画は有料会員のみ視聴可能。他、動画内で説明してる音声の文字起こしが表示されるとか、素材ファイルをダウンロードできるとか無料会員より機能的に優遇されてますが、そのほとんどは無くても困らない機能ばかりです。

動画を見るだけなら必要ありませんが、エディタ機能がないので実際にコーディングしてみたい場合は、自身のPCに何らかのエディタソフトの導入が必要です。

→おすすめエディタソフトはこちら

サービス概要

サルワカ

上記2サイトとは方向性が違いますが、HTMLやCSSはもちろん、WEBサイトの仕組みまで解りやすく解説してくれています。様々な解説がSTEP33までありますので、全て見終わるころにはWEBサイトの仕組みやHTMLなどについて、何となく理解できてると思います。

サルワカは解説サイトなので、誰でも無料で閲覧できます。プロゲートやドットインストールと並行して利用してみてください。

サービス概要

学習方法（中級者以上）

HTML+CSSをある程度理解し、簡単なレアイウトであればコーディングできる程度になってきたら中級者です。本格的にプロを目指すなら一歩踏み込んだ学習が必要です。では具体的に何をするのか？キーワードは「真似る」です。

デザインの摸写

WEBサイトの摸写です。色んなサイトのデザインだけを見て、自分なりのコーディングでサイトを構築してみてください。HTMLとCSSを手っ取り早く覚えるには経験上、これしかないです。頭で理解しようとしても、中々技術までは身につきません。スポーツがいい例です。何度も何度も同じ練習を繰り返して体に覚えこませる。失敗しながらも何度も練習してるうちに、個人差はあれど自然と身についていくものです。

HTMLを覚えるのに一番いいのは、指導してくれる経験豊富な先輩がいて、日常的にコーディングに携われる制作会社に就職するのが一番ですが、今のご時世、新卒でもない限り業界で働こうと思ったら即戦力を求められますので、自分でそういった環境を作って学習するしかありません。

そのために摸写を繰り返して技術を身に付けるのが非常に有効です。

自分で作ったデザインではなく、他人がデザインした様々なデザインのコーディングに挑戦してください。レイアウトが簡単なものから複雑なものまでありますが、まずは簡単そうなものから着手してください。といっても、現段階では簡単なのか難しいのかの判断すらつかないかもしれませんので、オーソドックスな2カラムのレイアウト（メインコンテンツ+サイドメニュー）から始めてください。

カラム数だけで言えば、基本1カラムなランディングページ（LP）の様なレイアウトの方が簡単なのですが、LPは不規則なデザインが多いので中級者レベルでは逆に敷居が高いと思いますので、左右に分けてあるだけの単純な2カラムがオススメです。

また、2カラムのレイアウトでは要素の横並びが必要になりますので、float・flex・gridなどを駆使して、様々な要素の横並びを覚える事ができると思います。

実用書などの書籍で学習

巷に溢れるHTMLやCSS関連の書籍ですが、書籍での学習は初心者の段階ではあまりおすすめできません。管理人の知る限りでの初心者向けを謳った書籍でも、ある程度の予備知識がある前提で書かれてるものが多い。文中には普通に専門用語なども飛び交っており、「これから始めよう！」という初心者には意味が解らずに途中で投げ出してしまう可能性が高いので、書籍での学習は中級者以上をオススメします。

オススメの書籍のジャンル

HTMLの用語やCSSのプロパティなどを説明したような書籍は全く買う必要無いと思います。これから覚えようって人にはあまり役に立ちません。

オススメはズバリ「サイトを作りながら覚える系の書籍」。

何がオススメかというと、本を執筆してる著者の方はその道のプロです。恐らくあなたが思いもつかない方法でコーディングしてるのを目の当たりにすると思います。「こんな方法もあるのか！」といった事が書籍からは沢山吸収できると思います。

サイトを作りながら覚える系の書籍には、自身のPCで書籍の学習をするための環境の構築方法も書かれているので、そういった部分の知識も自然と身につきます。

他の人がコーディングしたサイトを見る

当然ですが表面上のデザインを見るわけではありません。サイトのソースコードを見てください。現在WEB上で閲覧できる稼働サイトのほとんどは、プロがコーディングしたものです。それらのソースコードを見て、どのようなコーディングをしているのかを知るのは非常に勉強になります。書籍での学習と同様、自分では考えつかないようやり方を見つける事でしょう。

それらを参考にして自分のコーディングパターンとして追加し、ものにしてください。

学習に必要な環境の構築

WEBサイトを構築するにあたり、必須なソフトや理想的なPC環境などがいくつかあります。

HTMLを編集するためのエディタや、デザインの作成・画像の加工をするためのソフトなど、無いと困るソフトからあると便利なソフトや、WEBサイト作成に必要なPC性能までをご紹介します。

PCの性能はどの程度あればいいのか？

画像の加工作業なども行う場合（Photoshop・Illustratorなど使用）の前提で、最低限この程度あればというスペックとしては、

上記程度あれば、PhotoshopとIllustratorの同時起動でも、さほどストレスを感じることなく作業できると思います。PC自体はノートでもデスクトップでも構いません。（管理人は自作PCなのでデスクトップです）

ちなみに、上記程度のスペックであればAmazonなどで中古PCとして3万円程度（モニタ別）で購入できます。

各種ソフト

HTMLを編集したり画像を加工したり、デザインを作ったりと、WEBサイト作成に必要なソフトをご紹介します。

まとめ

管理人の経験上の話ししかできませんが、HTML+CSS覚えるのに一番手っ取り早いのは「摸写」と「真似」です。管理人も、書籍や他人様のサイトからやり方真似て、只管に摸写を繰り返すことで今に至ってます。

ただし、この過程をある程度は「楽しい」と思えないと続けるのは難しいでしょう。管理人は目からウロコなやり方を見つけるたびに、まるで自分自身で難問のパズルでも解いたかのような喜びを感じました。

こんな感覚になる人の方が少ないと思いますが、やってて苦痛に感じるのであればすぐに止めて、他のやりたいこと探した方がいいでしょう。

苦痛だしやりたくもない。だけどやるしかないといった状況の方も少なからずいると思います。そんな状態で学習のモチベーションなんて上がるはずもありません。そんな時は自分のためになるサイトや誰も興味が無いと思うけど自分はあったらいいなと思うサイトを作るところから始めてみてください。ものすごいコアでマニアックな内容でも構いません。自分の興味がある題材で学習できるのであれば、気持ちも大分違ってきます。

という訳で結論。人のコーディング真似て摸写を繰り返す。　本気で習得したい人、これが一番の近道だと思います。