HTMLとCSSをザックリ解説してみる
HTML(HyperText Markup Language)とCSS(Cascading Style Sheets)について勉強したので、復習がてらのアウトプットとしてザックリとした解説をしてみます。
WEBサイトとはHTMLファイルの集まりである
私たちがなにげなくインターネットと呼んでいるもの。
ブラウザ（IEとかchromeとかsafariなど）や、スマートフォンならアプリを介して見ているWEBサイトの実体はすべてHTMLファイルです。
HTMLファイルとは例えばindex.htmlというhtmlという拡張子のついたファイルです。
HTMLファイル１つがWEBサイトの１ページ（すなわちＷＥＢページ）のに対応しています。
HTMLファイルは通常サーバーに配置されています。
サーバーに置かれているHTMLファイルをクライアント（PCやスマートフォン）からブラウザなどを使ってダウンロードし、当該HTMLファイルに記述されたページ表示します。
以上がブラウザでWEBページが表示される仕組みですが、PHPというサーバ側で実行されるプログラムを利用することによってWEBページの表示を行っているWEBサイトも存在します。
それは例えばWordPressで構築されたWEBサイトです。
PHPを利用したWEBサイトの場合、ブラウザがサーバにアクセスするまではHTMLファイルを持たず、アクセスされた時点でPHPプログラムが実行されてHTMLファイルが生成されます。
この仕組みにより動的なWEBサイトの構築が可能になります。
ただしこの方式はプログラムの実行を伴うのでサーバの負荷が上がりがちです。
HTMLは構造、CSSは見栄えを担当する
HTMLファイル単体でもWEBページの表示は可能ですが、ページの見栄え（文字などの装飾や各要素のレイアウト）に関してはCSSファイルという別ファイルに記述するのが普通です。※一応HTMLファイルに見栄えに関することを書くこともできます。
CSSファイルはHTMLファイルから読み込むことによって利用します。※C言語的にいうならばインクルードファイルのような使い方です。
HTMLはタグで記述する
HTMLファイルの中身はタグと呼ばれる<>で囲まれた要素を積み重ねるように記述します。
例えば基本的なタグには以下のようなものがあります。
- titleタグ：ページのタイトルを記述します
- hx（xは1～6）タグ：記事の見出しを記述します
- divタグ：ＷＥＢページの区画を区切ります
- pタグ：段落を表します
CSSはセレクタと属性で記述する
CSSファイルはセレクタと属性とで記述します。
セレクタはHTMLファイルに書かれているタグやクラスなどの要素を指定することで、そのタグ等に対して直後に記述した属性の設定が影響することを表します。
属性はセレクタの直後に記述し、セレクタで指定した要素の装飾やレイアウトを指定します。
WEBページのレイアウトはCSSで行うのが主流
HTMLに書いた内容は基本的に縦に並んでいきますが、これをいくつかの要素に分けて横に回り込ませたりして配置したい場合はCSSファイルでの指定を行うのが主流です。
まずHTMLファイルをいくつかの要素に分けてきます。タグにidやクラスを指定したり、divタグで区切ることによって実現します。
次にCSSファイルで分割した要素の並べ替えを行います。float属性などを使います。
参考文献
今回、私がHTMLとCSSを勉強した本がコチラ。
HTMLとCSSについては第２章の数十ページだけですが、要点がまとまっていてわかりやすいです。
プログラミング経験のある人がHTMLとCSSを学ぶのにオススメです。
[amazonjs asin=”4798042161″ locale=”JP” title=”わかりやすいJavaEEウェブシステム入門”]