ホームページ作りたいけど、HTMLとかCSSとかよく分からんと諦めていませんか？
現在私は、会社でホームページを作っています。
作っているサイトは、様々ですがそれなりの企業のサイトや、期間限定の特設サイトの様な物も作っています。
値段もピンキリで詳しくは言えませんが、100万など超えるサイトなども作っています。
そんな私も、実際HTMLやCSSを覚えたのはここ１、２年の間です。
そもそも、私は別にホームページをやりたかった訳ではなく、会社で必要になったからせざるを得ない状態だったのです。
別にスクールに行く訳でもなく、ほぼほぼぶっつけ本番でした。
では、そんな私はどうやってある程度HTMLやCSSのスキルを身につけたかと言うと、結論を言いますと、手段を選ばずに実践でサイトを作り続ける事です。
これ言うと『意味わからない』と言われますが、その事について詳しく解説していこうと思います。
目次
初心者が出来るHTMLとCSSの覚え方【実践に勝るものはありません】
初心者が出来るHTMLとCSSの覚え方は以下の通りです。
ポイント
- まずは、HTML/CSSに参考書１冊で知識の下地を作ろう
- 既にあるコードはコピペして使おう
- 似た様な仕組みの物は、１から作らない
- ある程度覚えてたら、個人的にテンプレを量産する
以上になります。
それでは、詳しく解説していきますね。
まずは、HTML/CSSに参考書１冊で知識の下地を作ろう
当たり前ですが、何事も新しい事を始める時はそのやる事の最低限の知識というのが必要です。
理由は簡単で、その事を説明するのに専門用語や概念などが存在し、それがある程度頭に入っていないと、調べても説明の意味も理解できないからです。
ただ、論理的に全て覚えれれば越した事はないですが、時間が勿体無いのでHTMLとCSSはこんな事が出来て、こういう風に考えればいいんだ！など、特別に具体的である必要はここの段階では必要ないと思います。
そこで止まっていると、進まないから楽しくない。と思ってしまうのでその過程で一番早いのは、簡単な参考書を１冊消化する事だと思います。
ドットインストールやProgateなどのサイトで学習するのもいいと思います。
私は暇な時に、この２つのサイトで復習や勉強などを遊び半分でやる事があります。
一応無料である程度は出来ますし、わかりやすいので初心者にはいいと思います。
YouTubeなどでも悪くはないですが、多くてどれが良いのか分からないという場合があります。
その探している時間が結構無駄なので、ネットで無料なら上記の2つをおすすめします。
参考書はそこまで、多くを見ていないのでこれがおすすめとは言い切れませんが、この本は簡単でわかりやすかったです。
参考書の良い所は、ページが進んでいるという進歩度が視覚でわかるのでモチベーションが続く所ですかね。
初心者は目標を作るのが苦手だとおもうので、まずは１冊やってみるというのが私のおすすめです。
既にあるコードはコピペして使おう
それで、ある程度下地の知識が出来上がったら、もうサイトを作り始めます。
実際、HTMLはコードの使い方などでもSEOなどの関係なども出てきますが、最初はそこまで気にしなくていいでしょう。
いきなり仕事がある場合は、簡単なもの。テンプレートを改変すれば出来るサイトや、Bootstrapなどを使ったサイトなどはおすすめです。
そうでない場合も、複雑な動的な物でない限りは、大体先人の天才の方々デザインしている物があるので、それをコピペしてブラウザで見たら大丈夫！という様な感じで構いませんので、構築します。
仕事がない場合は、簡単そうなサイトを真似て作るのが一番いいと思います。
結果的に、サイトのデザイン通りにコーディングするので、このサイトっぽく作る、いわゆる模写的な作業は勉強になります。
もちろん、自力で行う事もいいのですが、コピペして作業していくウチに、このCSSを使えばこう出来るのか、など、こうHTMLを書けば簡単なんだ！といった様な事に気がつくので、正直手段は二の次でいいと考えています。
そもそも論として、モチベーションを維持しながら、尚且つ勉強し、仕事をするので、余り多くのストレスは明日やらなくなる可能性が大きいので、継続する事が大事です。
なので、自力でやらないと！と考えている人は、そもそもコピペしたらサイトが出来るのか？という所を試してみてください。
初心者の人には、意外と良い練習になると思うんですよ。
コードの見方などの練習にもなりますからね。
まずは、コードを見る事になれましょう。
似た様な仕組みの物は、１から作らない
まぁ、これも先ほどと似た様な内容になるのですが、確かに１から作れれば一番すごいですが、なかなか難しい所もあります。
何より、時間がない！という場合が多いです。
それに、クライアントによって要望も違うので使う手法も変わってきます。
なので、1つのコードを黙々と頭を抱えて書くよりも、まず誰か似た様な仕組みのコードを書いていないか？と探す方が手っ取り早いです。
経験上結果そのままでは使えないので、そのコードを修正して使う事になるので、結果内容も理解できますし、ただ書く手間が省けて空いた時間で他の事に力を注げるので、別に恥ずかしい事でもなんでもないです。
知り合いの、エンジニアの人は、phpの動的な事はわかるけど、CSSとかデザインは嫌い！という人も世の中にはいます。
私からすると、phpの様な動的なプログラムの方が100倍難しくないですか？と思いますが、まぁ、適材適所があるのが世の中です。
こういった話を聞くと、デザインはコピペ、プログラムは自分。
プログラムはコピペ、デザインは自分で。というのも別にある話なのです。
なので、使える物は使って、それを修正して多くのサイトを手がけてみましょう。
最初は大変ですが、ある日コードの探り方がわかる様になってきます。
そうしたら、簡単なサイトは結構高速で作り上げる事が出来る様になると思います。
ある程度覚えてたら、個人的にテンプレを量産する
これは、復習と、自分の時間を作る手段ですね。
デザインにもよりますが、大体サイトの構成って似ています。
なので、よく自分が使っているサイトの構成などを、多数の種類でテンプレート化しておきます。
Bootstrapのテンプレートテーマみたいなのを作っても良いかもしれません。
そうする事で、自分の復習もできますし、困った時に使えるテンプレートというツールを貯めておけるので、作業が捗ります。
ここまで来たら、もう仕事をしていると思いますし、出来ると思います。
根拠は、私は出来ているからです。
最近はWordPressというphpのサイトも増えていますので、HTMLとCSSだけじゃ…と思うのは分からなくもないですが、簡単な修正などはHTMLとCSSの知識と、ちょっとした調べるコツがわかれば、テーマを作るなどでなければ十分に出来ます。
もちろん困る事もあると思いますが、調べれば出てきますし、出来そうな気がするといった内容はおそらく出来ます。
どうやっているか検討もつかない！というのは、おそらく知識不足なので、手を出さない方が良いかもしれません。
経験則になってしまいますが構築内容を聞いている、もしくは見ている段階で『多分こうすれば出来るよな〜？』見たいな考えが頭にあれば、論理的に解決策のロジックは頭の中に生まれていると思うので、あとは１個１個調べていけば恐らく解決できます。
しかし、『え？いやいやどうやるのか全くもって理解できないけど、それってHTMLとCSSで出来るの？』という場合は、知識不足や経験不足だと思われます。
話が脱線してしまいましたが、復習もかねてテンプレを作って行く事で、後々自分が楽になるのでおすすめです。
初心者が出来るHTMLとCSSの覚え方【まとめ】
いかがでしたでしょうか？
もう一度簡単に復習しておきましょう。
ポイント
- まずは、HTML/CSSに参考書１冊で知識の下地を作ろう
- 既にあるコードはコピペして使おう
- 似た様な仕組みの物は、１から作らない
- ある程度覚えてたら、個人的にテンプレを量産する
一番手っ取り早いのは、既に出来る人に教えてもらう事ですが、なかなか居なかったりしますよね。
その様な場合は、オンラインスクールなどで学ぶ事をおすすめします。
私も今現在、TechAcademyというオンラインスクールでPHPの勉強をしています。
確かに安くはないですが、現役のエンジニアがメンターとして教えてもらえる事と、ステップ毎に課題を提出するので、きちんと学習しなgら進めるので、結構いいんじゃないかな？と思います。
会社の場合は、奨学金制度もあるので、会社のお金で覚えるのも人生的にはお得です。
講義も、夜11時まで対応しているので、仕事をしながらでも十分に学習できます。
それでは、読んでいただいてありがとうございました。
ダイスケでした。（@desing_d）