こんにちは、ユキです。
私は新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。
HTML練習したいけどやり方わからないな…。
順を追って練習していけば実力ついてくるよ。
HTML練習したいけど、練習方法がわからない方が多いかと思います。
簡単に言うと、順を追って勉強を進めれば思ったよりも早く実力をつけることができます。
基礎を繰り返し勉強することも土台作りとして大切ですが、同じところでずっと足踏みしていると全然次のステップに進めません。
今回はそんなあなたのために、HTMLの練習の仕方をステップごとに解説していきます。
スポンサーリンク
ステップ１： HTMLとは何かを知ろう
まず最初にHTMLとは何かを知りましょう。
HTMLは、「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」と呼ばれており、文書の構成や役割を言語化したものです。
Webページを作るために用いられる言語で私たちが日々目にしているWebサイトの見た目はこのマークアップ言語で作られています。
基本的に文字や画像などはHTMLで記載されており、デザインなどの部分はCSSというスタイルシート言語で記載されています。
このHTMLとCSSはほぼ必ずセットで使用することになるので覚えておきましょう。
また、厳密にはプログラミング言語とは違うので区別しておかないと他のエンジニアさんにここぞとばかりにつつかれるので気をつけましょう。
ステップ２： 環境構築をしよう
HTMLをプログラミングするには環境というものが必要です。
環境構築は人によってはつまづいてしまいますが、順序を追って構築を進めれば誰でも作ることができます。
ここではvscodeの環境構築をおすすめします。
vscode（Visual Studio Code）とは、プログラマーに最も多く使用されているテキストエディタです。
HTMLはもちろん、JavaScriptやPHPなどの言語も記述することができます。
たくさんのエンジニアがこの環境を利用しているため、より便利にコーディングをできるようにするための拡張機能が豊富に用意されています。
テキストエディタにはAtomやサクラエディタなど他にもたくさんありますが、vscodeは多人数開発をする点で強いため多くの企業で採用されています。
最初のうちはvscodeだけを利用した方が勉強もスムーズにいきます。
vscodeのセットアップは下記の記事で詳しく解説しているため参考にしてみてください。
開発環境Visual Studio Codeの始め方！構築の手順を理解してプログラミングを始めよう【Visual Studio Code編】 ステップ３： 参考書を買って基礎を勉強しよう
環境を構築したら早速コーディングに入りましょう。
初心者のうちは、Webサイトを見るよりも参考書を見ながら勉強する方が簡単です。
なぜなら、参考書は本を出版できるほど実力があるベテランエンジニアが体系的に解説しているためほとんど間違いもないし、初心者にわかりやすく解説しているからです。
Webサイトだと不特定多数のエンジニアが解説しているため、解説の真偽がわかりません。さらに、最初のうちは自分の調べたい情報をすぐに検索することができないため基礎をしっかり固めてから使うようにしましょう。
ここでは、おすすめの参考書を紹介します。
WebクリエイターのManaがWebサイト制作の定番＆旬のスキルを解説した「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」という本です。
知識ゼロから体系的にHTMLとCSSの基本を学ぶことができます。
最新の技術に対応していて、レスポンシブ、Flexbox、CSSグリッドなどの技術を手を動かしながら覚えていきます。
必要なことをすべて学ぶことができる一冊です。
 |
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 新品価格 |
ステップ４： Udemyを使用してベテランエンジニア講師から教わろう
参考書でHTMLの基本を固めたらベテラン講師陣のビデオ講座で学習しましょう。
私が学習を完了した講座で「ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！」というものがあります。
これはHTML/CSS, JavaScriptの学習を通してWeb開発をしてく講座になります。
基礎から実際のプログラミングの仕方まで一貫して解説しているため基礎からHTMLを学びたい人やこれからWeb開発を仕事にする人におすすめの講座となります。
Udemyでは現役のベテランエンジニアが初心者目線でわかりやすい構成の講座を数多く作成しています。
一つ一つの講座は有料のものが多いですが、タイムセールをしょっちゅう開催しているためタイムセール時に安くなった講座を買うようにしましょう。
無料の講座もあるので最初のうちは無料講座だけ学習しておくという方法もいいと思います。
会員登録も無料なのでログインしてどんな講座があるか確認しましょう。
ステップ５： ブラウザの開発者ツールで有名サイトのコードを見てみよう
ビデオ講座を学習し終わり、自身でWebサイトを開発できるようになったら既存のWebサイトのコードを見てみましょう。
有名サイトのコードはスムーズなローディングを心がけているものが多いため、余計なコードを書いていません。
さらに、自分の知らない機能を実装できるようにするためにも他人が書いたコードを見てみるということはとても重要なことです。
このコードを閲覧するにはブラウザの開発者ツールというもの使用します。
下記のキーを押すことによって開くことができます。
- Windows・・・F12
- Mac・・・command + option + i
開発者ツールを開いたらElementsタブを開いてみましょう。ここにHTMLのコードが書いています。
また、マウスカーソルをブロックの上に乗せるとそのブロックがページのどの部分で使われているかも確認できるので参考にする場合は利用してみてください。
まとめ
今回はHTMLの勉強の仕方をステップごとに解説していきました。
HTMLは、Web系のエンジニアにとって必ず理解していなければならないものです。
これからエンジニアを目指すという方は、勉強を怠らずに日々努力していきましょう。
スポンサーリンク
