タイトルイメージ

HTML&CSSについて 2014.11.19

HTML&CSS

はじめに

基本の基本ということで、そもそもHTMLとCSSって何なの？

というところから整理していきたいと思います。
HTML&CSSをはじめて学習する人を想定して書いてみました。

INDEX

  1. HTMLとは
  2. CSSとは

1.HTMLとは

HTMLの歴史

HTMLは、1992年に策定がスタートし、1995年に公式仕様としてHTML2.0が公表されました。
文書を電子化するための書式SGMLを簡素化することを目的として誕生しました。
それがインターネットの普及と共に、段階を得て変化し今はHTML5.0が最新となっています。（2014年10月28日に勧告）
簡単な年表を作ってみました。

1989 HTMLの誕生
1993 HTML1.0
1995 HTML2.0
～ HTML3.0（廃案）
1997 HTML2.X
（国際化に対応）		 HTML3.2
（独自拡張の取り込み）
HTML4.0
（HTML本来の役割に則した形へ整理）
1999 HTML4.01
（HTML4.0を改訂）
2000 XHTML1.0
（XMLで再定義）
2001 XHTML Basic
（XHTML1.1モジュール化）
XHTML2.0
（廃案）
2010 HTML5
（次世代のHTMLに求められる
機能の取り込み）
2014 HTML5（勧告）

HTMLはHyper Text Markup Languege の頭文字を取った略称です。

名前の中にマークアップランゲージという言葉があるようにマークアップ言語とも呼ばれています。
（マークアップとは「印をつける」という意味です。）
また、ハイパーテキストというのは、
文書の中に他の文書へのリンクを埋め込み、複数の文書を相互に関連付けるしくみ（ハイパーリンク）
を指しています。

このハイパーテキストという概念は1960年代にアメリカで考案され、1989年にティム・バーナーズ＝リーという人がWWW（ワールドワイドウェブ）を開発する際に取り入れました。
それによって現在は当たり前となったWebページの基本形が出来上がったのです。

HTMLは年表にもあるように紆余曲折を経ながら、常に進化し続けています。

私がHTMLを知ったのはつい最近のことで、HTML5がすでに草案という形で世に登場した後でした。
しかし、勉強したのはほとんどHTML4.01の内容です。今でも十分その知識は通用します。

つまり、HTMLは進化し続けているものの、基本となる部分は変わっていません。（中には全く使えなくなってしまったものもありますが）
時代の変化に合わせて、HTML本来の役割に次々と追加されていったという感じですね。
だから、どの入門書もいきなりHTML5の話から始まったりすることはあまりありません。
HTMLの基本的なことから始まり、その後でHTML5の内容へ入っていくというのが基本的な流れであると思います。

HTMLの記述方法

さて、HTMLの記述方法をざっくりと見ていきます。

HTMLは、すべて「要素」という単位で構成されています。

各要素の始まりと終わりは<○○>～</○○>というタグで示されます。
（始まりは開始タグ、終わりは終了タグと呼びます）

まずHTMLを記述するには、すべてを包括するhtml要素を作ります。
上のように<html>～</html>のタグで囲むだけです。
さらにその中へhead要素とbody要素を組み込みます。

head要素、body要素にはそれぞれ役割があります。

head要素には、html文書の基本情報（meta要素）や文書のタイトル（title要素）など、主に文書に関係する情報の要素を記述します。

body要素には、html文書の内容（見出しや文章、画像）など、実際にブラウザに表示される要素を記述します。

head要素に記述された要素は直接的にブラウザ上に表示されることはありません。
だから上の「head要素の内容が入る」という文章はブラウザ上では確認できません。
一方、body要素内の記述は、「body要素の内容が入る」と、ダイレクトにブラウザ上に表示されます。

ちょっと文章だけではわかりづらいので、具体例を出しましょう。(見やすくするためにわざと改行を入れています)

上のように記述した場合、ブラウザ上にはこのように表示されます。

前述したように、head要素に書かれた内容は表示されていないのがわかりますか？
ただ、title要素の内容である「HTMLの記述方法」はページのタイトルとして、ブラウザのタブ部分に表示されているはずです。
また、ブラウザ上に表示されているのはbody要素の中に書かれたh1~h4要素とp要素です。

