firefoxを使用して htmlのcssを見る方法を教えてください。

質問

初めて投稿します。　よろしくお願いします。
独学にて　htmlを勉強しています。　まだまだ未熟ですががんばっています。　
以前友達のお家で　見せてもらったのですが・・・firefoxの画面より、hp の css を表示しており　大変わかりやすく　勉強するにはいいなぁ～と思いました。　このようなことは　してはいけない事なのか??? まったくわかりませんが・・　私のパソコンでも　そのような画面が見られたらと思い　投稿しました。　
こんな事を投稿してもいいのかと悩みましたが　ご指摘よろしくお願いします。

回答No.3

ORUKA1951 · ベストアンサー

基本的に、HTMLもCSSも、隠すほどのものではなくというか、そもそも隠すべきではないものなのですから、自由に見て勉強してください。覗き見というレベルではまったくありません。だってどちらもテキストデータで、それを読んでブラウザが解釈しているわけですから、ブラウザに読めるということ＝誰の目にも見える。
　HTMLやCSS、JavaScriptのルールは自由に使えるように公開されているのに、それで書かれた物を見たり、利用したら困るという思考そのものがないのですから・・・

　以前のfirefox1.0あたりまでは、スタイルシートを読む機能もありましたが、利用者が少ないためアドオンに任せられました。下のJSView・・・

　さて、その友人が使っているアドオンは、間違いなくfire bugです。あまりにも有名で、ウェブ開発には欠かせないツールになっています。ウェブ開発者で知らない人はいないと思います。
　CSSやHTMLの何がどこに適用されているか、何が継承されなにが上書きされているかや、DOMの情報もすべて把握できますし、CSSのソース部分をクリックすると、ウィンドウの該当する部分が示されます。ローカルのファイルの編集もできます。

　涎をたらしたくなる話はここまでで、fire bugはこちらにあります。
Mozilla Japan - Firefox 用アドオン - Firebug
https://addons.mozilla.jp/firefox/details/1843
また、外部JSは
Mozilla Japan - Firefox 用アドオン - JSView
https://addons.mozilla.jp/firefox/details/2076
で読み込めます。

お礼

早速のお返事　ありがとうございます。
Firebug　をインストールしまして・・やってみましたら見ることができました。　ありがとうございました。
今は、スタイルシートを使ってでのHTMLを勉強をしていますが・・HPを見てみると　まだまだスタイルシートを使っていないページも多いのですね。でも、今から勉強するのであれば、こちらで勉強したほうがいいのでしょうか?
実際　この世界は難しいですね。大変な所に　興味を持ってしまったのと、手を突っ込んでしまったと・・ちょっと後悔しつつ・・・でも勉強してみようと思います。

回答No.2

naokita

裏ワザでしょうか？
単にサイトのHTMLやCSSを簡単に見たいとの事ですよね？

HTML,CSSを拝見するくらいなら 別にOKです・・・
HTMLなら右クリックで「ページソース表示」

https://addons.mozilla.jp/firefox/extensions/developer_tools/
現在ここの２ページ目のアドオン　Firebug　があります。
サイトのCSSが一発でわかります。

お礼

裏ワザとは・・まだまだ　そこまで達しておりません。
本当に　単にcssを勉強するにあたって　どんな風に設定されているのかと・・・見てみたいと思っているだけです。　こんな　事で申し訳ありません。
早速　やってみました・・　見ることができ　とってもうれしいです。
ありがとうございました。

回答No.1

cipher_roy

現在、ブラウザの最新バージョンに近いものはこういった外部ファイル
（css、js、php、cgi等）を裏ワザURL入力をしても呼び出せないような
セーフガード機能を付けたものに変わってきています。これを嫌って
古いバージョンのブラウザで通している人もいるようですが、サーバー側
でもこういった覗き見（悪意ある二次利用の可能性）をシャットアウト
する設定をつけてきています。

検索エンジンであれこれ探すと、過去に使われた裏技はいくつも見つかり
ますが、ややこしいことに巻き込まれたくないならあまり今後の使用は
お勧めできません。

お礼

シャットアウトの設定があるとは　知りませんでした・・
いろいろな　ご心配ありがとうございました。