• ベストアンサー

CSSの指定を視覚的に

hogemodokiの回答

回答No.2

FireFox( http://www.mozilla-japan.org/products/firefox/ )の拡張に、 Web Developer( http://www.infoaxia.com/tools/webdeveloper/ ) というものがあります。 これを使えば、お望みのことはできると思います。

magokoro009
質問者

お礼

すばやいご回答ありがとうございます。 これこそ捜し求めいていた機能です。 いつもうっかり忘れてしまうalt属性までわかるとは・・・ サイトデザインの修正がホントに楽になりそうです!

関連するQ&A

  • ブラウザがおかしなアドレス指定をします

    IEでURLを指定して(どのサイトのURLでも同じ)入力しても、そのアドレスの前にres://C:\WINNT\system32\shdoclc.dll/dnserror.htm#http:// と言うのがついてきて、ページが開けない状態です。 どのような原因で起こって、対処はどうすればよいのか、教えて下さい。 知識が多くないので、具体的な作業方法をお知らせ頂けると幸いです。

  • 追加CSSでサイトの編集をしようと思っているのです

    追加CSSでサイトの編集をしようと思っているのですが、もともと青だった所を追加CSSを使用して赤に変更した場合、もともと書かれていた赤は無効になって追加CSSが優先されて赤になるのでしょうか?

    • ベストアンサー
    • CSS
  • CSSでの2つの背景画像指定

    現在、Wordpressでサイトを運営しています。 既に背景画像を以下の感じで指定しています background:#f0f0f0 url(images/背景画像) repeat; そこで、この背景画像を残した状態で、新たに左側に20px幅程度の画像を 上から下までfixedで付け足したいと考えております。 ところが、現在の背景画像を残したままでどうしても画像の追加が出来ません。 たとえば、上記CSSタグに追加で background: url(images/追加画像) repeat-y fixed left top; を記述しますと、最初の画像が消えてしまいます。 両方の画像を有効にするには、どのような記述にすればよいのか アドバイスを宜しくお願い致します。

    • ベストアンサー
    • CSS
  • cssのクラス名のつけ方について

    Sublime Textのプラグインの「Goto-CSS-Declaration」 を使えるよいクラス名のつけ方はないでしょうか? ・クラス名としては良いが、エスケープシーケンスをgotocssが認識しない .u-centering-length\+block { display: block; margin: auto; } ・下記のようなときはどうしますか?180per-remのようにしますか?一見わかりにくくないでしょうか? .u-fz-1dot8rem{ font-size: 1.8rem !important; } ただそうすると、下記とかぶりやすいですよね。180per-remとすれば違うクラス名にできるのでありでしょうか? .u-fz-180per{ font-size: 180% !important; }

    • 締切済み
    • CSS
  • CSSの文字サイズについて

    CSSの練習にサイトを作っているのですが、 文字の表示サイズをブラウザ側で変更すると文字が隠れてしまいます。 yahooなどは文字サイズを変更してもブロックも拡大しているようなのですがどうなっているのでしょうか。

  • CSSで<table>を横に並べるように指定する方法

    今までは、テーブルを入れ子にしてデザインしていたものを できる範囲でCSSに変更したく思っています。 本体が2カラムにしてあるページのメイン部分に、 小さなテーブルが横に4つ、縦に10から50個ほど入っています。 今までは テーブルが4つ入りのテーブルを縦にずらっとならべていました。 ブロック要素であるテーブルをスタイルシートでインライン要素に変える http://himajin.moo.jp/html/table/table3.html 上記サイトさんにあるような方法でやるとしたら 具体的にどのようなCSSを書けばよいのでしょうか? また、他に方法ありましたら宜しくご教授願います。

    • 締切済み
    • CSS
  • CSSの使い方の流儀?

    先日業者にホームページの作成を依頼したところ、 子孫セレクタを駆使したCSSを使ったページが できあがってきたのですが・・・ たとえばこんな感じ <div id="header">   <div class="block1">     <span>・・・・・・</span>     ・・・・・・・   </div>   <span>・・・・・・</span>   ・・・・・・・ </div> <div id="contents">   <div class="block2">     <span>・・・・・・</span>     ・・・・・・・   </div>   <span>・・・・・・</span>   ・・・・・・・ </div> これに対して CSSでこんなスタイルが設定されています(セレクタ部のみ抜粋) #header .block1 #header .block1 span #header span #contents .block2 #contents .block2 span #contents span 私だったらわざわざ複雑な子孫セレクタを使わずに、 個々にクラスかIDを設定すると思うのですが・・・ また、ただ画像が貼ってあるだけと思ったら、 CSSでspanの背景画像として貼ってあったり、 ただの仕切り線と思ったら、 やはりdivのボーダーラインを使っていたり・・・ こういう作りって一般的なのでしょうか? あるいは、何か利点があるのでしょうか? ブログのカスタマイズなどだと、元のHTMLを自分で直せない場合が多いので、 こういうコトをすることが良くある、というのはわかるのですが・・・ あまりにHTMLのタグの構造とCSSが密接に絡んでいて、 ほんの一文追加しようとしただけで苦労していまして・・・ なんでこういう書き方なのかな・・・と、 不思議に思っています。。

  • HTMLとCSSはどれだけ分離できるのか。

    とある本で「HTMLは本来文書構造とその内容のみを記録するもので、視覚的表現を行なうのは好ましくない」とあり、デザインの点についてはCSSに任せるようにとありました。たしかにこれによって文書作成者のデザイナーの仕事に完全に分断できるので便利だとは思うのですが、1つ疑問があります。その2つはどの程度まで分離できるのでしょう? 例えば<b>タグや<font>タグによる文字サイズ・色変更はターゲットを<body>や<p>あるいはそれに設定したクラスにすることによってCSSで代用が可能です。が、例えば「この部分のテキストは色を変えて、他はそのまま」というようにしたい場合、事前にタグやクラスを用意しておかなければなりませんよね?body内にプレーンテキストで書かれたテキストを、途中から部分的に変更を加えたい場合はそのHTMLファイルをいじる必要がありますよね。しかしそれでは役割の分担になっていないのではないでしょうか。 また、テーブルをレイアウトの点で有効ですが、これは逆にCSSでは実現不可能で、HTMLでのみ可能な表現です。これについても仕事の分断になっていないのではないかと思います。 本当にHTMLとCSSの分離によって作業の分断・効率化が図れるのでしょうか?

    • 締切済み
    • CSS
  • 要素にスタイルシートを外部CSSにて指定する方法

    外部運営で、間借りしているサイトを使用しています。(主の部分は、運営会社のみが変更可能) 自分でCSSを変更できないので、例えば、テキストリンクにスタイルを適用す場合、直接記述ができるようなのですが、 <a style="color: red; text-decoration: none;" target="_blank" href="url">ABCD</a> これを、直接スタイル記述ではなく、自分のサイトで作った外部CSSにリンクさせ、適用させたいと考えています。 ID name属性 Title属性 content type属性 スタイルシートクラス リンクcharset属性とスタイルシート欄が存在します。(上記の例は、最後のスタイルシートの欄に入れると上記のようなソースになりました。) 上記の中で、何か利用すれば外部CSSのリンクできるのでしょうか。

    • ベストアンサー
    • HTML
  • CSSでクラス名を指定してもうまくいかない

    下記URLのサイトを参考にして「Google+1ボタン」を設置しようとしています。 https://developers.google.com/+/web/+1button/?hl=ja とりあえずサイト上には設置できたのですが、今度はこの「Google+1ボタン」を自分が設置したい場所に貼り付けるために、CSSで指定しようと思いました。 ちなみに、取得したコードは以下のようになっています。 <!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 --> <div class="g-plusone" data-size="medium"></div> <!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 --> <script type="text/javascript"> window.___gcfg = {lang: 'ja'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> コードは上記のようになっています。 class="g-plusone" となっていますので、このままこれをクラス名としてCSSに記述しても適用されません。 そこで、これにさらに<div>タグで囲んで、この<div>にクラスを付ければできると思い <div class=”sample”><div class="g-plusone" data-size="medium"></div></div> として、sampleに対してスタイルを指定してみたところ、うまくできました。 しかし、できればこのようなことはせず、"g-plusone"というクラス名が最初から付いているわけですから、これを利用できないかと考えています。 もし、できるのであれば、そのやり方を教えてください。

    • ベストアンサー
    • CSS