2010年5月17日月曜日

「ソースの表示」からCSSを見つける方法 - CSSカスタマイズ

CSSを調べる
CSSカスタマイズをする時に、一通りCSSを眺めたくなった事はありませんか。
CSSをざっと眺めたい時は、ブラウザーに付いている「ソースの表示」を使います。


**** おおまかな手順(例: zoomeマイページ)
o ブラウザーの右クリックで「ソースの表示」もしくは「ページのソースを表示」を選びます。
o zoomeの場合、最初の <style type="text/css">
から
</style> までが、CSSカスタマイズ結果です。その他の例は、下のメモをご覧下さい。
o zoomeマイページのソースを Internet Explorer 7で見ると、日本語部分が文字化けします。Firefoxなど他のブラウザーを試してみる事をおすすめします。
   Internet Explorer 8 で見ると正常に見えました。但し、/******* てすと */ のようなコメントは、コメントの途中で改行されました。読む時には少し慣れが必要みたいです。


**** CSSの見つけ方。完全版。
o 2種類の書き方があります。
o 複数回使ったり、併用している事もあります。ソースを眺める時は一通り確認します。

** Webページ(= HTML)の中に直接書く方法
----------------
<style type="text/css">
.body { font-size : 12px; }
h3 { background-color : skyblue; }
</style>
----------------
o この場合は、「<style type="text/css">」から「</style>」までがCSSです。

** CSSを別のファイル(= 外部ファイル)に書いている場合
----------------
<link href="test1.css" rel="stylesheet" type="text/css">
----------------
o この場合は、一旦Webページを保存して、保存した時に出来たフォルダーの中からCSSファイルを見つける方法が、多分一番簡単です。


**** おまけ。Webページをファイルとして保存する方法
# 日本の著作権法が改正されて、インターネット上のファイルを保存する事(= ダウンロード)が違法行為になるケースが生まれました。
# 法律は今後も変わるかもしれません。以下の手順を使う時は、使う時点での法律にもご注意下さい。

** Internet Explorerの場合
o ブラウザー上部のメニューから、「名前を付けて保存」。
   + 出てくる画面で、ファイルの種類を「Webページ、完全」に変更します。
   + ファイルと一緒にフォルダーも出来ますので、調べたいファイルを見つけます。

** Firefoxの場合
o ブラウザー上部のメニューから、「名前を付けてページを保存」。
o もしくは、表示されているページの右クリックからも選択出来ます。
   + 出てくる画面で、ファイルの種類を「Webページ、完全」に変更します。
   + ファイルと一緒にフォルダーも出来ますので、調べたいファイルを見つけます。

** Google Chromeの場合
o 表示されているページを右クリックして「名前を付けて保存」。
   + 出てくる画面で、ファイルの種類を「ウェブページ、完全」に変更します。
   + ファイルと一緒にフォルダーも出来ますので、調べたいファイルを見つけます。

** その他
o Safariと Operaは、ファイルを個別保存する方法が見つかりませんでした。
o CSSのアドレス(URL)を直接指定すると、内容表示出来るかもしれません。(= 試していません)


==
関連ページ:
    ▼CSSを調べる
    ▼CSSカスタマイズ
    ▼制作メモ
    > 設定画面中にある CSS入力欄を簡単に辿る
    CSS用語の意味を簡単に調べる
    WebページからCSSの要素名を簡単に見つける - Firebug
(2010年8月5日変更。カタカナ用語の長音追加)