事前学習 目次

1.事前学習ー3.HTMLとCSSのお話

HTMLとレンダリング

HTMLはHyperText Markup Languageの略でファイル拡張子が.htmlというファイルを記述する為のプログラム言語です。

この言語で作られたファイルがウェブページで、皆さんが通常インターネットで目にする様々なページです。

HTMLはプログラム言語なので、その規則にのっとって記述し、そのファイルを保存場所であるサーバー内に置いておきます。

ウェブサイトのトップページは通常index.htmlというファイル名になっています。

ウェブサイトへアクセスすると、そのURLに該当するhtmlファイルがサーバーから送られてきます。

送られてきたファイルを自分のPCのブラウザが、HTML言語の規則にのっとって、再び組み立てデザインされた形のウェブページとして私たちに見せます。これをレンダリングと言います。

ブラウザは異なる会社によって作られていますので、(前回のお話)レンダリングして写真や文字がデザインされて見える形となった際、ブラウザ間で見栄えが若干異なる事があります。

ブラウザ間によるプログラミングの指定方法が若干異なる場合もあります。

そこで、ウェブページが完成した際は、複数のブラウザでデザイン上、問題が無いかを確認する必要があります。

作成したHTMLファイル

上記のプログラムをブラウザがレンダリングしてウェブページとして表示するとこうなる

多くのブラウザで、意図したデザインレイアウトに再現してもらえるように、HTMLのプログラミングを正しく記述する必要があります。

HTMLとCSSの役割

HTMLは、最初の1行目にHMTLのバージョンが記述され、その後大きく2つの部分に分かれます。

上の部分は<head>〜</head>で囲まれるヘッドという部分と、<body>〜</body>で囲まれるボディと呼ばれる本体部分です。

ヘッドでは、ファイルで記述されている文字のコードは何なのか、ページのタイトルは何なのか、どのファイルを読み込むか、などの記述が行われます。ヘッド部分の記述は、ウェブページになった際は画面上に表示されていません。

ボディでは、デザイン・レイアウトにあたる、領域づくりの記述が行われます。透明な箱をいくつも作って、コンテンツをそこへ入れているイメージです。以下、(四角の)箱と呼びます。


ボディに書かれる中身が、実際に画面上で見える、写真や文字の組み合わされたデザイン部分になります。

ボディは、ウェブページで伝えたい写真や文字のコンテンツそのものです。それらの要素を意図どおりに伝え、並べる為に、箱=領域に入れます。そしてその箱を縦や横に並べたり、組み合わせたりして意図どおりのデザインとします。それらの箱には大きさや色などを指定できるように、それぞれ名前をつけます。

ボディの中に箱を作ったり、写真や文章に、重要さを表す見出しをつける記述を、マークアップと呼びます。HTML言語で、文章、題名、写真、リストなどに、文章の重要性や関連付けをしっかり知らせるマークアップをする事をセマンティックマークアップと呼びます。セマンティックマークアップをする事で、検索ロボットに文章を正しく理解させ、正しくインデックスをさせる事に役立ちます。

意図したレイアウトに並べたり、デザインをする為には、CSSファイルは欠かせません。

CSSは、Cascading Style Sheetsの略で、HTMLで作った要素や、名前のついた箱に、横幅や背景色、囲み線、中に入る文字の大きさや色などを指定していくプログラム言語です。拡張子は、.cssとなります。

HTMLとCSSの記述のルールは異なります。それぞれの記述の仕方を理解しましょう。

ドメインにアクセスすると、サーバーはドメインの指し示すフォルダ内のindex.htmlを探し、トップページとして返してきます。
ドメインの後ろにindex.htmlとつけなくてもトップページが表示されるのはその為です。

一方、.cssファイルのファイル名には規則はありませんが、一般的にstyle.cssというファイル名が多いです。

HTML言語の最新バージョンはHTML5でCSSの最新バージョンはCSS3です。この組み合わせで制作していきます。