ユーザスタイルシートの利用方法と便利な設定

このQ&Aのポイント
  • ユーザスタイルシートを使ってWebページの表示をカスタマイズする方法や便利な設定についてご紹介します。
  • ユーザスタイルシートを利用することで、背景色や文字色、リンクの色などを自分好みに変更できます。
  • 他の人が使っているスタイルにも興味がある方は、自分の使っているスタイルを共有しましょう。
回答を見る
  • ベストアンサー

ユーザスタイルシートを使っている方はいますか?

使いこなせれば、かなり便利そうなユーザスタイルですけど、 私は主に、背景色や背景画像が目にチラチラして見づらい場合に、 「Webページで指定された~」をすべてoffにした上で、下のような単純なものを使っています。 body,table,td{ background-color : #e0e0e0; color : #202020; line-height : 130%; } body{ margin : 0% 5% 0% 5%; } a{ color : #202060; } a:visited{ color : #603060; } a:hover,a:active{ color : #306030; } 他の人が使っているスタイルにも興味があるので、「自分はこういうスタイルを使っている」、 「こう設定すると便利」みたいなものがあれば、教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
  • nonab
  • ベストアンサー率50% (9/18)
回答No.1

この質問に注目していたのですが、回答される方がいらっしゃらないので、 おこがましいのですが、コメントさせて頂きます。 私も行間がつまっている大量のテキストを読ませるサイトには、 ユーザースタイルシートを使うことがあります。 あまり違いませんが、こんな感じです。 body,th,td{ background-color : #efefef; font-size : 12px; color : #303030; line-height : 150%; } ポイントは、 ・(selene_plさんもやっていらっしゃるように)  背景色と文字色のコントラストは抑え目→目に優しい ・行間を空ける→読みやすい ・文字サイズを整える→私の場合、WinのIEユーザーなのでこれくらいが見やすいです。 他の方のも是非見てみたいですね。 でも、毎回切り替えるのって、ちょっとだけ面倒くさいですよね。

selene_pl
質問者

お礼

ありがとうございます。 なかなか回答がつかないので、あまり使っている人はいないのかな、と思っていました。 コントラストが強くて、行間が狭いと、内容がおもしろくても読む気がなくなりますからね。 文字サイズは、私は表示メニューから変えています。 >毎回切り替える ええ、かなり面倒です。 ワンタッチで切り替えられる、IEコンポーネントのブラウザありませんかねぇ(笑 私も、他の方のを見たいので、もう少し受付中にしておきます。

selene_pl
質問者

補足

もう流れてしまっているみたいで、書き込みがないので、締め切ることにします。 回答、ありがとうございました。

関連するQ&A

  • スタイルシートで

    外部スタイルシートのみでリンクの上にマウスが乗ったら背景の色が変わるようにしているのですが、 a:link {background-color: #FFFFFF;} a:hover {background-color: #000000;} a:visited {background-color: #FFFFFF;} この場合、一度リンクしたら次にマウスが乗っても変化しません。外部スタイルシートのみでうまくいく方法はあるのでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • スタイルシート

    <!-- span#k-11 { background-image : url("a.gif")} span#k-12 { background-image : url("b.gif")} span#k-21 { background-image : url("c.gif")} span#k-22 { background-image : url("d.gif")} --> <body> <table> <tr> <td><a href=""><span id="k-11" style="width:192; height:33;"></span></a></td> <td><a href=""><span id="k-12" style="width:192; height:33;"></span></a></td> </tr> <tr> <td><a href=""><span id="k-21" style="width:192; height:33;"></span></a></td> <td><a href=""><span id="k-22" style="width:192; height:33;"></span></a></td> </tr> </table> </body> 外部スタイルシートで、 同じ大きさ(width:192; height:33; gif画像の大きさ)のgif画像を、縦2×横2のテーブルを表示して、その個々の画像にリンクを貼りたいと思っています。 一応これできますが、もう少しbody内のテーブルを簡略したいと思いますが、なかなかうまいきません。 1.大きさの部分(width:192; height:33;)をスタイルに入れると、何故か画像が表示されなくなります。 2.リンクの部分もスタイルに入れたいのですが、どのようにすればよいかわかりません。 どうぞご指導よろしくお願いします。

  • スタイルシートの背景色の取得

    あるセルから他のセルへスタイルシートの背景色をコピーしたいのですが、下記のように実行すると無色となってしまいます。 どなたかご教授いただけませんでしょうか。 因みにコピーにしなければならないのは、元のセルの色も動的に変わるという理由です。 <head> <style> td.a{ background:blue; width:25; height:15; } td.b{ background:green; width:25; height:15; } </style> <script type="text/javascript"> function s(b){ document.getElementById('ia').style.background=b.style.background; //document.getElementById('ia').style.background="red"; } </script> </head> <body> <table Cellspacing="1"> <td id="ia" class="a"></td> </table> <table Cellspacing="1"> <tr> <td id="ib" class="b" onmousedown="s(this)"></td> </tr> </table> </body>

  • スタイルシートのリンクについて

    スタイルシートを下記の様に記述しました。 そこでリンクの部分なのですが ポインタが上にのった時にff6666になるようにしているのですが、 ff9900のままなのです。 通常はffcc00 既読はff9900 ポインタ上にのった時にff6666 クリックした時にff0000としたいのです。 どなたかお教え下さい。 <style type="text/css"> <!-- BODY { SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffcc00; SCROLLBAR-ARROW-COLOR: #ffcc00; SCROLLBAR-BASE-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR : #ffffff; SCROLLBAR-3DLIGHT-COLOR : #ffcc00} body,tr,td {font-size: 9pt;} body,tr,td {color: #ffcc00;} a {text-decoration: none;} a:link {color: #ffcc00;} a:hover {text-decoration: underline;} a:hover {color: #ff6666;} a:active {color: #ff0000;} a:visited {color: #ff9900;} body { background-repeat: no-repeat; background-position: 100% 100%; background-attachment: fixed;} --> </style>

    • ベストアンサー
    • CSS
  • スタイルシートでのデザイン

    HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。

    • ベストアンサー
    • CSS
  • スタイルシート…

    たぶん、初歩的な問題なんですが…自力では調べてもわからなかったので… スタイルシートで、画像を固定し、尚且つ、 リンクの貼ってある文字の上にカーソルがくると文字色が変わるようにしたいのですが、 どのようにすればよいのでしょうか? 一応、 <style type="text/css"> <!-- body { background-image : url("画像のURL"); background-attachment: fixed; background-position: 100% 0%; background-repeat: no-repeat ; } a{text-decoration:none;} a:link {color:#色;} a:active {color:#色;} a:visited {color:#色;} a:hover {color:#色;} --> </style> じゃないかな…?と思って、試してみたのですが、画像は固定できてるんですが、 リンクの文字色は変わりませんでした…。 アドバイスお願いします!

    • ベストアンサー
    • HTML
  • スタイルシート

    #Area_Login table .tbl { margin-left: auto; margin-right: auto; border: solid 1px #FFFFFF; background-color: #000000; } #Area_Login table .tbl th { text-align: center; font-size: 12pt; background-color: #AFB4DB; height: 15px; } #Area_Login table .tbl td { text-align: center; font-size: 11pt; background-color: #AFB4DB; border: solid 1px #FFFFFF; } <div id="Area_Login"> <table class="tbl"> <tr> <th><th> <tr> <td></td> </tr> </table> </dib> 上記ソースなのですが、テーブルが中央に配置されなくて困っています。 どなたか教えていただけませんか?

    • 締切済み
    • CSS
  • スタイルシート・・・この記述は正しいですか?

    メモ帳で(苦笑)HPを作っています。いままではテーブルなどのほんとに簡単なタグしか使っていなかったのですが、そろそろサイトデザインを変えたいな~と思って、スタイルシートに挑戦してみることにしました。マウスをオンにしたときリンクの背景色が変わるとか、スクロールバーの色を変えるとか、見た目は思った通りに表示できているのですが(ブラウザIE6.0/NN6.02です)、本やいろんなサイトさんのソースを参考に打ってるだけなので、本当にこれで合っているのか不安です。お時間のある方アドバイスなど頂けたらと思います。よろしくお願いします。 <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="robots" content="index,nofollow"> <style type="text/css"> <!-- body { background-color:#; scrollbar-face-color: #; scrollbar highlight-color: #; scrollbar-shadow-color: #; scrollbar-3dlight-color: #; scrollbar-arrow-color: #; scrollbar-track-color: #; scrollbar-darkshadow-color: # } a{text-decoration:none} a:link {color:#;background-color:#;} a:visited {color:#;background-color:#;} a:hover {color:#;background-color:#;} --> </style> </head> <body> </body> </html>

    • ベストアンサー
    • HTML
  • operaだとテーブルがなくなります

    operaだテーブルがなくなります IEだと問題なく表示されるのに だれか助けてください style.css    body{background-color:#ffff99;margin:0px; font-size:large; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive} .cur{font-family:cursive} .ser{font-family:serif} } table{background-color:#ff9933;  width:100%; height:10%    }   .midori{background-color:#999933; width:100%; height:3.3%  }        htmlのほうは <HTML> <HEAD> <TITLE></TITLE> <link href="style.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <table><tr ><td></td></tr></table> <table class="midori"> <tr ><td></td></tr></table> <table style="height:6.7%"> <tr ><td></td></tr></table> <table style="position:absolute; left: 0px; bottom:8%; width:8%; height:100%; background-color:#993300"> <tr ><td></td></tr></table> <table style="position:absolute; bottom:0; height=8% " class="midori"> <tr ><td></td></tr></table> </BODY> </HTML> こんな感じなのですが どうしてでしょうか

    • ベストアンサー
    • HTML
  • スタイルシートの書き方を教えてください!

    各文章の字間を空けるために部分的に <FONT style="line-height:150%"color="#c0c0c0"> </FONT> このようにしていしていたのですが、ページ全体にスタイルシートを使用して字間を調整するにはどのようなタグを書けばいいのでしょうか?色々と書き方があると思うのですが、素人にもわかりやすいように教えていただけますでしょうか、今現在使っているスタイルは以下の通りです。それをどのように書き換えればいいのでしょうか?どなたかおしえていただけますでしょうか。 <style type="text/css"><!-- body{ font-size : 10pt;color : #cccccc; background-color: #000000;} body{ font-face="MS UI Gothic, ヒラギノ明朝 Pro W3;} body{ font-style : "line-height:150%"; } TABLE { font-size : 10pt;color : #cccccc; } TABLE { font-face="MS UI Gothic, ヒラギノ明朝 Pro W3; } TABLE {font-style : "line-height:150%";} td{font-size : 10pt;color : #cccccc; } td{font-face="MS UI Gothic, ヒラギノ明朝 Pro W3;} td{font-style : "line-height:150%"; } --> </style>

    • ベストアンサー
    • HTML

専門家に質問してみよう