HTMLについて
さて、ここからWebページ制作について紹介します。Webサイトの情報をHTMLなどで制作していくことを”コーディング”と呼びます。コーディングをしていくにあたり、まずは必要なファイルとフォルダを用意します。必要なファイルやフォルダは作りたいWebサイトによって変わりますが、基本的にはプロジェクトフォルダの中に index.html、CSSやJavaScriptを入れる「css」「JavaScript」フォルダと画像を入れる「images」フォルダ、を用意しましょう。
さてこのindex.htmlに書いていきましょう。HTMLがどういうものかについては、以下特集をご参照ください。
【関連記事】第1回：混乱しました「HTMLとCSSとはは何者なのか」①
HTMLのタグをただ羅列するだけではダメです。日本語や英語にも書式があるように、HTMLにも書き方のお作法があります。
大きな枠としてはheadとbody、footerの三つになります。手紙でいう送り状、本文、差出人みたいなものですね。
head、footerはサイト全体で共通していることも多く、本文のbody部分を変えることで各ページが作られています。
クラスとIDとは
さて実際に書いていくわけですが、基本的には上から表示されるので、上から順番に書いていきます。以下のようなタグですね。
body内では、クラスやIDを使い分けながら書き出していきます。え？クラスやIDって何かって？クラスは型番、IDは特定番号と思っておいてください。クラスは「ヒト」、IDは「田中太郎」ってイメージでしょうか。CSSなどのデザインを反映させるのにクラスやIDは必要なので、おさえておきましょう。
慣れないうちは、手書きでも構わないので、ページデザインのどの部分がどのクラスやIDに当てはまっているかを確認しながらやったほうが良いですね。（僕もそうしています）
Tech Brookのトップページは下記のように書かれています。
公開されているWebページですと、ChromeやIEのメニューからコードを見ることができます。
確認方法：メニュー>表示>開発/管理>「ソースを表示」
ご覧いただいたように、基本的にはクラス、IDを組み合わせたタグにて作っていきます。
本特集では、全体の制作の流れを紹介しておりますので、タグの紹介には触れませんが、様々な表現をするのにたくさんのタグがあります。英語で言う文法のようなものですね。それぞれの用途に応じて使い分けていくので、日々制作をしていく中で覚えていきましょう。
・・・書籍で読んで覚えるのも良いですが、実際に利用しないとすぐに忘れてしまいますからね。。。僕もよく忘れます。だからこそ、座学で学ぶのでなく、色々作って（利用して）みて覚えた方が良いとプログラミング学習では言われるんでしょうね。
htmlが記載できたらWEBサイトの情報としては十分です！次回ではCSSとJavaScriptを用いてみましょう！
コメント