「WEBサイトの見映えを変えるには、HTMLとCSSを学ぶ必要があると聞いて、
書籍を買ってみたけど、何をやっているかさっぱり分からない…」
このように、CSSの独学に挫折してしまった経験はありませんか？
例えば「文字色を変えたいだけ」なのに、どこを直せばいいか分からず、
ネットで調べてコピペしたコードでレイアウトが崩れる…
しかも元に戻せず、半泣きでやめてしまった…なんてことも。
CSSを学ぼうとしても、最初はそんなトラブルばかり。
でも、毎回誰かに頼るのは現実的じゃありません。
「ちょっと余白を調整したい」「ボタンの色を変えたい」
――そんな些細な変更でも、外注すれば時間もお金もかかってしまいます。
しかも、細かい修正のたびに人にお願いしていたら、
思い通りのデザインにたどり着くまでに、どれだけ時間がかかるか分かりません。
そこでWEBサイトの更新は自分でできるようにしたいという方に向けて、
CSS初心者の独学におすすめな動画教材を3つご紹介します。
もしCSSを使って、WEBサイトを作りたい・更新したいと考えている方は、
ぜひチェックしてみてください。
CSSは独学できない？書籍を買うだけではすぐ挫折してしまう理由
内容を読んでもイメージ通りの形にできないからです。
具体的には…
- 専門用語ばかりで、何を作れるのかが分からない
- ルールが複雑で、再現したい形でデザインが起こせない
- 途中でつまづいても解決方法を自分で調べられない
このように、書籍を読むだけでは、思うようにいかず途中で挫折してしまいがちです。
1.専門用語ばかりで、何を作れるのかが分からないから
「書籍なら、きっと詳しく解説されているはず…」と
これからCSSを学んでいく方はそう考えることでしょう。
CSSの基本から、
Webサイト制作に必要な記述まで学べることは確かです。
ただ市販の書籍は、学校の教科書のように
説明が丁寧なものばかりではありません。
「セレクタ」「プロパティ」など専門用語が並べられるだけで、
「実際これをどうやって使うのか？」
「何をすれば自分の思い通りにWEBサイトを作れるのか？」
というところまで解説されておらず、
結果、何をすれば良いのかイメージできないまま挫折してしまうなんてことがほとんどです。
2.ルールが複雑で、再現したい形でデザインが起こせないから
実はWEBサイトを作るのに使うHTML・CSSといった言語も、
定期的なルール変更が行われています。
例えば、主流のCSS3は2011年頃から策定されていますが、
未だに日々進化を遂げており、常に新しいプロパティが追加されています。
なので、同じレイアウトでも
書籍によって表現方法が異なっていたりとルールが複雑になっており、
またすでに別のスタイルが同じ箇所に当たっていたりして、
思い通りのデザインを起こせないなんてケースも少なくありません。
3.途中でつまづいても解決方法を自分で調べられないから
バージョンの変化も早く、ネットの情報もバラバラ。
「調べたのにうまくいかない」という状況に、誰でも一度は陥ります。
何より書籍ともなると、本を出すことを決めてから、
世の中に日の目を浴びるまでにタイムラグもあるので、
トレンドを踏襲したデザインの情報までは載っていなかったり…。
このように、作りたいものを作るために必要な情報が少ないので、
書籍だけでの独学では限界があります。
もう挫折しない！初心者がCSSを独学で効率良く学ぶ方法
ではどうすれば挫折せず、
独学をやりきれるのでしょうか？
結論、以下のステップに沿って進めることで
最後まで学び切ることができます。
- 実際に作れるものを調べて、作るものを1つに絞る
- 作りたいものをピックアップして手元に置いておく
- 実際にモノを作りながら、分からないところは動画で学ぶ
1.実際に作れるものを調べて、作るものを1つに絞る
何かを成し遂げたいなら、
まずはゴールを決めましょう。
ここでいうゴールというのは作りたいもの、つまり「成果物」です。
例えば、WEBサイト・スマホアプリ・お店のキャンペーンページなど。
「今自分が何を必要としていて何を作りたいのか？」
といったことを一度整理してみてください。
もしここで作りたいものを決められないと、
中途半端にあれこれと手を出すだけで、
何も身につかないまま時間を無駄に過ごすだけになってしまうからです。
そこでまずはそもそもなぜ勉強するに至ったのか？
その動機と目的をしっかり定めるようにしましょう。
2.作りたいものをピックアップして手元に置いておく
作りたいものが決まったら、
次は具体的に作るものをイメージして、
参考になるものを手元に持ってくるようにしましょう。
なぜならモノを作った経験がないうちは、
何が作れるのかイメージできるだけの引き出しが頭にないからです。
仮に自分の感情の赴くままに手を動かそうとすると、
目的に沿わないものが仕上がってしまったなんてことになりかねません。
こうしたトラブルを避けるためにも、モノづくりに取り組むなら、
まずは参考となるものを手元に用意するところから始めていきましょう。
3.実際にモノを作りながら、分からないところは動画で学ぶ
作るものと作りたいものが決まったら、
早速手を動かしつつ、目的とするものを作っていきます。
分からないところや詰まったところは、
都度調べればOKです。
ここで重要なのは、
最初から完璧を目指さないということ。
「CSSを理解していないから」
「プロパティの意味を理解できていないから」
このように、理解レベルが到達していないから
モノを作らないという判断をしてはいけません。
あくまで目的は、モノを作り切るということ。
CSSを深く理解し、追求することではありません。
モノを作り切って活かすのが本当のゴールなのです。
なので、分からないことは調べながら、
手を動かして実際にモノづくりにチャレンジしてみてください。
それでも理解が怪しいなら、
動画教材を使いましょう。
動画教材では、チャプターごとに分からない箇所に絞って解説してくれるのはもちろん、
文字を目で追う必要がないので、作業の合間でも学べます。
もし書籍でCSSを学んでみたけど、
挫折してしまったという経験がある方は、
ぜひ動画教材も合わせて活用してみてください。
CSSの独学に役立つおすすめ動画3選
では実際どういった動画で、
CSSを学べば良いのでしょうか？
CSSの独学に役立つおすすめ動画を3つご紹介します。
1.文法をゼロから学べる「CSS / CSS3 マスターコース」
NEST online様の「CSS / CSS3 マスターコース」です。
テクノロジーとクリエイティブのプロを目指す人のためのスクールを運営しており、
2ヶ月で未経験からWebデザイナーになるコースを提供している講師とのこと。
簡単なテキストの見映え変更はもちろん、
レイアウトの調整方法までガッツリ解説しています。
文法からきちんと学びたいといった方にはおすすめです。
2.レスポンシブ対応のWEBページの作り方が学べる「WEBデザイン講座 Level3」
storeG様の「WEBデザイン講座 Level3」です。
2018年7月より、Udemyでオンライン動画講座を制作・運営しており、
これまでの受講者総数は、なんと驚きの約20,000名超え。
講座では文字の見映え変更や簡単なレイアウト調整から、
さらに一段階ステップアップできる
PCとスマホ両方に対応したWEBページの作り方が学べる内容となっています。
現場でも頻繁に使われるグリッドレイアウトの方法も丁寧に解説しているようなので、
気になった方はぜひ一度覗いてみてください。
3.実践レベルの内容が学べる「Webデザイナー直伝のマスター講座」
Staseon（スタシオン）様の「Webデザイナー直伝のマスター講座」です。
講師はITクリエイティブ領域の人材に関する多様なサービスを提供しているとのこと。
内容としては、超実践レベルのテクニックのみを多数収録。
スタイリッシュなパーツを作りたい・オシャレなサイトを作りたい
といったことも叶う内容となっています。
初心者を脱却して、自分だけの特別なサイトを作っていきたいという方は、
ぜひ合わせてチェックしてみてください。
WEBサイトをカスタマイズして、自分の活動を外へアピールしよう
テンプレートのままでは、自分らしさは伝わりません。
「何をしている人か」「どんな想いで発信しているか」
それらを見た目で表現するためには、CSSでの微調整が不可欠です。
ちょっとした装飾・色味・レイアウトで、
あなたのサイトの印象は大きく変わります。
だからこそ、CSSを学んで、自分の言葉と世界観が伝わるWEBサイトを作ってみませんか？
