ママのスキンケアのお悩みにおすすめアイテム

パソコン初心者です。
ソフトを使わず、メモ帳で入力してホームページを作成しています。

リンクの文字で、通常は黒、マウスを乗せたとき白に変わり、クリックしてページを開いたときにも白(どのページにいるのかわかるように)としたいのですが、うまくいきません。
スタイルシートで、マウスを乗せたときのa:hoverを#ffffffと設定し、選択したときのa:activeを#ffffffと設定しています。

マウスを乗せたときには白く変わるのですが、クリックしてページを開いても、リンクの文字の色は黒のままです。
これを白に変えるにはどうすればいいのでしょうか?

どなたかアドバイスよろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

開いているページのリンク色を変えるには、ちょっと小細工が必要です。



例:
HTML
<ul>
<li class="current"><a href="./">Home</a></li>
<li><a href="./link/">Links</a></li>
<li><a href="./script/">Script</a></li>
<li><a href="./contact/">Contact</a></li>
</ul>

CSS
.current a {
color: #ffffff;
}
    • good
    • 1
この回答へのお礼

ご回答ありがとうございます。
教えていただいたように記入したら
開いているページのリンク文字が変わりました。
ありがとうございました。

お礼日時:2011/07/20 18:34

>スタイルシートで、マウスを乗せたときのa:hoverを#ffffffと設定し、選択したときのa:activeを#ffffffと設定しています。



 スタイルシートで指定する場合、
リンクに関する擬似クラス
:visited
:link
5.11.2 リンクに関する疑似クラス ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

と動的な擬似クラス
:hover,:focus
:avtive
5.11.3 動的な疑似クラス ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
を使います。

 ですが、現在の位置(current)を使うセレクタはありません。
 質問が、各ページに共通なナビゲーションリンクをコピーペーストしているなら、せいぜい:visitedを使うしかありません。そのため、すでに訪問したページと同じ扱いになって、必ずしも今いる場所を示すとは限りません。

 方法としては、同じナビゲーションリンクだと、currentを何らかの方法で伝えなければなりませんが、それが出来ないとなるとHTMLを書き換えるしかありません。

<div class="nav">
 <ul>
  <li><a href="/index.html">トップ</a></li>
  <li>著書</li>
  <li><a href="/blog/index.php">ブログ</a></li>
  <li><a href="/profile/index.html">自己紹介</a></li>
 </ul>
</div>
 とか・・・・・・・・
<div class="nav">
 <ul>
  <li><a href="/index.html">トップ</a></li>
  <li class="current"><a href="/books/index.html">著書</a></li>
  <li><a href="/blog/index.php">ブログ</a></li>
  <li><a href="/profile/index.html">自己紹介</a></li>
 </ul>
</div>

とか・・・・
 このリンク先の配下にさらにサブファイルなりディレクトリが存在する場合は、後者、そうでない場合は前者を使うことになるでしょう。
 面倒くさいので、私は現在のページの色は特に変えないことのほうが多いです。多くの場合、さらにサブページが続くことが多いという理由もあります。

(注)
 サブページもたくさんある、すべてのページにすべて同じナビゲーションを設けている場合は、呼び出す外部スタイルシートをディレクトリごとに変える方法をとることもあります。
<link rel="stylesheet" type="text/css" media="screen" href="/css/general.css" >
の次の行に
<link rel="stylesheet" type="text/css" media="screen" href="/css/books.css" >
と追加して
それに、
div.nav ul li a{color:blue;}
div.nav ul li+li a{color:maroon;}
div.nav ul li+li+li a{color:blue;}
と書いておく。他にも色々な方法がありますが・・
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
丁寧に説明していただいたので
現在のページを示すとは限らないことがわかりました。
リンク先にはサブページは設けていませんが
なにやら私にはちょっと難しそうで・・・
もうちょっと勉強してから試してみます。

お礼日時:2011/07/20 18:50

>マウスを乗せたときには白く変わるのですが、クリックしてページを開いても、リンクの文字の色は黒のままです。


>これを白に変えるにはどうすればいいのでしょうか?
マウスを乗せて白く変わったページと、クリックして開くページは別ですよね?activeは引き継がれるわけではありません。
そして、リンク先のページの自分自身のページへのリンクって意味あるのでしょうか?リンクのつもりでクリックしたのに同じページに飛んだらがっかりしません?

ということで、私のお勧めはリンクしないで、白を指定するです。

例1
html<span>現在のページ</span>
css span{color:white;}

例2
html
<ul class="menu">
<li><a href="page1.html">メニュー1</a></li>
<li><a href="page2.html">メニュー2</a></li>
<li>現在のページ</li>
<li><a href="page4.html">メニュー4</a></li>
</ul>
css
.menu li{color:white;}
.menu li a:link{color:black;}
.menu li a:visited{color:glay;}
.menu li a:hover{color:white;}
.menu li a:active{color:white;}
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
質問の説明が下手だったと思います。

>マウスを乗せて白く変わったページと、クリックして開くページは別ですよね?

