【脱・初心者】ドットインストール/progateの後は？Webコーダーへ次におすすめしたい本・学習動画

Webコーダーとは、デザイナーから上がってきたデザイン画をHTMLとCSSという言語を使って、Webサイトの形にする仕事です。

デザインデータをHTML化することをコーディングと呼び、その作業をすることを「コーダー」や「マークアップエンジニア」と呼びます。

HTML/CSSは、基本部分は1ヶ月適度で学べると思います。ただし、基本的なことを覚えただけでは、現場で戦えるレベルにはなりません。フリーランスで独立も無理です。

そこで、この記事では、HTML/CSSの基本はできるけど、その先を勉強したい人がどうすればよいか具体的な知識や勉強方法をまとめました。

ドットインストールやprogate等で、基本はマスターしている方向けの記事です。

基本を勉強したい人はこちらの記事へ↓

Sassを身につける

まず、cssの次に学んでほしいのがSasss（サス、サース）です。

Sassというのは、簡単に言うと、cssをもっと簡単に早く便利に書けるようにした記述方法です。

別に包丁でも切れるけど調理器具使った方が早いし便利だよねみたいな感じです。

効率が良くなるだけなので、別にsassを使わないで生cssで書いたからといってWebサイトが動かないわけではありません。

ただし、2023年現在の現場の主流はほぼ全てsassで書かかれていますので、cssを覚えたら速やかにsassの勉強に取り掛かるのをおすすめします。

なぜなら、チーム作業をする時や先方に納品する時は、cssファイルだけではなく、sassファイルの納品も求められます。Webサイトは生きているため、Webサイトアップ後もHTML/CSSの修正はこまめに行われます。そのため、元ファイルとなるsassファイルありきで話をされることが多いのです。

なので、現場に合わせて sassも覚えておきましょう。

　

sassってなに？変数とか苦手なんだけど、って人も大丈夫。

cssを学んだあなたは、cssの記述方法についてはだいたいわかっていると思います。それをちょっと記述方法を変えて、便利にしたのがSass。

cssが理解できるのであれば、絶対Sassも使えるようになります！

Sassを勉強したては少しだけつまづくかもしれません。でも、別にSassは全てをマスターすればいいものではないです、自分が理解できるものだけ便利だと思うものだけスポットで使うのでも全然ありです。

Sassの勉強方法

書籍ならこの本が一番おすすめです。

「Web制作者のためのSassの教科書」
少し古い本ですが、Sass初心者には圧倒的におすすめな本です（環境作りの部分だけは古いので最新のネット情報を参考にしてください）Sassのコードの基本的な書き方がマスターできます。

教科書というだけあって初心者でもすごくわかりやすいです。

オンライン学習であれば、Udemyのこちらの講座がおすすめです。

【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWeb開発実践入門

SassだけでなくHTMLとCSS・javascriptといったサイト制作に欠かせないスキルを、基礎～実践までを20時間の動画にまとめたベストセラーの講座です。

HTML/CSSの基本を終えた方にぴったり。cssとSassの記述方法の違いを見比べたり、ファイルの分割方法等を細かく説明してくれます。最後まで受講すると、脱・初心者になれますよ。

CSS設計を身につける

CSS設計という概念は、HTML/CSS初心者なら絶対に身につけてほしいです。

css設計とは、より管理しやすいcssを構築しようとする考え・設計のことです。

先ほども書きましたがWebサイトは生きています。そして生き続けている限りたくさんの人の手が入り、コードはどんどんカオスになっていきます。これはWebサイトが生まれてから何年もずっと課題になっていることです。

このカオスなコードを生み出さないよう、なるべく初期段階で管理しやすいコードを作ろうね、というのがCSS設計です。

CSSというのは、意外と自由で曖昧なので適当に書いても動いてしまったりします。

なので、ルール作りがないと、みんな好き勝手にコードを書いてしまって整合性のないソースになってしまいます。

また、初心者だと例えばクラス名に何つけようかというところで手が止まってしまうことも多いと思います。そういう初心者の悩みに答えをくれるのも、CSS設計の良いところです。

CSS設計は本で読み解くのをおすすめします。

私のおすすめは、この２冊です。

現場の実践テクニックを学んで、テンプレートを作る

