HPの土台を作る

ホームページの作り方

CSSの外部ファイルの作成

ホームページはXHTML/HTMLで作られていますが、実はホームページのデザインを決めるのはXHTML/HTMLではなくCSS(スタイルシート)なのです。

基本的にはXHTML/HTMLは構造、CSS(スタイルシート)はデザインと考えていただくとわかりやすいでしょう。

家をホームページと例えるなら、XHTML/HTMLは柱、壁、床、窓、ドア、階段などの建物の構造や土台部分を意味し、CSS(スタイルシート)は壁紙の色、外壁の色、ドアの形、タイルの種類、床材の種類、窓枠の形、ドアノブの形といったデザイン部分の指定なのです。

CSS(スタイルシート)の外部ファイルの作成

CSS(スタイルシート)は、CSSファイルにより管理します。HTMLファイルへ直接CSS(スタイルシート)書き込む方法もありますが、外部ファイル化しておいた方が、ホームページの管理が簡単になるので、はじめから外部ファイル化してましょう。

ホームページ作成ソフトによっては、「CSS(スタイルシート)の新規作成」「外部CSSファイルの作成」「新規作成>CSS」のように簡単に新規CSSファイルを作成できる機能があります。

新規作成したらファイル名を指定し(半角英数字)、先ほど作成した「template.htm」と同じフォルダへ保存してください。

今回は分かりやすいように、「style」というファイル名にしましょう。すると「style.css」というファイルが保存されていると思います。

HTMLファイルとCSSファイルをつなげる

CSSファイルを外部ファイル化するためには、CSSファイルを作成するだけ使用できません。

HTMLファイルへ、適用するCSSファイルがどれかを示すコードを1行加え、HTMLファイルとCSSファイルをつなげるようにしましょう。

<link rel="stylesheet" type="text/css" href="style.css" />

「href="..."」の部分に、作成したCSSファイルのファイル名を入れることで、CSSファイルを適用することができます。

ホームページソース

<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

</body>

</html>

Valuable information

フォトウェディング 千葉

ページトップへ