転職前

【初心者】Webサイト制作を勉強するための参考書・参考サイト5選

のぶ
のぶ
こんにちは。のぶ(@n0bu0810)です。
ほー
ほー
やっほ!ほーだよ!のぶは、Webサイトを制作する前、知識がなかったって言ってたけど、どうやって勉強したの?
のぶ
のぶ
幸運なことにIT系の仕事をしている方が周りにいてね。「Webサイト制作の勉強するのであれば、まずはhtmlとcssを勉強しましょう!」って言われたんだ。
ほー
ほー
ほー。
のぶ
のぶ
(興味ないな、、、)

今は本当に便利な時代になっていて、検索をかければ色んな情報で溢れています。Webサイト制作を勉強するための情報も例外ではありません。

今回の記事では、Webサイト作成の勉強を始めた頃に利用したサイトを紹介していきます。

サイト制作知識0から始めたので、Webサイト制作に関する知識がある方からしたら少し物足りない内容になっているかもしれませんが、ご了承ください。

Webサイト制作初心者実践した独学学習法

①Progate(プロゲート)

まず私が利用したのは、Progateというプログラミングのサイトでした。

Progateの1番の特徴は、「初心者にもわかりやすい」という点ではないでしょうか。スマホ版もサービス開始しています。まさかスマホでプログラミング学習が実践できる日が来るとは。

流れとしては、数ページ分の学習をしたあとに力試しとして学習したコードを入力して、サイトをデザインしていきます。

もし間違っていれば間違っている箇所を教えてくれるし、わからなかったら学習ページに戻って再確認することもできます。

私はまずこのツールを使って、「html編・css編」を勉強しました。繰り返しやると書く場所や書くべきコードがわかってきて、本編を一周する時間も短くなって自分自身の成長を実感できる点に好感を持ちました。

レベル機能を実装していて、レベル上げというモチベーションを維持させてくれる機能もつけてくれています。

欠点をあげるとすれば、コードを書く位置まで教えてくれるので、書くことに慣れてきた方だとちょっと簡単なレベルかもしれません。

でも大丈夫。そのような方にはヒント無しのコーディングプログラムもあるのでぜひそちらをお試しください。

コーディングをまったくやったことない方が、最初に勉強するには最適なサイトだと思います。

中級編や上級編のコースもありますが、こちらは有料になっています。

②Dotinstall(ドットインストール)

Progateでhtmlとcssに慣れたあとは、dotinstall(ドットインストール)で練習をしました。

ドットインストールは1つの動画が3分以内にまとまっているので、自分が苦手なトピックをタイトルから探して勉強することが可能です。

Progateはコードを記載すべき位置を示してくれて、どのような内容で記載すべきかを教えてくれています。

ドットインストールはProgateと違い、実際に自分自身でコードを打つことになるので、理解できないまま手を動かすと、どのように、どうしてそのコードを打つ必要があるのか?という点がわからずに手が止まってしまいます。
なのでProgateよりは難易度が高いと感じました。

ドットインストールもhtml編とcss編が終わった後、実践編も用意されています。動画に習ってコードを入れることでサイト作成ができるので、サイト作りの練習をするにはもってこいです。

③HTML5&CSS3レッスンブック

Progateとdotinstallでなんとなーくhtmlとcssの全体像が見えてきた時点で参考書を購入することにしました。

どうして参考書を買おうと思ったかというと、ネット上で無料で勉強できる時代には本当に感謝しても感謝しきれないのですが、わからないところをすぐに検索することができる参考書を1冊持っておくことが勉強をする上では必要だと思っているからです。

わからないことがあるたびにネットを開いて、キーワード打って…の繰り返しというその手間があまり好きではないんですよね。

何か調べものをしたい時にすぐに調べられる環境を作っておきたいんです。オフラインの環境でも学ぶことができますからね。

そんなことを思いながら購入した本が、HTML5&CSS3レッスンブックです。

この参考書購入の決め手は2つあります。

一つ目は、レビュー(評価)が高かったこと。(高評価ばかりではない)

二つ目は、パラパラと読んだ時に段階を踏みながらサイト作成ができそう。

以上の2点から購入を決意しました。

この本は参考書なのですが、一つのサイトを作ることをゴールとしているので、本に沿って読み進たらサイトを一つ完成させることができます。

実際に本に沿って進めたのですが、「本の記載通りに書いたのに、どうして思い通りにならないのだろう?」ということがたっっくさんありました。

学びながらたくさんの失敗を経験することができるので、やはり何かを作ってみるということはとても大切なことです。