基本を学んでもどう実践に活かせばいいかわからない。どの分野であれ、初心者の方がつまづくポイントです。

そういう悩みには、こちらの本がお薦めです。

独学で勉強しているだけでは身につかない、現場のテクニックをまとめた本です。

SassとCSS設計を一通り覚えたら、こちらの本を読んで実践テクニックを学びましょう。

そして、同じようにコーディングしてみること。

いろいろなWebサイトを見ていると、似たようなパーツでできているのがわかりますよね。

ボタン、タイトル、セクション、ヘッダー、フッター、メインビジュアル、カテゴリリスト、Webサイトはこれらのパーツの組み合わせで作られています。

なので、パーツのHTMLをテンプレート化してしまえば、Webコーディングの作業はぐっと楽になります。

これらのパーツを自分なりのコードで模写してみましょう。画像が必要な場合は、右クリック保存でいいです（個人練習用であれば）

いきなり高度なデザインのコーディングはしないでくださいね。シンプルな、簡単なデザインからはじめてみてください。

Webコーダーに必須のクロスブラウザ対応

クロスブラウザ対応はブラウザチェックとも言われます。

これはWebコーダーにとって避けては通れない大事な関門です。

あなたが書いたHTMLコード、もしかしたらchromeでは綺麗に見えていてもSafariでは崩れてしまっているかもしれません。

もしくは、Windowsでは問題なくても、Macでは見切れているかもしれません。

コーディングファイルは納品する前に、ブラウザや端末でちゃんと表示されているかどうかを確認する必要があります。

昔はIEというコーダー泣かせのバグ製造機のようなブラウザがあったのですが、2022年を持ってIEのサポートは終了しました。

今2023年の時点でチェックが必要なブラウザは大体以下の通りですが、バージョンにもよります。

また近年ではスマホ表示も必須ですが、全機種はとてもじゃないけど対応できませんので、エミュレーターでiPhoneとAndroidの主要機種のみのチェックが主流です。

これらのチェックするべき環境というのは、だいたいクライアントの指定かWebディレクターが指示してくれます。もし何も言われなかったら、Webコーダーの方で「最低限このブラウザで表示チェックしました」というリストを渡すといいでしょう。

スマホのチェックはchromeの開発コンソールを使おう

Chromeブラウザのメニュー > その他のツール > デベロッパーツールにある端末エミュレータを使いましょう。主要キャリアのスマホの表示をチェックできますよ。

Webコーダーの収入アップを考えるなら、Wordpressを学ぼう

CSS設計を意識したコーディングができるようになり、１つのサイト全体のコーディングにも慣れてきたら、次に挑戦してほしいのがWordpressです。

WordPressのコーディングができるかどうかで、Webコーダーとしての収入の桁が変わるといっても過言ではありません。

WordPressとは、CMSシステムのこと。CMSってなんぞやという人は以下の記事も読んでみてください。

簡単にいうと、全く知識のない素人でもWebサイトを更新できるシステムを組み込んだサイトのことです。

なぜWebコーダーがwordpressを学んだ方がいいかというと、今のWebサイトのほとんどは生のHTMLではなく、何らかのCMSが組み込まれているからです。

特に日本でシェア率が非常に高く、中小企業に限っていうとシェアNo.1なのが「wordpress」というCMSです。

WordPress案件はたくさんありますので、今後も重宝するスキルになります。

WordPressはPHPというプログラムで作られていますが、プログラムを理解できなくてもWordpress案件は対応できます。

まずはWordpressの仕組みを理解することから始めましょう。

おすすめ本は以下の２冊になります。

技術者の入門用にぴったりな一冊です。wordpressの仕組みや、コードの修正方法が学べます。

　

wordpressをオリジナルのHTMLを組み込むにはどうしたら良いか。悩める初心者Webコーダーのための一冊です。これ一冊でオリジナルテーマのwordpressが作れます！

Webコーダー用のWordpress本については、以下の記事も参考にしてくださいね。

サーバー・ドメインを学ぶ

Webコーダーであれば、サーバーの知識も身につけておきましょう。

特にフリーランスになりたい場合は、最低限レンタルサーバーやクラウドサーバーについての知識、HTMLやWordPressをサーバーにアップロードするところまでは身につけておいた方が良いです。

