プログラミングを学ぶ前に、必ずHTML・CSSの基礎を一通り勉強することになります。
もちろんHTMLやCSSを学ぶだけでも色々な仕事を受けることができますが、では初心者が最初にHTMLの基礎を学ぶ場合、何から勉強したら良いのか？
今回はその点について押さえるべきポイントを解説していきます。
そもそもHTMLって何なの？
基本的に、今ネット上に公開されている全てのサイトは、このHTMLを使って作られています。
HTMLは『マークアップ言語』と呼ばれており、その中で使われる『タグ』と呼ばれる情報をブロックのように繋いでコンピュータが理解しやすいように記述しています。
例えば今あなたが読んでいるこのサイトは、HTMLの記述で構成され、それがブラウザで読み込まれてこのような形で表示されています。
右クリックで
『ソースコードを表示する』
を選択すれば、そのサイトがどのような構成で作られているのかをみることができますので、まずは一度チェックしてみると良いでしょう。
全くの初心者がHTMLを学ぶポイントを解説！
正直文字コードだけ見ると、意味わからん文字列が並んでいてアレルギーを起こしそうですが、実際にやっていることはそこまで複雑なものではありません。
むしろシンプルなタグを使って組み立てられたのがソースコードなので、１つ１つをしっかりと理解してけば、あなたでも簡単にサイトを作ることができるのです。
では一見複雑そうにみえるHTMLをどのようにして学んでいくべきか？そのポイントは４つあります。
まずHTMLは難しくないことを知る
とりあえず勉強を始める前に、最初にHTMLに対するアレルギーを取り除く必要があります。
私が最初にHTMLに触れたときは
『こんなの覚えるの無理じゃね？』
と思っていましたが、今では自分の手でサイトをいじっています。
なのでど素人でもHTMLを使いこなすことはできるのです。
ですが最初にHTMLの学習をしようと思うと、意味わからんコードがたくさん出てきます。それを見たときに
『やっぱり自分には無理だ』
と思ってしまうと、そこから成長することが難しくなります。
複雑に考える必要はありません。
まずはこのマインド面を整えてからHTMLの勉強を開始するようにしましょう。
とりあえず『タグ』を理解する
まず簡単なタグさえ理解してしまえば、サイト内の文章をいじることには困らなくなります。
例えばこのサイトで使っている『見出しタグ』というものがあります。
見出しタグ
こちらの見出しタグというのは、このサイトでも何度も使っているものです。
これです←
これは文章の見出しを作ることができるタグになり、ただツラツラと文章を書くよりもメリハリのある記事構成にすることが可能です。
実際に見出しタグを書いてみると
<h1>見出し１</h1>
文章〜〜〜
<h2>見出し2</h2>
文章〜〜〜
このような感じで<h1></h1>というタグを使って見出しを作ることが可能です。
表のタグ
そして文章内のデータをまとめて表示したい時には、こちらの表のタグを利用します。
| 商品１ | 10円 |
| 商品2 | 50円 |
表のタグに関しては
<table border=”1″>
<tbody>
<tr>
<td>商品１</td>
<td>10円</td>
</tr>
<tr>
<td>商品2</td>
<td>50円</td>
</tr>
</tbody>
</table>
このように<table>というタグを使って表示することができます。
画像表示のタグ
文章だけのコンテンツよりも、適度に画像が配置されているようなサイトの方が飽きずに読みやすくなるため、滞在時間を伸ばすこともできます。
こちらの画像表示タグは今後頻繁に使うと思います。
実際にこのような画像を表示させる場合
<img src=”画像”>
このような<img>タグを使って表示します。ワードプレスであれば、すでにテンプレートで画像表示のタグが埋め込まれているため、わざわざタグを入力しなくても画像を入れることは可能です。
上記した３つのタグは基本的な内容ではありますが、これらを使うだけでも十分に見栄えのある記事を作ることができます。
『タグ』に関しては、これらの要素を１つずつ覚えていくだけの作業になりますので、そこまで難しくないということは理解していただけたでしょうか？
HTMLとCSSの役割を知る
『HTML』と検索してみると、必ずセットで出てくるのが『CSS』です。
そもそもこのCSSというのは、正式名称が『Cascading Style Sheet）』となっており、簡単に言ってしまえば
『表示される見た目を整える役割』
を持つものです。
HTMLだけだと、ただ文章や情報を分類するだけのサイトになってしまいますが、CSSを使うことで、スマホのレスポンシブ化やおしゃれなデザインを持ったWEBサイトを作ることが可能になるのです。
と思った場合、このCSSの編集技術があれば簡単に入れることが可能です。
そのため、HTMLを単独で学ぶのではなく、HTMLとCSSを一緒に学ぶことがこの業界では当たり前のことになるのです。
なので
と考えておきましょう。
とはいえどちらもそんなに難しいことではないので安心してください。
簡単で良いのでまずは１つサイトを作ってみる
と意気込んだ人たちが必ずやってしまうこと。
それは
『頑張って暗記して覚えようとする』
ことです。
これは学生時代に勉強ができた人ほどその傾向が強い気がします（私は勉強ができなかったのでそうなりませんでしたが笑）。
今後HTMLやCSS、プログラミングの学習をする際に覚えていただきたいことは
だということです。
例えばHTMLをガッツリ暗記して覚える人と、暗記ではなく、とにかく実践しながら覚えようとする人がいたとします。
その両者が同時に学習を進めていくと、徐々に成長スピードに差が生まれ始めます。
というのも、実際にコードを書いて手を動かしている後者の方が吸収力が高く、すぐに自分の手でサイトが作れるまでに成長するのです。
逆に暗記に頼っている人に関しては、基礎学習ばかりを繰り返しているため、実務で使えるスキルがほとんど身につかないのです。
このような差が生まれることは、私の経験や知り合いの経験からも分かりきっていますので、必ず
『アウトプットメイン』
での学習をしていきましょう。
HTMLを覚えるとこんな未来が待ってます！
今回ご紹介したような基礎的な要素でも、普通の人からしたら難しいことのように感じるため、自分の手でサイトの編集やカスタマイズをすることはできません。
しかし一度このスキルを覚えてしまえば、そのような人たちの悩みを解決することが容易になります。
実際に勉強してみると
と思えるようなことでも、このスキルを身につけるだけで未来に変化が起こります。
自分の脳みそだけで仕事が取れる
私が考えるスキルというのは、資格を取得することや会社で肩書きを持つことではなく
『自分の脳みそだけでお金が稼げること』
だと思っています。
今回お伝えしているHTMLに関しては、世の中でサイトのカスタマイズや編集に悩んでいる人が多いことからも分かる通り、自分の脳みそだけで仕事が取れるスキルとなります。
もちろんHTMLだけだとそこまで高い報酬を得ることはできませんが、それでも
を身につけていることは事実です。
そうなった時に
『自分で稼げるスキル』
を持っているのは大きな強みです。
間違いなく身につけておいて損はないものですね。
高額な業者にカスタマイズを依頼しなくてよくなる
今世の中はインターネットのインフラが整い始めているため、誰もが気軽にネットに接続できるような時代になりました。
しかしその反面、ほとんどの人たちは『消費者側』の視点でネットを使っているため、何かしらトラブルや悩みが出てきた時に、必ず業者にその悩みを解決してもらうことになります。
現に私が調べて見たところ、簡単な作業でも
『えっ？そんなにお金取るの？』
というレベルで請け負っている業者はたくさんあります。
しかしHTMLを学ぶことによって、少なくともサイトのカスタマイズや編集は自分の手でできるようになります。
そうなれば、無駄なお金を取られずにサイトをいじれるので、消費者側から
『販売者側』
の視点にシフトすることができるのです。
もしHTMLの学習を最短で駆け抜けたいのであれば『スクール』がおすすめ
今はHTMLやCSSに関する書籍もたくさん出ていますし、ネット上で無料で動画コンテンツを視聴することも可能です。
なので学習環境としては過去最高に恵まれていると思います。
しかしその反面、情報が多すぎて何から勉強したら良いのかさっぱりわからなかったり、独学で勉強していると疑問が解決できないようなことも起こります。
そうなった場合、問題解決ができずに挫折する可能性が高まりますので、できれば
『プロのエンジニア』
さんに直接指導を受けた方が効率よく学習が進められます。
無料体験で学習できるようなプログラミングスクールもたくさんありますので、最短で駆け抜けたいのであれば、まずはスクールの体験に足を運んでみてはいかがでしょうか？
→Tech Academy (無料でWEB開発までサポートあり)
まとめ
今回の内容を軽くまとめると
- HTMLを学ぶなら、まずは基本的なタグを覚える
- HTMLとCSSはセットであることを理解する
- HTMLは思っているほど難しくはない
- 独学よりもスクールに通った方が成長スピードは早い
こんな感じです。
もちろん独学がダメだという話ではありませんが、プログラミングの学習は孤独との戦いでもあるため、人に教われる環境を持っておくことで心に余裕が生まれるのも事実です（缶詰を経験した私が語ります笑）。