この本を何度か繰り返していくと、またまた「もうちょっと複雑な表現も学んでみたい。」と思うようになりました。

まだまだコーディングに時間がかかっていて初心者だったのですが、「もう一つレベルを上げたい!ちょっと複雑なサイトを見ながらコードを書く練習できるのってないのかな?」って思っていた時に出会った本が次に紹介する本です。

④html5/css3モダンコーディング

パラパラっとめくってみた感想は、「ちょっと今の自分にはレベルが高そうなデザイン。難しい表現がチラホラ……」

脱初心者をされている方々やバリバリのエンジニアさんにこの本を勧められました。

この本では3つのパターンのサイトを使うことができます。レスポンシブ対応(スマホ対応)のサイトを作ることができるのもこのサイトの特徴の一つです。

何よりサンプルサイトのデザインがオシャレなんですよね。それらのサイトを本に沿って進めていくだけで作成することができるので、「オシャレなサイトを自分で作ることができた!」という気持ちにさせてくれる参考書でもあります。

またサンプルサイトの一つにポートフォリオ用のデザインレイアウトのコーディングサンプルもあります。ポートフォリオのレイアウトで悩んでいる方は、このサンプルを自己流でアレンジしながらポートフォリオを作ってみるのも良さそうですね。

モダンコーディングでサンプルとして紹介されているサイトを参考書を見ずに作成することができたら、十分脱初心者レベルと言っていいのではないでしょうか。

と2つの参考書を参考にしてきましたが、これらの参考書で網羅できないものもたくさんあります。「わからないことはまずググろう。」とよく言われますが、ググったらよく出会うサイトがあります。

⑤サルワカ

まだまだ表現の幅が狭いからもうちょっと表現の幅について学べるものはないかな?って思っている時に出会ったのが、サルワカさんが運営するサイトのCSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選という記事でした。

この記事では実際の見出し(h2タグ)を載せながらcssコードを載せてくれているという親切心しか感じないサイトです。

このサイトで提案している見出しでは、「position」や「疑似要素」はもちろん、Progateやdotinstallで勉強したことを復習しながら見出しの作る練習ができるので本当に参考になります。

まったく知らなかったcssコードもたくさん使われています。

しかも、この記事だけじゃなくって、サイト自体がオシャレだし説明も丁寧だし、コーディングを学習されているのであれば、一度は出会ったことがあるのではないでしょうか。

コーディングのみならず、デザイナーさんのスキルに必要な「PHOTOSHOP」の使い方をこれでもかとばかりまとめてくれています。

コーディングをしているとPHOTOSHOPはどうしても避けられない技術だと思うので、コーディングの学習をしながら、PHOTOSHOPの学習も一緒にいかがですか。

まとめ

私が利用したサイト・書籍は5つです。

  1. Progate
  2. Dotinstall(ドットインストール)
  3. サルワカ
  4. HTML5&CSS3レッスンブック
  5. html5/css3モダンコーディング

これらを参考にしながらスキルアップをしてきたのですが、決定的に理解できていないことがあります。

それはウェブ全体をイメージすることです。classやdivの分類を使用することは理解ができるだけど、全然使い方がわかっていません。

コーディングするときって全体を観なければいけないし、他の方が見やすいコードをかかないといけない。(自分で修正する時もどこに何が書いてあるかわからなくって見返したくないことがしばしばありますw)

divやclassなどの分類も沢山登場するし、これらのことはどうやって割り振れば良いの?どうやってカテゴライズするの?という理解レベルはまだまだ低いです。

これらのことは、「参考書から理解しようとするのではなく、自分でたくさんの事例に触れること。既存のサイトのコードをみる習慣をつけることが大切。

と今の職場で言われています。

コーディングの言語も覚えて終わりでなく、自分が使いたいように使いこなせてようやく習得したといえるレベルにあるといえるので、慢心せずこれからもどんどんコーディングをしていきましょう。

ほー
ほー
最初から綺麗にコーディングできる人なんていないんだから最初はたくさんコードを書いたほうがいいんだね。
のぶ
のぶ
綺麗に書けるよりも、どれだけデザインに近づけることができるかを最初は考えたほうがいいんじゃないかな。デザイン通りに作れるようになるために、コーディングたくさんしてレパートリーを増やしていくのがいいんじゃないかな?って思うよ。 最初は綺麗さよりも表現できるかが大切だと思うな。
ほー
ほー
たまにはまともなこというんだね。いっぱい書く!
のぶ
のぶ
毎日コツコツ頑張りましょー!