|
初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう VOL3. スタイル設定の書式 その1★外部ファイルを作成する
６．外部ファイルの保存と読込み スタイルシートの基本的な書式は前章まででご紹介した通りです。要は特定の要素に対し、必要な「プロパティ: 値;」を指定してゆくだけのことですが、具体的にはこの後の章で順にお教えしてゆきましょう。このページでは、CSS外部ファイルは何に、どうやって書いて保存すれば良いのかと、HTMLからの読込み方についてお話します。
ⅰ)外部ファイルの保存 CSS外部ファイルと言っても、特に専用のソフトが必要になるわけではありません。Windowsをお使いならオマケで付いている「メモ帳」で十分です。これに、これまでお話したような書式で内容を記述し、ファイル名に拡張子「.css」を付けて保存して下さい。「メモ帳」でなくても、お手持ちのテキストエディタがあればそれで書くことが出来ます。(※テキストエディタについては、Column6.「テキストエディタで作ってみよう」を、ご参照下さい。) では、まず「メモ帳」を起動してCSSファイルを作成しましょう。必要な要素に対して設定が終了したら、「ファイル」→「名前を付けて保存」の順にクリックします。ファイル名は任意で構いませんが、必ず「.css」という拡張子を付けるのを忘れないこと。これを付けないまま「保存」ボタンを押してしまうと、そのファイルは自動的に「.txt」という拡張子の付いたテキストファイルとして保存されてしまい、HTMLから呼び出そうとしても機能しないので注意して下さい。その下の項目についてはそのままで構いません。
保存したファイルを開きたい時は、メモ帳を起動して「ファイル」→「開く」の順にクリック。「ファイルの種類」は最初必ず「テキスト文書」になってますので、この時ファイルリストに表示されるのは拡張子「.txt」の付いたテキストファイルのみです。拡張子「.css」で保存したファイルは出てきませんから、「ファイルの種類」の横の小さい下矢印をクリックして「すべてのファイル」を選択し、そのフォルダに保存されているテキスト以外のファイルも全て表示されるようにしましょう。こうすればメモ帳でCSSファイルを開くことができます。また、こうして開いたファイルの内容を変更して再保存する場合は、「ファイル」→「上書き保存」の順にクリックして下さい。
CSSファイルを開こうとする時、メモ帳を起動した上でその画面から開くのではなく、例えば「最近使ったファイル」のリストから直接「.css」という拡張子を持つファイルを開いたりすると、HP作成ソフトなどメモ帳以外のソフトが自動的に起動してファイルを表示してしまうことがあります。新しい作成ソフトなど、CSSに完全対応しているソフトならその画面で編集、保存、画面の確認が出来る場合もありますが、作成ソフトによってはCSSへの対応が不完全で、内容を正しく保存できなかったり、画面がプログラム通りに動作しなかったりすることがあります。こういう場合は、必ずメモ帳を起動して、そこからファイルを開くようにしましょう。 また、CSSを読込んだHTMLファイルが意図した通りに動作しない時は、以下のような原因が考えられますのでチェックして下さい。 １．保存する時に拡張子「.css」の付け忘れをしている ２．プロパティや値などのスペルを間違って綴っている ３．お使いのブラウザが特定のプロパティに対応していない
ⅱ)外部ファイルの読込み 保存したCSS外部ファイルをHTML上から読込むには<head>～</head>の間に以下のように記述して下さい。 <link rel="stylesheet" href="外部ファイル名.css" type="text/css">
rel="stylesheet"は、このリンク先がスタイルシートであることを示し、 href="xxxxx.css"は、呼び出すCSSファイルの名前を指定(拡張子は必ず「.css」) type="text/css"は、スタイルシートのタイプを示します。 一般に、この書式のままで外部ファイル名のみ書換えれば指定したファイルが動作するようになると思いますが、読込むページと同じフォルダにCSSファイルがない場合は、読込むページから見たCSSファイルの相対URL（相対パス）をファイル名の前に書き加える必要があります。（「相対パス」について詳しくは「Column 1. 「相対パス」と「絶対パス」を参照して下さい。） ex. <link rel="stylesheet" href="../../homepageschool.css" type="text/css">
|
2007.7.9.
