HTMLまずはこれだけ！勉強始めの方にこの1枚
最近人気も高い、「WEBデザイナー」職種。一概に「WEBデザイナー」といっても、業務内容も定義も様々ですが、今回はWEB制作業務の1つ「HTMLコーディング」についてまとめました。
初心者でも始めやすいと言われてるHTML言語ですが、あくまで他のプログラム言語に比べてわかりやすい。という意味です。
勉強し始めた頃は、なんとなく良くわからない期間が続き、ある時を境に点と点がつながって、全体像が分かるようになります。
全体像を掴むきっかけになればと、主要な要点だけをまとめたシートを作成しました。
勉強時の補助資料として、活用ください。
プログラマーやWEBデザイナー等の職種人気が高まっていて、「WEBサイトを作れるようになりたい」と新たに勉強を始める人もいると思います。
初心者向けの書籍や、解説動画なども多くあるので、始めやすさも人気の１つかもしれません。
ただ、実際に勉強を始めても挫折してしまう人も多くいます。
勉強の仕方がずれてしまっていたり、難しく捉えていたりというケースをよく見かけます。
ポイントを押さえて、自分にあった勉強法をみつけて挑んでみましょう。
WEBサイトのコーディングをするには、下記の4つのポイントを意識した勉強法がおすすめです。
タイプによって力を入れるポイントが違いますが、どのタイプの人にも共通の勉強法です。
いずれにしても作れるようになるには、手を動かす事が重要です。
「作りたい」→「調べる」→「試す」を何度も繰り返すうちに、だんだんと理解が深まり、自然と出来るようになってきます。
タイプ別のポイントは以下の通りです。
コツコツと勉強進めていくタイプの場合、順番に本を読み進めたけど、上手く形にできなくて挫折してしまうことがあります。
その場合に避けたい方法が、1つ1つじっくり読む込む勉強法。「勉強なんだから、順を追って読むのが当然でしょ！」と思うかもしれませんが、HTMLの勉強では、あまりおすすめが出来ません。
このタイプの場合は、ポイントの③【実践】と④【調査】に重点を置けると形にしやすいです。
調べるが得意なタイプなので、後からでも勝手に知識は習得できるはずです。まずはすぐに何か作ってみましょう。
行動力があって、すぐに手を動かすこのタイプ。スタートは良いのですが、長期的に見ると挫折してしまう人がいます。どんどんと作っていくので、ある程度は形になっていきます。ただ、自分が理解できた範囲だけで進めてしまうため、自己流が進み、仕事にしたときに癖が抜けずに困る場合があります。
このタイプの場合は、少し苦手かもしれないですが、ポイントの②【知識】と④【調査】を重視出来ると基礎が身に付きます。変な書き癖ができる前に、早いタイミングでルールを覚えていきましょう。
目標志向型のタイプの場合、どこまでやったら正解かがわからずに、上手くスタートが切れないまま挫折してしまうことがあります。全体像が見えると、その後はスムーズに進むので、最初のとっかかりが肝心です。
このタイプの場合は、ポイント①【前提】をしっかりと理解すると進めやすいです。ただし、勉強仕立ての頃に独学で全体像を掴むのは難しい場合が多いです。このタイプの場合は、プロ、WEBの講師、メンター等の経験者に一通り説明を受けてからスタートしましょう。一度イメージが掴めれば、そのあとはスムーズに勉強ができると思います。
WEBサイトをいち早く理解するには、まず全体像をおおまかに理解する事が重要です。ポイントとしては、以下の4つになります。
以下、ポイントについて、シートに沿って解説します。
大きな区分として、「head」の範囲と「body」の範囲になります。
コード内では、言語設定、文書の作者情報、サーチエンジン向けの設定情報、装飾を指定するスタイルシートの読み込み等、設定に関連する情報を記述します。一部、サーチエンジンでの検索やサイトタブのタイトル表示などはありますが、サイト表示に関する内容は含まれません。
表示する内容を記載していきます。タグごとに記述のルールがあり、その内容に沿って表示がされます。文章や画像など、実際にブラウザの画面上に表示される内容を指定するタグで、
タグの中に書かれたテキストや画像などがブラウザの画面上に表示されます。タグごとに記述のルールがあり、その内容に沿って表示がされます。HTMLタグは、その数を数えると100個を超えるタグが存在します。ただし、タグの使用度合は異なり、実際にサイトで使用される一般的なタグは、20～30個程に限定されます。
また、HTMLを構成は8割以上がその主要タグで構成されているため、20～30個のタグを扱えれば、ある程度HTMLのコーディングが可能です。すべてのタグを把握しきるのは大変ですが、覚えるタグを限定すれば、勉強もしやすいと思います。
タグを把握したら、タグの使いどころを把握していきます。基本的に「見出し」「段落」「リスト」などの文章構造と対になるようにタグを設定していきます。どの場所でどのタグが使用されるのか、どの範囲をグループ化するのかなどを把握していきます。他のサイトの構造を確認したり、実践を重ねて身に着けていきます。
早くコーディングを身に着けるには、何度も何度も書いて覚えていくことが大事です。
その為にも、8割の知識でも良いので、書くことに早くなれましょう。
書くことに慣れてきたら、徐々に知識を深めていきます。まずは普段使っているタグのルールや等を辞書で逆引きして確認していきましょう。
普段使うタグの知識が深まったら、他の人が書いたソースコードを見てみましょう。見慣れないタグを見つけたら、そのタグについて調べて、どんな時に使うのか、どんなルールで使うのかを確認して、知識の幅を広げていくと良いでしょう。
HTMLコーディングは、文章構造に合わせてタグを設定していく作業です。
タグには、1つ1つ重要な意味があり、文章構造に合わせたマークアップ作業はとても重要な作業です。HTMLの次にCSSを覚えて、作りたいサイトを作っていきますが、構造化されたCSSを書くためにも、適切なHTMLが書けるようになりましょう。
本シートでは、サイトの全体構造、実践で使用する主要なHTMLタグ、配置例などを１枚にまとめています。勉強時の補助資料として、活用ください。
コメントを残す