hから始まる各要素は文章の見出しを示す要素です。（h1~h6要素まであります）
数字が大きくなるにつれて文字の大きさが小さくなるように（ブラウザが判断して）表示しています。

p要素は段落を示す要素です。
さらに、h1要素の中に、文字を小さくするsmall要素が書かれています。

以上のように、HTMLはhtml要素の中に入れ子のようにいくつもの要素が入るようにして記述します。
この入れ子という概念を理解すれば、記述方法はわりとすんなりと覚えることができると思います。
後は各要素が示す役割を覚えれば、HTMLはほぼ完ぺきです。

ただし、要素の数はけっこうあります。

しかしながら、良く使う要素を優先的に覚えることで、巷でよくみられるWebページは作ることができます。
ほとんどのブラウザでctrl+U（Macだと「Command」＋「Option」＋「U」？）でソースコードを見ることができるので、それを見ながら良く出てくるタグ（要素）をチェックしてみるといいかもしれません。

ここでは、ページの都合上、基本の基本の記述方法しか扱っていません。（後述のCSSも同様です）
もし興味があるのなら、「HTML」で検索するとたくさんの解説サイトが出てきます。(参考)
また本などを参考に、サンプルWebサイトを一つ作ってみると理解が一層深まると思います。
このCreator Indexでも少しずつ扱っていく予定です。

2.CSSとは

 HTMLとCSS

これまでHTMLについて説明をしてきましたが、見ての通り、私たちがいつも見ているWebページとは程遠いものが出来上がります。
HTMLだけではデザインレイアウトをすることは困難なのです。
そこで登場するのがCSSです。

CSSはCascading Style Sheets（カスケーディングスタイルシート）の略称です。
聞いただけでは何のことやら、と言った感じですが、使い方は簡単です。

HTMLが文章構造を指し示すものなら、CSSは視覚表現をコントロールするものです。

このようにHTMLとCSSの役割を分けて使われるようになったのは、2005年頃からと言われています。
それまでは、HTMLのtable要素を使ってデザインレイアウトをしていました。（テーブルレイアウトと言います）
しかし、table要素は文章構造の中で表を取り入れる時に使われるべき要素だったので、本来の役割とは違う目的で使われていたのです。
それではHTML自体が持つマークアップするという役割も果たせなくなってしまうため、見直しが行われて現在のような文章構造と視覚表現を完全に分けて使われるようになりました。

そのため、HTMLで文字の大きさを変えたり、配置を変えたりすることはタブーです。

例えば、h1~h6要素は文字の大きさがそれぞれ違いますが、小さくしたいからといって、大見出しにh6要素を使うという使い方は間違いです。
大見出しにはh1要素を使い、大きさはCSSで変更するという使い方が正しいのです。

文章構造を忠実に守りながらマークアップし、デザインやレイアウトをCSSでする、これがWeb標準のWebサイトの作り方です。

CSSの記述方法とその場所

やはり文章では伝わらないので、CSSの記述方法を具体例を添えて紹介します。
先ほどのHTMLの記述例を少し装飾してみます。

が、その前にCSSをどこに記述するのか、について話しておきます。

CSSの記述場所は3パターンあります。
それは、

  1. インライン
  2. エンベッド
  3. リンク

です。

まず1.インラインは、HTMLの要素タグの中に、style属性としてCSSを記述する方法です。

