「ソースの表示」から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日変更。カタカナ用語の長音追加)