HTML・CSSが初めての方がプロゲート等で学んだあと、どう実践練習を踏んでいけばよいかを目的別にお話します。
今後の目的により異なります
HTML・CSSを現時点でどのくらい極めるべきなのかは、今後進みたい方向性によって異なります。
①LP（ランディングページ）等を制作して、仕事を受注したい（副業含む）
この場合は、巷のWEBサイトであるような定番のデザインは制作できるようHTML・CSSをマスターする必要があります。3～5個くらいはLP模写をしてみたほうが良いでしょう。
ちなみにクラウドソーシング等でもHTML・CSSのみで受注できる仕事はあります。
ですので、まずサイト模写練習等をしてHTML・CSSの実践力をつけたら仕事を受注しみるのもよいと思います。JavaScriptの勉強はその後でも大丈夫です。（ JavaScriptができたほうがやはり幅が広がります。）
②ブログを書きたい（広告収入を得たい）
HTML・CSSを使わなくてもブログを書くことはできます。例えば無料ブログのアメブロを使う際は、一般的にあまりHTML・CSSをカスタマイズすることはありません（カスタマイズが制限されている仕様です。）
また、例えばWordPressを使う際も、既存テーマを使えば初めからデザインはできています。 ブログを書くことが目的の場合は、デザインは既存のものを活用し、コンテンツ（文章の中身）の制作の方を重視したほうが早く成果は出るかもしれません。
とは言っても一部のデザインを修正したいときや、下記③のようにオリジナル度を上げていきたいときに、HTML・CSSをカスタマイズする必要は出てきますので、コンテンツ作りと並行して少しずつHTML・CSSの力も伸ばしていくことをお勧めします。
そういった意味では、LPの複写などはとりあえずおいておいて、HTML・CSSのカスタマイズの必要性が出てきたときに、必要なコードを検索等で調べていく方が実践的とも言えます。
③自分のオリジナルWEBサイト（サービス）を制作したい
この場合も、プログラミング初心者であれば、まずはWordpressでプラグインなどを使い、制作していく方が手っ取り早いのではないでしょうか。
デザインはWordpress既存テーマが使えるので、作りたい機能を設置することにまずは注力し、後ほどHTML・CSSを勉強しなおしても遅くはありません。
もちろん、LP模写をした方がせっかく勉強したばかりのHTML・CSSも身に付きやすくなりますので、やっておいて損はありません。ただ、HTML・CSSを極めるより先に、WordPress等の使い方を覚えていく方が優先度が高いと思われます。
HTML・CSSについては、デザインをカスタマイズする際はネットでコードを検索したりしてコードをコピペすれば大体やりたいことが実現できました。
HTML・CSSの本格的な勉強が必要になったのは、オリジナルテーマを作成することになってからです。結果的に、そのおかげでLP制作などの仕事を受注することができるようになりました。
LP模写の手順
模写するサイトを見つける
巷には、参考になるサイトの紹介ページがたくさんあるので、その中で気に入ったデザインのサイトを選べば良いのですが、その「お手本」サイトの多くにJavaScript等が使われていて、プロゲートで習ったレベルでは対応できないサイトも多く、意外と適切なサイトを見つけるのに苦労します。
見つけるポイント
- なるべく動きの少ないサイト
- 画像中心ではなくて、テキストも多く配置されているサイト
- 長方形や正方形が中心のレイアウト
- 色が2色程度を基調にしているシンプルなサイト
サイトの例
《私が模写に使ったサイト》
こちらはシンプルな作りとなっており、初心者でも真似しやすかったです。黒とゴールドで高級感のある色使いも勉強になりました。大変お世話になりありがとうございます。
※一部、「タブ」機能が使われていて、切り替えが必要になるので、そこは一部だけ模写しました。
《模写向きのサイトの紹介ページ》
《お仕事を受注したい方は、こちらもおすすめ》
コーポレートサイトは需要が多いです。「集客用」「営業用」サイト作成の制作会社のホームページ等で制作例を調べると、適切なサイトがたくさん出てきます。実際に公開するのは丸コピはまずいですが、勉強にはもってこいです。
HTML・CSSで同じデザインを再現しようと試みる
こちらのサイトに詳しく載っていました
WordPress上でのLP模写
私の場合は、すでにWordpressで無料お試しをやっていたので、お試しも兼ねてWordpress上でのLP模写という、若干邪道なやり方をしました。（笑）
※しかも、既存テーマを使い、もともとレイアウトが組まれている状態で行いました。
それでも、勉強になることは多かったです。実際、WordpressでもLPを作れる機能は少なく、きれいに作ろうとするとHTML・CSSを操る必要があります。
WordPressでのLP模写手順
私は最初、操作方法等も全然わからなかったので、そんな方のためになるべく詳しく書いておきます。
①お手本サイトのキャプチャを撮る
② PCの画面の右半分と左半分で、それぞれ コードエディタとプレビュー画面を映す。
コメント