HTMLとは?CSSとは?

HTMLとCSSは、ホームページを作成するときに使われます。

HTMLは 文書を構造化するための言語でマークアップ言語といいます。見出しや文章にマークを付ける、意味合いを持たせるという感じです。

CSSは、作成されたHTMLの見た目や装飾を整えるもので スタイルシート言語ともいいます。

それぞれ 作成されたファイルは HTMLファイル、CSSファイルといいます。

  • HTML・・・文書構造を定義する、骨組み・構造
  • CSS・・・見た目や装飾を整える、

HTML

「文書を構造化する」というのは あまりピンとこないかもしれません。

OfficeのWodrsで作成した文書を思い浮かべてみてください。

社内や町内会のお知らせでも構いません。誰かに見てもらうので分かりやすい構造になっているはずです。

まずファイル名があり、文書を開くと大見出しがあります。次に中見出し、文章、写真などと続きます。

HTMLもこれと同じように、大見出し、中見出し、小見出し、文章という構成を分かりやすく示すというのが基本となっています。

そのページは何のページなのか?何について書かれているのか?どういう構成になっているか?など分かるようにしなければなりません。

HTMLは コンピューター・ブラウザに分かるように記述するための言語です。

HTMLはタグを使う

HTMLでは タグというものを使って 内容を定義することができます。

例えば、

  • <head> </head>・・・サイトの基本的な情報を書く
  • <body> </body>・・・本文、サイトのメイン部分
  • <title> </title>・・・タイトル名、ページ名
  • <h1> </h1>・・・H1(エイチワン)、大見出し
  • <h2> </h2>・・・H2、中見出し
  • <p> </p>・・・ひとつのまとまった文章、段落
  • <img>・・・画像

他にもたくさんあるのですが、HTMLは このようなタグを使うということです。

HTMLファイル

HTMLファイルというのは、メモ帳でも作成することができます。

メモ帳

保存するときに 拡張子を .htmlにします。こうすることで htmlファイル=ブラウザで読み込めるファイルになります。

ブラウザで表示

ブラウザのタグに <title>タグで囲った文字が表示されています。

またh1やh2のタグで囲ったところが 太字になり、pのタグで囲ったところが段落になっていることが分かります。

htmlファイルをブラウザが読み込んで表示していることになります。ブラウザがHTML言語を解釈して 画面上に表示することをレンダリングといいます。


CSSファイル

HTMLは タグで構造化することがメインです。

色を付けたり、横幅を指定したり、装飾を行うのが CSSです。

CSSも作ろうと思えば メモ帳で作ることもできます。HTMLのように決まった書き方はあります。拡張子を .cssにして保存します。

CSSファイル作成

HTMLファイルには CSSファイルを読み込む設定を入れます。CSSを外部ファイルとして読み込みます。

外部ファイル

編集後 ブラウザを開いてみます。

編集後

このように HTMLとCSSはセットになっています。

HTMLファイルとCSS

HTMLに直接 色を指定したり 見た目を変更するような設定を行うこともできるのですが、現在は HTMLファイルとCSSファイルは役割を分けて使われるのが主流となっています。

またHTMLとCSSには バージョンがあるのですが、最新のバージョンはHTML5とCSS3になります。

ソース

ソースとは、源、水源という意味です。

HTMLやCSS、プログラミング言語など記述されたものをソースとか、ソースコードといいます。

コンピューターやプログラムというのは、このソースによって動作しています。

ソース

コンピューターやプログラムが正しく動作しない、実行されないというときは、「ソースを見直す」「ソースを修正する」とかいいます。

HTMLやCSSでは ブラウザに正しく表示されない、レイアウトが崩れているというときは ソースに問題があることがほとんどです。