Pocket

プログラミングを始める場合、まず最初にこのHTML・CSSと格闘する期間が出てきます。

すでにご存知だとは思いますが、HTML・CSSはプログラミング言語ではありません。なので複雑な考え方をせずに短期間でマスターできるものになります。

ですが全くコードを打ち込んだ事のない人にとっては、正直わけわからん部分がたくさん出てきます。

中にはHTML・CSSを学習している段階で挫折してしまう人もいるため、この学習期間は甘くみてはいけませんよ。

ちなみに私は

『HTML・ CSSなんて楽勝でしょ!』

と思っていた人間の一人なので、最初は結構メンタルが削られました。

しかし数週間程度の学習である程度大枠を理解できたので、そこからはプログラミング言語と同時進行でスキルを高めていきました。

なのでここでは私がど素人だった頃に失敗した勉強法と、最短でたくさんの経験値が得られるHTML・CSSの練習方法を実例を交えながらご紹介していきたいと思います。

以下の通りに学習していけば、短期間である程度のサイトを作る事ができるようになりますので、ぜひ最後まで読んでみてください。

速攻でHTMLをマスターしたいあなたへ!

まず一般的に正しいと言われているHTMLの学習方法を実践すると、思ったよりも遠回りしてしまう事があります。

初心者の場合、まず最初にアマゾンや書店などで

『初めてのHTML・CSS』

などの本を購入して、それを勉強しようとします。

しかしこの行動は、ぶっちゃけ遠回りです!

書籍を購入して学習することは私も賛成ではありますが、最短最速でHTML・CSSを学習するのであれば勉強する時間は必要ないのです。

つまり

『分からないところを書籍で確認する程度』

で考えておくということです。

学校の勉強のように、最初のページから最後のページを丸暗記するような学習スタイルは、このプログラミングの世界では無意味です(無意味は言い過ぎかもしれませんが笑)。

それよりも、初心者は他にやる事がたくさんあります。

最初はとにかく『経験値』を積む事が重要ですからね。

ぶっちゃけHTMLは難しくない

HTML学習で重要なことは様々ありますが、まず最初にやっていただきたいことは

『HTML・CSSが難しいというセルフイメージをぶっ壊す』

ことです。つまり

『HTML・CSSなんて俺(私)なら余裕でしょ!』

くらいのマインドを持っていただきたいのです。

実際数週間ガッツリ時間を注げば、HTML・CSSの大枠は理解する事ができます。

しかし、最初の何も分からない段階で『HTML・CSS=難しい』と思ってしまうと、頭に入ってくるものも入ってこなくなるのです。

大人が

『自転車に乗れるのは当たり前』

だと思っていますが、子供からしたら

『自転車に乗ること=難しい』

というセルフイメージですから、同じことを実践するにしても、マインドひとつで最終的な結果は大きく変わってくるのです。

HTML学習を最短で駆け抜ける実践練習方法!

正直私自身がHTML・CSSの学習を最短最速で駆け抜けたとは言えません。色々と失敗を経験してきたことは事実です。

しかし今考えると

『あれを取り入れておけばよかったな』

と思う事がたくさんありますので、それを取り入れれば初心者のあなたもすぐにHTML・CSSのスキルを高める事ができると思います。

ちなみに私がプログラミング初心者の頃に戻り、HTML・CSSを学習するのであれば、必ず以下の通りに進めます。

重要なポイントとしては

『知識を取り入れるよりも、吐き出すことに時間を注ぐこと』

です。

まずはHTMLの動きを軽く覚える

いきなりHTMLを練習すると言っても、最低限理解しておかなければならないものがあります。

とりあえず難しいことは抜きにして、まずはWEBサイトに使われるような簡単なタグだけは覚えておきましょう。

例えば

<h1>見出し1</h1>

文章内容

<h2>見出し2</h2>

文章内容

<h3>見出し3</h3>

文章内容

これは『hタグ』と呼ばれるもので、文章の見出しを作る際に使われるタグです。

このサイトでは

見出し2

見出し3

これらの表示が『hタグ』の役割となっています。

