XHTML/CSS・トップ | CSS実践編・目次

●HTMLファイルとCSSファイルを作ってみよう

 実際に作ったほうが、理解が早いと思いますので、作ってみましょう。HTMLファイルとCSSファイルの両方を作る体験版です。大体の要領と雰囲気をつかんでください。作ってみることが大事で、一度作ってしまえば理解度も深まり上達も早いのです。

 HTMLの作り方は下記の3パターンより選んでください。作る場所はマイドキュメントでもデスクトップ上でも構いません。そして、その場所にディレクトリ(ウィンドウズの場合、フォルダに該当します。)をひとつ用意します。この場合のディレクトリ名は付けられるものでしたら、なんでも結構です。そのディレクトリの中にCSSファイルを入れるサブディレクトリをまたひとつ作る手順で解説します。

 CSSファイルをどこの階層に置くかは作者の任意ですが、サブディレクトリに入ったCSSファイルを指定する方法で解説してみます。ここでは便宜上、CSSファイル名に"neptune"を使い、サブディレクトリ名に"Css"を使って解説しますが、本来は任意の名前を付けます。そして、それらの名前はHTMLファイルとは別のCSS専用のファイルから読み込むためのリンク要素のパス部分として使います。

※ファイル名と半角英数字、および、リンク要素(CSSファイルへの指定方法)については別ページに書かれていますので詳しく知りたい場合は併せて参照にしてください。また、拡張子については表示されていることを前提に解説しています。拡張子の表示方法については別項の「拡張子の表示と変更」をご参照ください。


1.ホームページ作成ソフトを使って、ご自身で用意する。

2.ホームページ作成ソフトなしで簡単に作ってみる。

3.ここのWebページソースを利用して作る。


1.ホームページ作成ソフトを使って、HTMLファイルを作る場合

 任意の場所に任意の名前を付けたディレクトリを作り、その中にHTMLファイルからデザイン、レイアウトなど見栄えの部分だけを取り除いた構造だけのHTMLファイルを一枚作ります。(XHTMLファイルでも構いません)ファイル名は、お好きなものを付けてください。また、HTMLファイルの拡張子は「htm」「html」どちらでも構いません。その代わり、HTMLソースの<title> 〜 </title>の下に以下のようなリンク指定としての要素を貼り付けます。この時、HTMLファイルの保存場所が先に確定していないとリンク要素のパス部分が動いてしまうことがありますのでご注意ください。

<title>ページタイトル</title>
<link rel="stylesheet" type="text/css" href="./Css/neptune.css">

※もし、位置がわからない場合は、ここのWebページを表示させ、ブラウザのメニューバーの「表示」タブをクリックし、プルダウンメニューから「ソース」または「ページソース」をクリックして表示されるHTMLソースからlink要素の位置を確認してください。

 リンク要素を貼り付けて、HTMLファイルを作り終えましたら、今度は先ほどのHTMLファイルと同じディレクトリ内に“Css”と名前を付けたディレクトリをまたひとつ作ります。(ディレクトリ名は本来任意ですがHTMLファイルからCSSファイルを指定するパスとしてすでに指定してありますのでここではCssと付けます。)

 今後はその"Css"と名前の付いたサブディレクトリ内にCSSファイルを作ります。順序は、サブディレクトリ内に新規のメモ帳を開き、当サイトの"neptune.css"ソースからCSSの書式をそのままコピーしてメモ帳に貼り付けます。ファイルの名前は「neptune」としてメモ帳の拡張子を「txt」から「css」に変更します。これで完了です。先ほど作りましたHTMLファイルを開き、スタイルが反映されていればOKとなります。メインページにCSSの書式とプロパティを解説してありますので、いろいろCSS書式の中の値を変えてデザインがどう変わるか試してみましょう。もし、CSSファイルが編集できないときは「CSSファイルのアイコンと登録について」を参照にしてください。


2.ホームページ作成ソフトなしで作る場合

 HTML(Hypertext Markup Language=ハイパーテキスト・マークアップ・ランゲージ)とはホームページ作成言語という意味があります。そして、テキストエディタであるメモ帳のテキストファイルはWebページ用のHTMLファイルを作成するのに非常に適しているのは、ご存知の方も多いと思います。さて、最初に用意した任意の名前を付けたディレクトリ内に新規のメモ帳を開きます。そして、以下のHTMLソースをコピーして貼り付けます。日本語で書かれた文字列は変更してもしなくても構いません。

<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タイトルバーに表示されるタイトル名</title>
<link rel="stylesheet" type="text/css" href="./Css/neptune.css">
</head>
<body>
<h2>見出しです。変更してなにか文字を入れてみましょう。</h2>
<p>段落です。変更して、なにか文字列を入れてみましょう。</p>
<p>段落です。変更して、なにか文字列を入れてみましょう。</p>
</body>
</html>

 コピー&ペーストが終わりましたら、上書き保存し、名前を変更します。体験版ということで、ファイルの名前は付けられるものでしたらなんでも結構です。保存しましたら次に、拡張子を「txt」から「htm」か「html」に変更します。(半角英字の小文字)

 拡張子を変更するとき、途中で警告のダイアログボックスが表示されますが、そのまま「OK」をクリックします。アイコンがHTMLファイルに変わったことを確認してからHTMLファイルを開きます。表示されている内容を確認しましたら閉じます。次に、作成したHTMLファイルと同じディレクトリ内にサブディレクトリをひとつ作ります。ただし、この場合のディレクトリ名はHTMLファイルからパスとして指定している“Css”の名前を付けます。そのディレクトリの中に、また新規でメモ帳を開きます。そして、以下のCSSの書式をコピーして貼り付けます。(CSSの書式は簡略化してあります。)

