ホームページを作るためのHTML・CSSファイルについて

投稿日:2017年08月19日更新日:2019年11月27日

※当サイトではアフィリエイトプログラムを利用しています。

ホームページを作っていく上で必要になってくるファイルがいくつかあるので今回紹介していきたいと思います。

画像やプログラムファイルはまた別の機会にまとめていきます。今回はホームページを表示させるために必要なファイルを紹介していきます。

ホームページファイルの種類

ホームページを最低限表示するためにはHTMLファイルが最低限必要になってきます。拡張子は.htmlまたは.htmです。最近ではほぼ.htmlが主流かと思います。

HTMLタグを用いて文章などのコンテンツの表示に必要になってくるファイルです。ざっくりまとめるとホームページを表示させる骨組みのようなファイルとイメージしていただくとよいかと思います。

次に必要になってくるファイルがCSSファイル（Cascading Style Sheets カスケーディング・スタイル・シート）です。こちらの拡張子は.cssです。

CSSは文字の大きさや行間など様々な装飾を施すための言語です。CSSはHTMLファイルにも記述することができますがCSSファイルでまとめることが可能です。先程のHTMLファイルとCSSファイルを組み合わせて使用します。

ちなみにHTMLファイルやCSSファイルはテキスト情報なので、テキストが記述できるテキストエディタなどを使用します。ホームページ制作ソフトにはテキストエディタのような機能を搭載したソフトもあります。

Windowsの場合メモ帳でも構いませんが代表的なテキストエディタはTeraPadやサクラエディタが有名です。両方とも無料で使うことができます。

では実際に各ファイルに記述をしてみたコードを紹介します。

では実際にHTMLを書いていきます。

<html>
<head>
<title>ここにタイトルが入ります</title>
</head>
<body>

ここにコンテンツが入ります。

</body>
</html>

だいぶシンプルですが上記がHTMLになります。上から順にタグの紹介していきます。

<html> などをを記述する場合は必ず終わりである </html> を記述します。headなどほぼすべてのタグに開始と終わりの記述をしなければなりません。

<title>は最低限のSEO対策にもなりますのでしっかり記述するようにしたほうが良いかと思います。

<body> から </body> に記述した内容がブラウザ上に表示されます。

次にCSSコードの書き方です

.hogehoge1 {
  color: red;
}
.hogehoge2 {
  color: blue;
}

.hogehoge1 がCSSのクラス名になります。

例えば段落、文章であることを表すタグ <p> にhogehoge1と命名します。 <p class=”hogehoge1″> ここに文字が入ります </p> と記述します。そうするとpで囲まれている文字が赤くなります。

このようなホームページ上に装飾を施す役割があるのがスタイルシートになります。今回はほんとうにざっくりとしか記述していないのでどのように書いていくかだけ理解して頂けたら幸いです。

次回からHTMLやCSSの具体的な記述方法などをご紹介していきます。

最後に、ホームページを作るにあたって大切なことは繰り返し書いてみることが大切かと思います。「コピー＆ペーストすれば良いじゃん！」と思われるかもしれませんが、それでは中に書かれているソースコードを理解することが難しいかと思います。

慣れてきて時短のためにコピー＆ペーストするのは良いかと思いますが、最初のうちは理解を深めるためにもタグを記述して覚えることをやってみてください。

そしてテストのHTMLファイルやCSSファイルをたくさん作ってください。壁にぶつかるときも出てくるかと思いますが知識の土台を作っておくと回避策などが頭のなかでひらめくかもしれません。