Webを独学しようと思った時にまず始めにいやになるのが、新しい用語が多く、しかも英語やカタカナばかり…という事。今回はWeb制作の初心者さんの為に用語の意味をおさえながらHTMLとCSSを解説します
目次
1.「HTML」ってなに？？
1-1.簡単なHTMLファイルとブラウザでの表示
1-2.HTMLファイルの基本構成を知る
1-3.基本的なタグを知る
1「HTML」ってなに？？
HTMLとは、Webページを記述するためのマークアップ言語です。「Hyper Text Markup Language」の略です。文書の一部を「タグ」と呼ばれる特別な文字列で囲うことにより、見出しなどをわかりやすく表示したり、文字の大きさなども追加できます。
まずは簡単なHTMLファイルと、それをブラウザで確認した時の画面表示をみてみましょう。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページタイトルはここ！</title> </head> <body> ブラウザで表示される部分はここ！ </body> </html>
DOCTYPE宣言
黄緑の点線に囲われた部分をDOCTYPE宣言といいます。HTMLにも何種類かバージョンがありますが、今回はHTML5でのDOCTYPE宣言の書き方です。
html要素
DOCTYPE宣言の次の行からHTMLの内容がはじまります。「lang=”ja”」は「日本語のファイルです」という意味です。<html>〜</html>までがHTMLの範囲です。
head部分
ピンクの点線で囲われた部分はhead部分。<head>〜</head>までの範囲です。ここに文書情報を書いていきますよ、という意味です。この中の…
<meta charset=”UTF-8″>
こちらは文字コードの指定です。”UTF-8″という文字コードで書きますという宣言です。”UTF-8″の他には”Shift_JIS”などがあります。
body部分
青の点線で囲まれた部分はbody部分。<body>〜</body>の範囲です。ここが実際にブラウザ上で表示される部分です。
1-3.基本的なタグを知る
<body>〜</body>や、<title>〜</title>などを“タグ”といいます。
ここでは基本的なタグの例をあげてみます。
<title> …… 文書のタイトル
<h1>-<h6> …… 見出し
<p> …… 段落（パラグラフ）
<li> …… リストの項目
<a> …… ハイパーリンク
その他、HTML5から新たに追加されたタグもあります。
<time> ……… 日付や時刻
<video> …… 動画を再生
<audio> ……… 音声を再生
<canvas> …… 図形を描く
「CSS」ってなに？？
HTMLと一緒によくでてくるのが「CSS」。でもCSSってなに？？という方へCSSについて説明していきたいと思います。
2-1.「CSS」と「HTML」の関係
「CSS」とは、Cascading Style Sheets（カスケーディング・スタイルシート）の略で、HTMLというWeb言語の装飾部分を指定できる機能のことをいいます。「CSS」は「HTML」と併せて使います。一般的に「HTML」ファイルに基本要素を記述、「CSS」にデザインなどの装飾部分を記述します。
HTML(要素)＋CSS(装飾)でひとつのWebページを作ります。図にするとこんなイメージです。
ひとつのWebページを作るのに、ファイルをわけるとなんだか面倒だと思う人もいるかもしれません。しかしCSSを使うとたくさんのメリットがあります。
デザインの指定を全てHTMLファイルに書き込むこともできますが、それをCSSに分けておくと便利なことがあります。
編集の効率アップ
CSSにデザイン部分を記述しておくことで追々の修正作業がずいぶんと楽になります。たとえば「見出しの色を変更したい！」という時、HTMLファイルで見出しの色を指定していると、見出しの数だけ修正していかなければいけません。見出しが100個あれば、100個の修正作業が発生してしまいます。ところが、CSSで見出しの色の設定しておけば、CSSの見出しの色の指定のある1カ所だけ変更するだけで、全ての見出しの色を変更してくれます。これは便利！
デザイン性がアップ
CSSでデザインを決めることによって、HTMLだけで記述するよりも、はるかに多くのことが可能です。より多彩なWebデザインを作る時にもとても役立ちます。
読み込みの速度がアップ
HTMLの記述と、デザイン部分をわけておくことで、読み込みの速度がアップします。
データの容量も軽くなる所もいいところのひとつです。
ここまでがWebの言語の「HTML」。そして装飾部分の「CSS」の基本的な構造です。なかなか新しい言葉ばかりがでてくるので初めは億劫かもしれませんが、少しずつ慣れていってもらえればと思います。これからも少しずつステップアップしていけるような記事をアップしていきたいと思いますので参考にしてもらえるとうれしいです。