具体的には、以下を勉強するところから始めるといいと思います。

最終的にはamazonのAWSも学部ことになると思います。

サーバーの基本知識については、以下の記事も参考にしてください。

まず手を動かしてみたい人は、レンタルーサーバーを実際に契約してみましょう。

初めてサーバーを触るのであれば、レンタルサーバーがおすすめです。

動きのあるサイトを作るにはJavaScriptを学ぼう

近年では動きのあるサイトが主流ですよね。この動きのあるサイトは、JavaScriptという言語を使って作られているところがほとんどです。

JavaScriptはHTMLより複雑で、プログラミング的な思考も必要になります。

JavaScriptの勉強は、書籍やオンライン学習がおすすめです。

同じものを再度お薦めしますが、Udemyのこの講座はJavaScriptの解説も入っているので本当にお薦めです。

【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWeb開発実践入門

超初心者なら、progate の「JavaScript入門講座」からはじめるのもおすすめ。

基礎の基礎から教えてくれます。

　

書籍のおすすめはこちら。JavaScriptはアプリやゲームも作れるのでどちらかというとプログラマ向けの参考書籍が多いのですが、この書籍はWebサイトを動かす用のJavaScriptを前提とした書籍です。

Webコーダーの初心者にはまず最初の一歩として強くおすすめしたい書籍です。

こちらもプログラム超初心者におすすめな、JavaScript超入門です。

プログラムコードなんて書いたことない、見たことない、っていう人向けの、基礎の基礎から教えてくれます。

いつでも横においておくと便利な存在のコードレシピ集。逆引き辞典のように使えるので、「こういう動きをしたい時はどうすればいいんだっけ？」って時に使えます。

HTMLとJavaScriptの間には高い壁があり、多数の初心者Webコーダーがこの壁の前でつまづきます。

逆にいうと、JavaScriptを使えるWebコーダーはどんどん仕事が入ってきます。

JavaScriptのフレームワークを学ぶ

JavaScriptの基本を学んだら、フレームワークを使えるようになると便利です。

フレームワークとは、英語で「枠組み・構造」を意味します。いわゆる土台のようなもの。ひとつのプログラムを1から全部つくるとかなりの労力がかかります。フレームワークを使うことで、最初から土台ができている状態で、必要な部分だけをプログラムすれば良い状態になります。

フレームワークを使えると、プログラムする際の負担がグッと減り効率化がすすみます。

JavaScriptには数多くのフレームワークがあります。

2023年抑えておくべきJavaScriptフレームワークは以下の3つです。

• React
• Vue.js
• Angular

フロントエンドエンジニアを目指すのであれば抑えておくべき知識だと思いますが、マークアップエンジニア(HTML/CSS中心）であれば、フレームワークまで勉強する必要はないかと思います。

余談：jQueryについて

フレームワークと似たようなものにライブラリがあり、かつてWebサイトの動的アクションを実装するのに大流行したのがjQueryというライブラリです。今でもjQueryを使っているサイトはネット上に数多く存在していますし、2020年以前のWebサイトに最も貢献したライブラリと言われるほどの存在でした。

jQueryは本来のJavaScriptで書くと面倒で長くなる作業をコンパクト化して簡単にしたものです。ハンバーガーメニュー、クリックするとメニュー表示、フェードインフェードアウトといったWebサイトで欠かせない動きを簡単に実装することができましたので、多くのWebデザイナーの間で人気でした。

しかし、今は古い動作が重い等のデメリットの方が多く、JavaScriptを快適に惜しみなく使える新しい技術が生まれたことで、jQueryは使われることはなくなってきました。すでに知っているならともかく、今から新しく学ぶ必要はないと思います。

まとめ：中級Webコーダーのためのおすすめ本・動画

初心者Webコーダーのステップアップについてまとめてみました！

Webコーディングは独学でも勉強しやすく、オンライン学習や動画、書籍も充実しています。

Webデザインの勉強をしているうちに、コーディングの方にはまってしまう人も多いくらい、面白味のある仕事だと思います。

みなさんもぜひWebコーディング初心者を脱出して、素敵なサイトを作ってくださいね。