progate
個人的には一番使い勝手が良いなと思っているサイト、まずはこちらからやっていきます。
progateではHTML&CSSには初級編・中級編・上級編の3コースがあります。
このうち無料で全てのレッスンを試すことができるのは初級編のみなので初級編をやっていきます。
初級編は大きく分けて以下の7つに分かれています。
- HTMLに触れてみよう
- CSSに触れてみよう
- レイアウトを作ろう
- ヘッダーを作ろう
- フッターを作ろう
- コンテンツを作ろう
- お問い合わせフォームを作ろう
基本的には出されるがままにやっていくだけで基礎的なことを学んでいけます。
一点だけ、CSSに触れてみようからhtmlの他にタブで切り替えてcssの記述もしていく形になります。
次へ進むを押してもエラーになり進まないなと思ったら、cssに切り替えてcssを指示通りに編集しなければならないというオチでした。
progate入門編を終えたらできること
ヘッダー・フッター・メインコンテンツ部分といった構成からなるHTMLのひな型は最低限作れるようになります。
最後唐突にお問い合わせフォームの作成レッスンがあるのですが、これは実際にメールを送れる機能が作れるわけでもなく、外側の入力欄をちょっと触ってみるくらいの内容のみです。
progate入門編では足りない部分
実際にホームページを作ろうとするとほぼ全て足りないかなという印象です。
レスポンシブデザインに関するレッスンも入門編にはない為、実践的なホームページを作る為には別途学習の必要があります。
そこで中級編や上級編につながり課金するというスタイルなので当たり前なんですけどね。
ひとまずHTMLに触ってみて、本格的な勉強を始めたいと思えるかの判断に利用するのが無料の限界かなと思います。
ドットインストール
次は動画を見ていく形がメインのドットインストール。ブラウザ上でコードが入力できるわけではないので、自分のPCに開発環境を入れる必要があります。
とはいってもAtomというエディタを入れるだけなので特に難しくはないです。
その環境構築編で短い動画が4つ、windows編とmac編あるのでお持ちのPCに合わせてサクッとやっちゃいましょう。
ドットインストールで無料で学習できるのは以下の3つ。
- はじめてのHTML
- はじめてのCSS
- 実践ウェブサイトを作ろう
はじめてのHTML
動画はmacでの操作画面なので、windwosでやってる人は戸惑うかもしれませんが、エディタのAtomは同じですし、フォルダにhtmlファイルを置いてそれを編集していくだけというのも同じ作業なので真似していけば大丈夫だと思います。
HTMLの基本的なことを学べる感じで動画通りに学んでいくだけの簡単な作業です。男性の説明が早口でどんどんすぎていくので聞きながら手を動かしてついていくのは無理かも、何かあれば動画を停止しながら手を動かしていきましょう。
はじめてのCSS
CSSでの設定にややつまづく人も出てくるかなというところに入ってきます。
とりあえず最初は動画の通りに入力していけば動きますので、なぜそれがそういう動きになるかはあとで自分で調べる等して保管していけばいいかなと思います。
ページレイアウトをCSSをいじりながら整えていきます、実践に近い良い内容だと思うので一通り頑張ってみると良いです。
実践ウェブサイトを作ろう
基本的な1枚もののLP（ランディングページ）を作成する為に諸々調整していきます。
突然「これを実現するにはflexを使うのでこのように入力します、はい出来ました」という形で利用しているプロパティの意味とかは全く説明が無いので理解しないままとりあえずこうすればこういう形にできあがるんだということまではわかります。
ドットインストールを終えたらできること
サンプルと全く同じ構成の1枚もののLPは作成可能になると思います。
ただこのプロパティを指定したらなぜこういう表示になりました、という説明はないので他の構成を作ろうとしても何をどうしたらいいのかわからないままだと思います。
ドットインストールでは足りない部分
progateよりはしっかりサイト作りな内容です。ただしこう入力したらこうなりますといういきなり答えだけバンバン書いていくスタイルなので、それを指定したらなぜそうなったのかという理解が足りません。
算数で言うと「1+1=2」ですといきなり書いてあり、同じ「1+1=?」という問題は2！と答えられるかもしれませんが「1+2=?」はまったくわからないという状況になります。
とはいえ無料で可能な範囲なのでここまで勉強できるだけでもOKです。
paizaラーニング
動画を見た後にコードを書いてみるという学習スタイル。
ドットインストールの開設は男性なのに対し、こちらはアニメ調の女性ボイスです。HTML/CSS入門編で見られる無料の動画は入門編1の4つ、入門編2と3の最初の2つでした。
paizaラーニングを終えたらできること
基礎の理解といったところで、実践的なページをつくるというところまではいたらないです。
ただBootstrapの解説が無料内に含まれているので、割と簡単にサイト内のボタンやレイアウトをある程度綺麗にすることができるということを知ることはできます。
paizaラーニングでは足りない部分
基礎的な項目の理解なので実践的なページを作るにはほぼほぼ不足ということになります。
3つの中では一番基礎寄りかもしれません。女性の声で解説してくれるのがいいんだ！という方以外はprogateとドットインストールで事足りるかも。
でもBootstrapについて知れるのは初心者には超有用なのでやはり無料だし見ておくと良いですね。
おすすめはどこ？
実際に3つやってみて思いましたが、どうせ無料の範囲内なので3つともやってみるといいです。
順番はprogate→ドットインストール＋paizaラーニングでBootstrap関連部分という感じでOKかと。
その後はどうしたらいいんだということですが、やはり実践的なサイトを作ってみるのがいいです。
そしてその時に絶対必要なのがCSSでなぜこの指定をしたらこういう表示になったのか？という理解です。
正直そこがわかればどんなレイアウトでも組むところまでは誰でもできるようになります。
プロパティ名で検索してそれがどういう意味でどういう指定をしたらどういう表示になるのか？というリファレンスを読んで自分で理解できるようであればそれでOKです。
有料会員はどう？
progateとドットインストールは月額980円、paizaラーニングは月額600円で有料会員になり中級以降の全ての動画が見れるようになります。
すべての動画を見れば疑問を解決して一から自分だけでサイトを作れるようになる可能性もあるんですが、私は個人的に次は本での学習を選択します。
理由は有料動画は事前に中身が見れないのでやりたいことができるようになるか不安なこと、知識が定着するまでは実際の作業をしながら手元で見直したいからです。
本であれば中身を見て自分がやりたいことが書いてるあるかを確認できますし、実際の作業をしながら手元で見直すことも可能です。
もちろん一回見れば覚えられるし本なんか読むのダルいよって方は月980円ですし、まずは1カ月だけ利用してみる選択も有りだと思います。
というわけで今私が知りたいことは以下なので、これらがまとまった本がないか書店に行ってみます。
- ページ全体をGrid Layoutで構築する基礎
- レスポンシブデザインのやり方
- 実践に近い形のサイトを一から作り上げる一連の過程
↓書籍での学習が終わりましたので記事にしました
