こんにちは。
こちらの記事はこれからHTML・CSSのお勉強を始めるズブズブの初心者です！！という方や、なんとなく習ったことはあるけれどもう一回基礎から勉強し直そうかなという方向けです。
このポイントを抑えていれば、それなりのフレームは作れるようになれるくらいになる。と筆者の思うポイントを書いていきたいと思います。
言うなれば「心構え編」です。具体的な内容を知りたい方は後日UP予定の具体的編（仮）をご覧ください。
（※この記事ではあくまでポイントの紹介になります。）
あーなるほど、自分に足りなかったのはここだったのかも。とお勉強の背中を少しでも押せることができたら幸いです。
【まずは心構えが大事。】
立派なWEBデザイナーになりたい！かっこいいプログラマーになりたい！など、目標はそれぞれかと思います。
ある程度の言語やスキルを身に付けて、とりあえずいい感じに成果物が完成できればいいんでしょ？と思ってるそこのあなた！
現場に出たら痛い目見ますよ！！
お医者さんや看護師さん・学校の先生など、どんな職業でも言えることかと思いますが、どれだけ一流のWEBデザイナーやプログラマーでも日々勉強し続けています。
年収●千万円稼ぐ凄腕敏腕エンジニアだって日々勉強してるんです。
基礎と応用を学んで、就職して、エンジニアとしてデビューできた！
そこがゴールではないのですよ。（・ω・)ノ”(・o・)エッ！
プログラミングもデザインも日々どんどん新しいことが生まれては廃れてを繰り返しています。
そんな業界で活躍し続けられるエンジニアになるためには、どんなにベテランでも勉強し続けるということはとても自然なことだと思いませんか？
【「自分で調べる」力を身につけよう】
今やどんなことでもインターネットで調べればわかる時代です。とは言っても、自分が本当に必要な情報にたどり着くには、「調べる力」が必要です。
コードを書いていて、「あれ、この画像を横並びにするのはどうしたら良いんだ…」とつまづきます。でもそのCSSプロパティの名前は知らないから、その言葉を使って調べるのはもちろん不可能ですよね。
そんな時はまず、「画像を横並びにする」っと自分がやりたいことをそのまま調べてみましょう。大体はこれでも目的の答えには近づけるかもしれないですね。ここではもう少し目的を簡略にして、そこにスペース「 」＋何を使って？の「〇〇」を追加してみましょう。
今回はCSSプロパティが知りたいので、「〇〇」＝「CSS」ですね。検索バーに入力するのは「画像横並び CSS」いかがでしょうか？必要な情報により早くたどり着けますよね。
前章でもお伝えしましたが、エンジニアというものはお勉強し続けるもの、「調べる力」が身についているかどうかで、時間短縮にもなり、より多くの勉強をできるようにもなるというわけです。
「検索方法」についてもインターネット上にたくさん情報があると思いますので、ぜひご自身で調べてみてください。
【HTML・CSSを学ぶにあたって】
では、ここからは実践的なお話に。
（具体的な内容を知りたい方は後日UP予定の具体的編（仮）をご覧ください。）
ポイント①：コードは誰が見ても分かりやすく書きましょう。
まず、これからHTML文をいやと言うほど書くであろうあなたへ言いたいこと、ソースは誰が見ても分かりやすく書いてください！！！！
多くの場合、あなたの書いたHTML文は後に第３者がメンテナンスを行います。チームPJTであるならば100％そうですよね。
０からリリースまで100％あなたが作ったWebページだったとしても、お客様からお金を受け取って納品したのであればそれはもうお客様のもの。
受け取ったお客様はリリース後そのページの内容に変更を加えたり、新しい要素を追加したり運用を行なっていきます。その時、コードがものすごく複雑で解読困難なものだとしたら…。
きっとまたあなたに依頼が来る可能性は低い…ですよね。運用のしやすさも考えて、分かりやすく簡潔なコーディングを学び始める今からでも心がけて癖をつけていくことをお勧めします。
ポイント②：パスの使い方
パスとは、htmlファイルや、cssファイル、画像などの住所を表すようなものです。「相対パス」「絶対パス」「ルート相対パス」など数種類の記法があります。
パスを制するものがプログラミングを制す！！！と言うのは言い過ぎですが、ここが理解できていな今まいると…「あれ、画像表示されないやんけ」とか「おい、リンクつながってないぞ」っと、いろんな場面で躓くこと間違い無しです。
ポイント③：idとclassの使い分け
こちらは勉強し始めは誰しも混乱するところかなと思います。
classは何回も何回も使うスタイルを、グルーピングした場所に指定することで、そのclass名を指定した場所には同じことを何度も書かなくても使えるようになりますよね。
それに対して、idはそのページに一つだけしか存在できません。そのため、アンカーリンクであったり、その要素のみに何かを指定したい時などに使います。ですのでページを跨いで使用しているような共通のスタイルシートに書かれたスタイルを、打ち消す時にも役立ちます。
このようにそれぞれの特性を活かした使い方が肝になってきます。
ポイント④：タグの親子関係
タグの親子関係を理解することは、後にJavaScriptを使うときにと〜〜〜っても重要になってきますが。もちろんHTML・CSSだけでページを構成する場面でも大事なポイントです。
どんなときに必要かと言うと、CSSプロパティでは親要素にこのプロパティをつけて子要素にはこのプロパティをつけるよ。とか言う決まりがあるわけなのです。
ですから親子関係が分かりやすいようにクラス名をつけておくとか、きちんとインデントをつけてソースを見やすく保つなどの工夫も大切です。
例えば…
<div class=“main_wrap”><!--親-->
<div class=“main”><!--子-->
<div class=“main_v”></div><!--孫-->
</div>
</div>
ポイント⑤：インライン要素・ブロック要素（タグの種類）
これは初心者泣かせと言いますか…、フレーム作りが上手くいかない原因No.1と言っても過言でないくらいに重要なポイントです。
bodyタグないで使うタグは様々なタグがありますが、とってもざっくり言うと（連続して書く場合）横並びになる「インライン要素」と縦積みになる「ブロック要素」、この二種類に分類されます。
この二つのタグの特性を理解しているのといないのでは、画面作りを行うエンジニアスキルとしてはとっても大きな差になります。本当に学び初めにはそんなものがあるんだなくらいの理解でも良いかもしれません（逆にここから始めると分からなさすぎて嫌になってしまうかも）が、ある程度組めるようになってきたなというときにこのポイントをもう一度振り返ってみると理解が深まって良いと思いますよ！
あれ〜なんかうまくいかないよ〜とお悩みの方、以上のポイントの理解を深めてもう一度チャレンジしてみてください。
きっとあなたのスキルはグググっ！っとUPしているのではないでしょうか！