これがあることで、サイトの文章にメリハリが出るため、とても読みやすくなります。

<ul>

<li>りんご</li>

<li>ゴリラ</li>

<li>ラッパ</li>

<ul>

こちらは箇条書きリストのタグで、実際にこのコードを打ち込むと

  • りんご
  • ゴリラ
  • ラッパ

このような表示になります。

ちょっとしたタグを打ち込むだけでWEBサイトが読みやすくできるため、これらのタグに関しては、最初の段階で必ず覚えておきましょう。

基本的なタグに関しては、そこまで種類が多くありませんので、最初の段階で頭に入れておけばすぐに使う事ができるようになります。

タグを打ち込むとどのような表示になるのか?まずはこの動きをチェックしておきましょう。

実際にコードを書いてみる

ある程度タグの動作が理解できれば、次は実際にコードを書いていきましょう。

途中でもお話ししましたが、HTMLやプログラミング言語に関しては、とにかく知識を吐き出さなければ経験値として蓄積されていきません。

RPGゲームでも、敵の詳細や弱点を調べて満足しただけでは、全く経験値が得られませんよね?

実際に敵と対峙して戦うことによって、どんどん経験値を得て自分のレベルを上げていきます。

HTMLやプログラミングも同じです。とにかく取り入れた知識を吐き出して経験値を蓄積することによって、それがいずれ大きな必殺技を覚えるきっかけとなるのです。

HTMLのコードを書く方法としてはいくつかやり方がありますが、私の場合はプログラミング学習の無料サービスを活用し、そこでコードを学んでアウトプットしていきます。

実例を紹介すると、私は最初に無料学習サービス『ドットインストール』を使って知識を取り入れていました。

→ドットインストール公式サイト

例えばこのサイトを使って動画講義を視聴し、実際に使われているコードを頭に入れます。

そしてその後に、学んだ内容で使われていたコードを自分の手で打ち込んでみて、同じような動きをするのかどうかを見ていきます。

私のように、パソコンでMacを使っている場合、最初からパソコンに入っている

『CotEditor』

というソフトを使えば、コードを打ち込んでブラウザで表示する事が可能です。

コードを打ち込んで、実際にブラウザで確認する。

コードを打ち込んで、実際にブラウザで確認する。

これを繰り返していくことによって、動画で学んだことを即座にアウトプットしまくる事ができます。

つまり『経験値が得られている状態』を作れるという事です。

しかし、これはあくまでも雑魚キャラを倒して経験値を得ているにすぎませんから、この段階をクリアしたら、次のステップに進む必要があります。

自分が『作りて~~!』と思うサイトを見つけて真似する

これは今までの方法よりも格段に多くの経験値を得られる方法になります。

ある程度タグの動作を理解し、無料学習サービスでざっくりとした知識を得たら、実際に世の中に出ているWEBサービスを自分の手で真似して作ってみましょう。

この時の注意点としては、丸パクリしたものをネット上に公開するような悪質な行動は取らないことです。

実際にネット上にあるサイトを真似する方法として便利なのが

『開発ツール』

を使うことです。

例えばYahoo!のサイトを真似したいと思った時、右クリックで『検証』を選択すると

こんな感じでHTMLとCSSのコードがズラーっと出てきます。

これは『開発ツール』とも呼ばれており、この機能を使うとHTML・CSSを感覚的に見る事ができるため、他のサイトがどのようなコーディングをしているのかが丸分かりになります。

あなたがいつも見ているサイトであっても、検証ツールを使えば丸裸です。

どんなサイトでも、すべてこれからあなたが勉強しようとしているHTML・CSSを使って組み立てられているため、この開発ツールを使って真似をすることは飛躍的なスキルアップに繋がるのです。

  • プロがどんなコードを使っているのか?
  • 自分が知らないコードはどれくらいあるのか?
  • サイト全体はどのようなコードで組み立てられているのか?

これらを学びながら真似をしていくことで、気づいたときにはレベルの高いサイト構築ができるようになっています。

もちろん最初は分からないことだらけなので、大変です。