HTMLの要素タグには、各要素の持つ役割に加えて、様々な属性(name,id,class…）付けることができます。
（ちなみに付加する属性の数に制限はありません）
その属性の一つにstyle属性があるので、これを利用してCSSを記述します。

上のように記述した場合、表示結果は以下のようになります。

インライン

つまり、color: red; とは文字を赤にするという意味ですね。

続いて、2.エンベッドは、head要素の中に記述する方法です。

上の場合、表示結果はこうなります。

エンベッド

先ほどのインラインと同じ記述なので、文字は赤になりました。

最後は3.リンクです。

これは、HTMLファイルの中に記述せず、外部ファイルにCSSを記述する方法です。

この場合、head要素の中にlink要素を組み込み、さらにhref属性とrel属性を付加してリンク先のCSSファイルの場所と種類を指定します。
以下に例を示します。

上のような記述の場合、このHTMLファイルには style.css という外部スタイルシートが関連していることを示しています。
（ここでは、HTMLのlink要素、href,rel属性については割愛します詳しくはこちら）

しかし、このままではブラウザ上の表示は下のように、何も適用されていないのと同じです。

リンク

関連付けたstyle.cssのファイルに次のように記述します。

記述内容はエンベッドの時と同じです。
すると、表示は下のように変化します。

リンク

以上のように、リンクはhead要素内のlink要素でひも付けされたファイルに書かれたCSSの記述を反映する方法です。

これまで３つの方法を紹介しましたが、

一般的に使用される方法は、３番目のリンクです。

その理由は色々あるのですが、一番の理由はCSSを外部ファイル化することで、一つのCSSを複数のHTMLに適用させることができるため、メンテナンス性が高まることです。
単一のWebページなら、インラインやエンベッドでも、それほど手間はかかりませんが、複数のページとなるとすべてのCSSを変更しないといけないのでかなり大変な作業となってしまいます。
また、リンクの方法の場合、複数のCSSを一つのページに適用することも可能です。

さて、ここまで記述場所を見てきました。
続いてはいよいよ記述方法です。

これまでのサンプルを見てもらえるとわかると思いますが、CSSの記述はとてもシンプルです。

まず、CSSを適用したいhtml要素を指定します。
ここでは h1要素 を指定したいため、 h1 と書きます。

続いて、変更したい部分を指定します。
ここでは テキストカラー を変えたいため color　と書きます。

さらに、どのように変更するかを指定します。
ここでは、 赤色 にしたいため red と書きます。
h1の部分を「セレクタ」、colorの部分を「プロパティ」、redの部分を「値」と呼びます。

数学の公式のようにまとめると以下のようになります。

セレクタ　｛　プロパティ：　値；　｝

セレクタにはh1要素、p要素、body要素といった要素名はもちろん、class,id属性でつけたclass名やid名を使うことができます。
その場合、classなら、「 .class名 」、idなら「 #id名 」と省略記号を使って表します。

その他にも、セレクタの種類はたくさん用意されています。（参考）

はじめのうちはすべて使いこなすのは難しいです。
ただ、よく使うclassセレクタ、idセレクタ、疑似クラスセレクタの:hoverだけ使えるようになれば、そのほかのセレクタは使わなくてもほぼ思い通りの指定ができるようになります。

プロパティにも、多くの種類が用意されています。（参考）

何もわからないうちはありすぎて困るくらいですが、これもよく使うものが決まっています。
特にテキスト関連（font）や背景関連(background)、あとはレイアウト関連(margin,padding,position)はよく使いますね。

値には共通で入るものもありますし、固有のものもあります。
先ほどの color では red と色の単語を入れましたが、一般的には頭に # をつけた16進数で指定します。（red なら #ff0000）
また、数値の単位も pt,cm といった絶対単位や、 px,%,em, といった相対単位など様々な種類があります。
ただし、これも通常は px,em,% だけで十分やっていけると思います。（emだけちょっと慣れが必要かと。参考）

HTML&CSSついては、以上で終わりです。

HTMLとCSSは書き方がわかってからがスタートです。
英語の勉強のように、基本文法がわかれば、後は知ってる単語を増やすだけです。
HTMLの場合は要素タグ、CSSの場合はプロパティの知識を増やしていけばいいわけです。
私もまだまだ知らないことがたくさんあるので、これからも知識を増やしていきます。
それと、もう少しわかりやすく書けるよう努力します！

Thanks for reading to the end!!

コメントを残す

メールアドレスが公開されることはありません。コメントのみの投稿も可能です。

TOPページへ戻る

About

Creator Indexは、Webクリエーター初心者に役立つブログを目指しています。
執筆者自身が日々学んだ内容をアップしていきます。

Author

筆者イメージ

Jun

サイトリニューアルを計画中…