headerの下にナビみたいに各ページのタイトル(ホームとかアクセスとか)をつけて
マウスを乗せたときに色が変わり
さらにそのページをクリックしたとき
どこのページにいるかわかるようにしたかったのですが・・・

そのように説明されているのかもしれませんが
初心者だからか基本がわかっていないのかよくわかりませんでした。
すみません。もう少し勉強します。

お礼日時:2011/07/20 18:42

A:link{


color:#000000;}

A:visited{
color:#ffffff;}

A:hover{
color:#ffffff;}

A:active{
color:#ffffff;}

以上
CSSへの記載順序にも気を付けて見てください。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
クリックしてページを開き元のページに戻ると
訪問済みの白い文字になってしまいました。
私が表示したいものと少し違っていたようです。

お礼日時:2011/07/20 18:31

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QCSSのcurrentを使ったグローバルナビゲーションの作り方

CSSのcurrentを使ったグローバルナビゲーションの作り方を教えてください。

以下のように二枚のつながった背景画像をロールオーバーさせるCSSのcurrentを使ったグローバルナビゲーションの作り方を教えてください。

画像URLと参考サイト
http://www.kagaya.co.jp/images/menu_gNav.gif
http://www.kagaya.co.jp/index.php

Aベストアンサー

#NAV,*{ }

と記述するなら大抵の場合

*{ }

で同じ効果が得られます。
ですがこのままではナビゲーション以外の要素にもmarginとpaddingの設定がされてしまい見た目が崩れる原因になります。

#NAV,#NAV * { }

これはあくまでナビゲーションとその子要素への指定に限定している感じです。


*(全称セレクタ)を使った初期化も簡単な例として提示しましたが、実はそんなに多く使われてはいません。
全称セレクタは全ての要素に適用を対象としているので、input要素のように各ブラウザによってCSSでも調整が困難な要素にまで設定が適用されてしまうためです。
実際には以下のように個別に指定する方法が多いのではないかと思います。

body, p, ul, ol, h1 , h2 , h3 , h4 , h5 , h6 {
margin:0;
padding:0;

}

Qimgタグは何で囲むのが良いか

皆さんはimgタグは何で囲んでいますか?

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>

例えばこういうような時に、何で囲むべきかというのをいつも迷います。

ブロック要素で囲むべきである、というのは何となく認識していますが、ここをdivで囲むのも何か違うような気がするし、
pで囲むのも「段落」と見なせるような画像でないと何となく気持ち悪いです。
最近はaltのある画像は「これは段落だろう」と自分を納得させてpで囲み、
altを空にしているものは囲まずにそのまま置いたりしています。
レイアウト上、ブロック要素が必要になった時にはdivで囲んでみたり…。

私はイメージ的な画像(情報としては必要ない画像や、直前のテキストとかぶっている画像文字等)にはあえてaltは付けずに空にすることが多いので、ちょいちょいこういう事で迷います。

スマートなやり方をご教授ください。

Aベストアンサー

>「alt="---------"」と入れるくらいなら「alt=""」の方が良いのではないでしょうか?
 そうです。そもそも、文字(内容)を画像に置き換えてしまうのは、感心できない手法ですが、味気ないHRの代わりに画像ラインを入れる手法はかっては行われていました。もしHRの代わりに画像を入れるのでしたら、このように書くべきと言っているのである---画像に置き換えて記述するのは誤りと言うことを言いたいのです。

>この写真にaltで候補者名を入れてしまうと、画像が見れない環境の人に対しては候補者が2回表示(もしくは読み上げ)されることになります。
 その場合は、
・altをalt=""としておく
・alt="山田太郎の正面からの写真"
 あるいは、alt="本人の写真"
 と画像が表示されない人も画像から得られるはずの情報をいれておく。

 になるでしょうね。

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>
 これは、書きましたが、Validator上はエラーになりませんが、やはり間違いなのです。この場合、ここに仮想的なブロックが存在するとしてDOMを構成しますが、その処理はHTML4以前は決まった解釈が定められていなかったために解釈上差が出てしまう可能性があります。

気が進まないが
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト<br>
<img src="xxxx.jpg" alt="">
</p>
</div>

とか
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p><img src="xxxx.jpg" alt=""></p>
</div>
それは、その画像がどのような段落にあるのかによって判断します。DIVはDIVで目的・用途があります。文法上のエラーを回避するため、単にデザインのためのような使い方は極力避けるほうがよいと思います。それは、突き詰めればHTMLで文書構造を正確にマークアップしすること、最終的にメンテナンスしやすい結果になるからです。

 <p class="figure main">
  <img src="" width="" height="" alt="麓から見た紅葉の城山">
 </p>
 <p>紅葉も終盤を迎えた先週、子供達を連れて近所の城山にハイキングに言ってきました。</p>
 <p class="figure sub">
  <img src="" width="" height="" alt="玄関で見送る妻">
 </p>
 <p>
  妻は、このような山歩きなど、実利がないものには付き合ってくれない。昔は・・
 </p>
このように書かれていると、後で写真を一枚追加したいときに前後を見ればどのようにマークアップすればよいかわかりますし、スタイルシートを書く際も、
*.figure{margin:10px;text-align:center;}
*.figure.sub{float:right;}
*.figure img{padding:5px;border-shadow:10px 10px 10px rgba(0,0,0,0.4);}
とか・・

>「alt="---------"」と入れるくらいなら「alt=""」の方が良いのではないでしょうか?
 そうです。そもそも、文字(内容)を画像に置き換えてしまうのは、感心できない手法ですが、味気ないHRの代わりに画像ラインを入れる手法はかっては行われていました。もしHRの代わりに画像を入れるのでしたら、このように書くべきと言っているのである---画像に置き換えて記述するのは誤りと言うことを言いたいのです。

>この写真にaltで候補者名を入れてしまうと、画像が見れない環境の人に対しては候補者が2回表示(もし...続きを読む

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Qフォトショップ 白黒画像を反転させるには?

フォトショップ(CS3)を使い始めたばかりの初心者です。

黒のバッググラウンドに白文字で書かれたイメージを、白地に黒文字へと反転させたいのですが、どのように操作すればよいのでしょうか?

アドバイスを頂けましたらと思います。
どうぞよろしくお願いいたします!

Aベストアンサー

Winなら「Ctrl」+「I」キーで、
Macなら「コマンド」+「I」キーで反転できます。

Q【WEB制作】画像ファイルの解像度は72?96?

WEB画像を作成するとき、MacのPhotoshopで72DPIで作成していましたが、最近制作環境がWindowsに変わりました。Winの画面解像度は96DPIですが、作るものは以前のまま72DPIの設定で作成しています。
できあがったものに問題はないのですが、どうもそのへんの違いがよくわかりません。MacとWin、いったいどっちの解像度で作成するのがいいんでしょうか?
初歩的な質問ですみませんが、教えて下さい。どうぞよろしくお願いします。

Aベストアンサー

一般的にホームページ上で使用する画像の解像度は 72dpiです。仮に72dpi以上の解像度で作られていても、画面上では同じに見えますが、解像度の高い画像ファイルは容量が大きくなるので表示に時間がかかります。

モニター解像度が大きいほど、 より広いデスクトップ環境を得ることができます。ホームページなども同様で同じサイトを閲覧していても、それぞれのモニター解像度によって見え方が異なるということになります。最近のMACのモニタもWINと同じ96dpiが標準になりつつあります。

Q一部CSSを無効にする

数ページのテーブルをcssファイルを使って半透明化させ背景が薄く見えるようにしています。
そこでテーブル自体だけでなくテーブル内の画像や文字も半透明化されるのですが、あるページのテーブル内にある数枚の画像のみを半透明化したくない場合、どのように書けば良いですか?
CSSはあまり、というか全く詳しくなくて、idやclassというのも調べてみたのですが、
目的のものに辿りつけず…困っています。宜しくお願いします。

Aベストアンサー

 とりあえず下記サイトは読まれましたか?下記は比較的わかりやすく説明していると思います。

参考URL:http://www.tohoho-web.com/css/basic.htm

Q「CSS」リストの2段組どのように組まれていますか?(同一カテゴリの場合)

リストの2段組ですが、皆さんどのように組まれていますか?

リストの項目が同一カテゴリーだった場合です。
例えば下記のような同一カテゴリー(花)の場合
・チューリップ
・あじさい
・たんぽぽ
・ひまわり
・すみれ
・パンジー

これを
=============
・チューリップ  ・ひまわり
・あじさい     ・すみれ
・たんぽぽ    ・パンジー
=============
のように表示させたい場合です。
投稿した後に表示がズレるかもしれませんが、
・ひまわり ・すみれ ・パンジー の頭は揃えたいです。

苦肉の策で下記のようなマークアップをしています。
<ul class="left">
<li>チューリップ</li>
<li>あじさい</li>
<li>たんぽぽ</li>
</ul>
<ul class="right">
<li>ひまわり</li>
<li>すみれ</li>
<li>パンジー</li>
</ul>
そして左右にfloatさせています。
ただ、これだとリストが途中で分断されてしまって
正しいマークアップとは言えないですよね・・・。

こういうケースって結構あるのでは、と思い、
色んなサイトを巡りましたが見つからず。

皆さんこういったケースの場合どのように組まれてますか?
いっそテーブルの方が良いのでしょうか?
項目は後から追加するものと想定してください。
(縦に可変していきます)

どうぞ宜しくお願いいたします。

リストの2段組ですが、皆さんどのように組まれていますか?

リストの項目が同一カテゴリーだった場合です。
例えば下記のような同一カテゴリー(花)の場合
・チューリップ
・あじさい
・たんぽぽ
・ひまわり
・すみれ
・パンジー

これを
=============
・チューリップ  ・ひまわり
・あじさい     ・すみれ
・たんぽぽ    ・パンジー
=============
のように表示させたい場合です。
投稿した後に表示がズレるかもしれませんが、
・ひまわり ・すみれ...続きを読む

Aベストアンサー

確かに下のソースだとIEで駄目でした・・・
以下の部分を追加してください。


.left {
width:251px;
float:left;
clear:left; /* ←追加する場所 */
}

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング