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

●CSSファイルへの指定方法(リンク要素)

 CSSファイルを作るのはそんなに難しいことではありません。あまり凝ったものでなければ誰でも作れます。しかし、HTMLファイルとCSSファイルを結び付けるリンク要素の相対パス部分はわかりにくいと思います。その相対パスについて解説してありますので、しっかり把握しましょう。(URL指定もありますが)

※スタイルシートがサポートされているホームページ作成ソフトのツールを使って、CSSファイルのリンク指定ができる場合はそれで構いません。(相対パスに通じておくと、いろんな場面で自由に使えて重宝することがあります。)

 CSSファイルをHTMLファイルと結びつけるリンク要素は、HTMLソースの<head>〜</head>間の任意の場所に配置することになっていますが、通常は<title>〜</title>の下に配置します。

【HTML】

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

【XHTML】

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

※以下はHTML環境で解説しています。XHTMLの場合は 〜css" />と最後に半角スペースとスラッシュが入ります。

 <title>は本文のタイトルではなく、ブラウザでタイトルバーに表示されるページタイトルのことです。また、"rel"、"href"、"type"は属性名なので順序は問いません。すなわち、

<link href="〜/Css/neptune.css" rel="stylesheet" type="text/css" />

としても間違いではありませんが、変更するところは右端にあったほうが確認しやすいのと編集しやすいので、筆者は最初の指定方法を使っています。href 属性( href="〜.css")はCSSファイル名が異なるとき、ディレクトリ階層が異なるときに変化します。

 ディレクトリ名とファイル名はどちらも半角英数字で、作者が任意の名前を付けます。最後のピリオドに続く、"css"は拡張子ですから、これは任意で付けられません。また、href 属性以外はすべて同じですから、逆に言うと、href 属性の相対パスさえ理解できればリンク要素は自在に指定できるようになります。

※ディレクトリはウィンドウズの場合、フォルダに該当します。

 リンクの指定方法としては"http://〜"で始まるURLの指定方法がありますが、自分のサイト内からほかのサイトにリンクするときなどに用いられるのが一般的です。また、絶対パスの指定方法もありますが、ここでは現在のディレクトリから目的のCSSファイルを指定する相対パスの方法で解説します。相対パスは、ホームページ作成ソフトを使っているとき、自分のパソコン内に架空のサイトを作っている関係で相対パスのほうが都合良いからです。

 それから、複数のCSSファイルがある場合は、同じディレクトリ内にCSSファイルを保存するとメンテナンスしやすいかと思いますので、ここではそれに沿った解説をします。

<link rel="stylesheet" type="text/css" href="〜/○○○/△△△.css">と記述します。△△△はCSSのファイル名で、○○○はCSSファイルを入れるディレクトリ名です。どちらも半角英数字で任意の名前を付けます。ただ、△や○のままだとわかりにくいと思いますので、筆者のサイト環境でのファイル名とディレクトリ名で解説します。ファイル名は"neptune"を使い、CSSファイルを入れるディレクトリ名は"Css"を使います。

 指定するファイルが上の階層にあるときは、階層の分だけ「../」を追加すればOKですが、指定するファイルが下の階層にあるときは、ひとつ階層が下がるたびにディレクトリ名を追加しなければなりません。スラッシュ(/)で囲まれた名前がディレクトリ名となります。スラッシュの前にあるのはドット、またはピリオドと言われる点のことで、二つ続いていることに注意してください。

■階層ごとのリンク要素

・指定するCSSファイルが同じ階層にあるとき

<link rel="stylesheet" type="text/css" href="./neptune.css">(「./」とピリオドがひとつの場合は省略可)

・一つ下の階層のCSSファイルを指定する場合

<link rel="stylesheet" type="text/css" href="./Css/neptune.css">(「./」は省略可)

・一つ上の階層にあるCSSファイルを指定する場合

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

・二つ上の階層にあるCSSファイルを指定する場合

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

・三つ上の階層にあるCSSファイルを指定する場合

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

■まとめ

 外部スタイルシートとしてのCSSファイルをサブディレクトリ内に収めている場合のリンク指定は上記のケースで大抵対応できます。

 注意事項としては、リンク要素を指定する前にHTMLファイルを一度、名前を付けて保存することです。先にリンク要素を貼り付けると、保存するときにリンク要素の中のパス(href 属性の属性値)が微妙に変わってしまうことがあります。これは、ホームページ作成ソフトのツールを使って、CSSファイルを取り込むときにでも同じ現象が起こります。

 デザイン、レイアウトが反映されない場合は、パスが変化していないか確認します。「../../」の部分が変わっていないか?必要なディレクトリ名が抜けていないか?リンク指定が間違っていない場合は、CSSファイルの内容に記載ミスの可能性が考えられます。ピリオドひとつが余分に入っていただけでも、スタイルが反映されないことがあります。

 そのほかの方法としては、CSSファイルを複数指定する方法があります。自分の好みで工夫してみると良いでしょう。複数指定した場合、後から(下の方)の指定が優先されます。

<head>
 〜
<title>リンク要素複数指定のサンプル</title>
<link rel="stylesheet" type="text/css" href="./△△△.css">
<link rel="stylesheet" type="text/css" href="./○○○.css">
<link rel="stylesheet" type="text/css" href="./□□□.css">
</head>

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

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