※ご注意:

 CSSの書式の左余白は半角スペース(複数可)かTabキーによる余白取りです。全角スペースがひとつでも入るとスタイルが反映されない場合がありますのでご注意ください。

body {
  background-color: #000000;
  color: #ffffff
}
* {
  font-family: "MS Pゴシック",sans-serif;
  font-weight: bold
}
h2 {
  font-size: 1.2em;
  margin-left: 3%;
  margin-right: 30%;
}
p {
  font-size: 1em;
  line-height: 1.4;
  margin-left: 5%;
  margin-right: 30%;
}

 内容につきましては、別ページの"CSSの基本的な書式"と"プロパティの解説"を参照していただくとして、あまり気にする必要はありません。あくまで体験版なのでそのまま貼り付けてください。また、最初の一行くらいのスペースがあってもなくても構いません。ただし、ファイル名は「neptune」として“Css”の名前を付けたサブディレクトリ内に保存してください。ファイル名は本来、任意なのですが、先ほど作りましたHTMLファイルでCSSファイルの名前をすでに「neptune」と指定しています。また、拡張子は「txt」から「css」に変更します。ファイル名と拡張子とピリオドを合わせると「neptune.css」となります。なお、半角英数字の小文字入力です。CSSファイルを作り終えましたら、先ほどのHTMLファイルを再度、開いてみます。スタイルが前回開いたときと変わっていれば成功です。


3.ここのWebページソースを利用して作る

 もうひとつの方法も解説しておきます。任意の場所に任意の名前を付けたディレクトリをあらかじめ、ひとつ用意しておきます。その中に新規のメモ帳を2枚用意しておきます。次にここのWebページを表示させた状態でお使いのブラウザの「表示」項目をクリックし、プルダウンメニューから「ソース」「またはページ ソース」をクリックすると、ここのWebページの「ソース」がテキストファイル形式で表示されます。すべてを選択し、コピーします。先ほどのメモ帳の1枚を開き、ペーストして保存します。体験版なので、ファイル名は任意で付けていただいて構いません。保存しましたら、「txt」の拡張子を「html」か「htm」に変更します。次にCSSファイルを作ります。先ほどの新規で作ったもう1枚のメモ帳を開き、「neptune」のサンプルソースを貼り付けて保存します。ファイル名は「neptune」で、拡張子を「css」に変更します。完了です。さて、HTMLファイルを開いてみましょう。するとどうでしょうか?今回の作り方ではスタイルが反映されていません。

 スタイルを反映させるためには、リンク要素のパス部分を変更します。具体的にはHTMLソースの<link rel="stylesheet" type="text/css" href="../Css/neptune.css">の部分を<link rel="stylesheet" type="text/css" href="./neptune.css">に変更します。(「./」は省略可)変更して保存しましたら再度、HTMLファイルを開き、スタイルが反映されていればOKです。

 パス部分を変えないで指定を有効にするには、任意のディレクトリ内にふたつのサブディレクトリを用意します。ひとつは任意の名前で構いませんがもうひとつは、"Css"の名前を付け、「neptune.css」のCSSファイルを入れます。任意の名前のサブディレクトリの中のほうにはHTMLファイルを移動させます。これで完了です。さて、HTMLファイルを開いてみましょう。スタイルが反映されていれば成功です。(このページと同じ配色でなければ成功とは言えません。)

※注意する点としては、HTMLファイルからのリンク先が存在しませんので、リンクとして移動することはできないことでしょうか。

 以上、HTMLファイルとCSSファイルを作り、リンク要素で結び付ける体験版を解説してみました。外部スタイルシートを理解するには作ってみるのが一番手っ取り早いので、体験してみましょう。また、体験が終わりましたら、ディレクトリごと削除しておいてください。

【初心者の方のためのポイント】

・要素の意味がわからない場合は、「HTMLの要素、タグ関連の用語」をご参照ください。

・CSSファイルは拡張子が「css」(ピリオドを含むと .css )になって、はじめてCSSファイルになります。

・メモ帳のテキストファイルをCSSファイルに変更するには拡張子「txt」を「css」に(ご自身で)変更しなくてはなりません。

・この体験版コーナーはマイフォルダ類(マイドキュメント・マイピクチャ・マイミュージック)かデスクトップにおいて、ディレクトリをひとつ作り、その中にHTMLファイルとCSSファイルを入れるまたは入れたディレクトリを作る手順で解説しています。従って、CSSファイルはディレクトリの中のサブディレクトリの中にあることを前提に解説しています。(CSSファイルを置く階層が違う場合の解説もありますが)ディレクトリおよびディレクトリの中のディレクトリは体験するひとがご自身で作る必要があります。また、メモ帳の拡張子「txt」からCSSファイルの拡張子「css」もやはり体験するひとがご自身で変更する必要があります。最後に、CSSファイルを入れるディレクトリ名は本来、任意で付けられますが便宜上、ここでは“Css”のディレクトリ名を使って解説していますのであらかじめ、ご了承ください。

XHTML/CSS・目次 | CSS実践編・目次

Copyright (C) 2004-2008 http://www.xml.vc/