XHTML/CSS・トップ | CSS基礎知識・目次

●CSSソースの見方

 ここでは訪れたサイト(またはWebページ)の外部スタイルシートであるCSSファイルを拝見する方法の解説が中心です。CSSソースがHTMLファイルの<head>〜</head>の間にstyle要素として記載されている場合はHTMLソースから直接見ることができます。

 同じCSSのプロパティがCSSファイルとHTMLファイルの両方に記載されている場合はHTMLファイルに記載されているCSSの書式が優先されます。また、同じCSSファイル内、HTMLファイル内のCSSソースにおいても後から指定したほうが優先的に反映されます。後からというのは具体的にはCSSソースの下の方のことです。

 CSSソースはスタイルシートを作った作者が一番理解しているもの。訪れた人にはわかり辛いものですが、参考になることもありますので解説しておきます。

 まず、訪れたWebページにおいて、Webブラウザの「表示」タブをクリックし、プルダウンメニューから「ソース」または、「ページ ソース」の項目を選択し、HTMLソースを表示させます。そして、HTMLソースからCSSファイルへ指定しているリンク要素を見つけます。リンク要素は<head>〜</head>間にあり、<link rel="stylesheet" type="text/css" href="〜〜.css">と通常は記載されています。〜〜.cssの部分だけを抜き出し、./や../などは除き、コピーします。例えば、ここのWebページのリンク要素は<link rel="stylesheet" type="text/css" href="../Css/neptune.css">ですが、Css/neptune.cssの部分をコピーします。コピーしましたら、WebページのURL情報(http://www.xml.vc/kiso/css-sauce-milu.html)の右から数えてひとつ分のディレクトリ名を削除し、それより右側以下も削除して、先ほどのCss/neptune.cssを貼り付けてOKです。URLはhttp://www.xml.vc/Css/neptune.cssとなります。

 補足しますとディレクトリとはスラッシュ(/)で囲まれた部分のことです。(ディレクトリとはウィンドウズの場合、フォルダに該当します。)ひとつ分の根拠は(../)からきており、(../)がひとつ分のディレクトリに該当します。つまり、ディレクトリ名は書かれていませんが、(../)とはひとつ分のディレクトリを通過している意味です。もし、"../../"なら二つ分のディレクトリを通過していることなりますので、二つ分のディレクトリをURL情報から削除します。

 先ほどのURLにアクセスすると"neptune.css"のCSSファイルのソースが表示されます。以前は「ファイルのダウンロード」というダイアログボックスが表示されたのですが、今はそのままテキスト形式で表示されます。(ブラウザによっては、作者がソースを整形(改行)していても整形されないで表示されるケースがあります。)

 フレーム機能でWebページを幾つかの区画に分割しているページの場合は、Webブラウザの「表示」タブからソースを見るのではなく、目的の区画上で右クリックし、ショートカットメニューから、「ソースの表示」(または"ページ ソースを表示")の項目を選択すると、HTMLソースが表示されます。そこからリンク要素を見つけてください。幾つかの区画に分割しているフレーム設定のページの場合は区画ごとに指定しているCSSファイルが違う場合があります。

 そのほかとして、Webページの外部スタイルシートであるCSSファイルをダウンロードする方法もあります。適当な場所にフォルダを用意しておき、Webブラウザの「ファイル」から「名前を付けて保存」を選択すると、「Webページの保存」ダイアログボックスが表示されますので、保存するファイル形式として、‘Webページ、完全(*htm:*html)’を選択して「保存」ボタンをクリックするとHTTPでダウンロードされます。その中に、「files」フォルダがあり、その中に、CSSファイルが同時にダウンロードされています。必ずしも作者のレイアウト通りに表示されるとは限りませんが、ご興味ある方は関連ページをご参考にダウンロードしてみてください。

 また、リンク要素ではなく、そのほかでCSSファイルを指定しているケースもあります。<style type="text/css" media="screen">@import url(△△△.css )</style>と media属性と@importを組み合わせた方法もあります。

<style type="text/css">
<!--
 @import url(△△△.css);
-->
</style>

 こちらも、@importルールを使って、CSSファイルを指定しています。これらの解説は割愛させていただくとして、基本的にはリンク要素と同じ様にCSSのスタイルシートを指定しています。そこに書かれているCSSファイル名(パス含む)からCSSファイルを見ることができます。どんな方法であれ、ポイントとなるのはCSSファイル名とディレクトリ名、および、URL情報です。

 訪れたサイトのCSSファイルを拝見するとソース内容の記述が非常に長い場合がありますがひるんではいけません。よくよく見るとクラスセレクタ、IDセレクタ(クラス名、ID名)を多用しているケースがほとんどです。それだけ意図したページ作りが簡単には作れない、難しいのだとも言えますが、クラスセレクタ(&IDセレクタ)を除けば意外とシンプルなソース内容です。デザイン的に優れたサイトのCSSソースを見ることはスタイルシートを学ぶ上で大事なことであり、また、勉強にもなると思います。


■関連ページ

  (※ここのページと解説が重複しているページがあります。)

XHTML/CSS・目次 | CSS基礎知識・目次

Copyright (C) 2005-2009 http://www.xml.vc/