ですがありがたいことに、すでに世の中には正解(プロのサイト)をいくらでも真似できる環境が整っていますので、学習意欲さえあればいくらでも学習できるのです。

コーディングはRPGゲームのレベル上げの感覚で実践する

HTML・CSSの知識をたくさん持っている人はいますが、実際にコーディングができる人となると、途端に数が少なくなります。

しかも自分の手で1からサイトを作れるようなスキルを持っている人はほとんどいません。

基本的なコードさえ理解できれば誰でもサイトは作る事ができるのですが、誰もがアウトプットよりもインプットに時間を注ぎがちなので、一定ラインのレベルから伸びる事ができないのです。

そんな中、アウトプット主体のレベル上げをする事ができれば、途端にこの業界でも抜きに出る事ができます。

もちろんHTML・CSSだけなら使える人はたくさんいるので、その他のスキルも組み合わせて持つ事が前提ですが。

今の自分がどれくらいのレベルで、実際にプロが作っているウェブサイトのレベルがどれくらいなのか?まずはその違いを現実として受け止め、そこから自分がプロに近づいていくための手段として、圧倒的なアウトプットをしていきましょう。

いくら勉強してもアウトプットしなければレベルは上がらない!

どんなに良い教材を購入して、どんなに優秀な講師から教わったとしても、結局自分がアウトプット(レベル上げ)をしなければ何も変わりません。

私たち日本人は、学生時代にとにかくインプットの勉強法が正しいということを刷り込まれてきました。

しかし社会に出てみると分かる通り、実際にスキルとして使うためには圧倒的なアウトプットが必要不可欠です。

プログラミングに関しても同じです。どれだけ自分の知識を外に吐き出す事ができるか?ここで自分のスキルというのは決まってきます。

どんなに後発組であっても、インプット主体で働いている人が大半の世の中であれば、いくらでも逆転することは可能です。

事実、プログラミングを学んでも、IT土方として働いている人たちが大半を占めていますからね。

ボス(実務)は多くの経験値が得られる

そして最後になりますが、結局今までご紹介した内容というのは、自分のレベルを上げていくための手段でしかありません。

あなたがどのような目的でHTML・CSSを学ぶのかは私には分かりませんが、ほとんどの人は最終的に

『自分のスキルを使って何かしらの仕事をする』

ことを考えているはずです。

それを考えると、やはり

『ボス(実務)』

は早い段階で倒していくべきでしょう。

今まで頑張ってレベルを上げてきたのも、全てはこのボスを倒す事が目的だと言っても過言ではありません。

このボスを倒す事ができれば、今までとは比べものにならないくらいの経験値を得ることが可能です。

ちなみにHTML・CSSやプログラミング未経験であっても、すぐに現場で働ける選択肢(派遣エージェントを活用する)もあります。

どうしても自分でレベル上げをするのは大変だという場合は、プログラミングスクールの活用を考えてみるのもありです。

いずれにせよ、実務(ボス)を相手にしなければ本当の意味でのスキルは身につきませんので、なるべく早い段階で新しい環境に飛び込むことをおすすめします。

※人気記事

未経験の方にオススメのプログラミングスクール(教室)を厳選してみた!

未経験でも速攻働ける!エンジニアおすすめの派遣エージェント3選

まとめ

HTML・CSSの練習方法に関しては、今回の流れで進めていけば、かなり早い段階でスキルがアップしていることを実感できるはずです。

何度も言うようですが、一番まずいのは

『HTMLやプログラミングを勉強してしまうこと』

です。

とにかくこの業界は、どれだけのアウトプットができたかによって能力が決まってきます。

プロとして活躍している人たちの中で、アウトプット量が少ない人に私は会った事がありません。

むしろアウトプット量が少ない人たちは、いつまでも安い賃金で働かされているのが現実です。

そうならないためにも、自分が目標とするレベルまで最短で駆け抜けるために、今日から徹底的なアウトプット習慣を取り入れていきましょう。

これができると、面白いくらいスキルが上がっていきますよ♪

Pocket