アプリ版：「スタンプのみでお礼する」機能のリリースについて

おしえて

マウスＯＮでリンク文字色を変えたい

解決済

  • 質問者：new_hana
  • 質問日時：
  • 回答数：5件

HPを上部、その下に左右２つの３フレームで構成しています。
下の左のフレームにメニューを表示していますが幅に制限が有、
メニュー幅に文字数が収まる様に越える分は下に<br>で下ろしています。

下ろした文字を右にずらすのに、スペースを使っており、このスペースにアンダーラインが表示されます。
（文字にはリンクを付けてアンダーラインを入れています。）

これを消す方法はなさそうなので、アンダーラインを使わずにマウスを載せると、文字の色が変る方法を検討しています。

例
<A href="Grindelwald/Grindelwald/Grindelwald1.html" target="right"><font color="#ff0000" size=4 face="ＭＳ 明朝"><b>シャモニー(EXCELSIOR.H)</b></font></A><br>
（複数有り、文字色は変えてあります）

と言う記述に対して、ＮＥＴ情報より得た下記を反映させたいのですが・・
<STYLE type="text/css">の下に記述を入れても、
上記に　font color　を指定しているので、有効にならないのでしょうか？

a:hover {
color: skyblue;
font-size: 2em;/*文字サイズ2倍*/
font-weight: bold;
}

たまたま見たHPにサンプルがありましたので、これが反映できないかと・・・

素人の質問ですが、アドバイスをいただけませんでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.1

  • 回答者： naokita
  • 回答日時：

全てCSSで記述しないと、HTML側が優先してしまいます・・・


つまり、
HTML側は、テキストのみにして、CSSで指定する事

<a href="Grindelwald/Grindelwald/Grindelwald1.html" target="right">シャモニー(EXCELSIOR.H)</a>

a {
color: #f00;
font-size: 1.2em;/*文字サイズは自由に変更*/
font-weight: bold;
}
a:hover { color: #1E90FF;}
    • good
    • 0
    • 件
通報する
この回答へのお礼

有り難うございます。

ＣＳＳの知識はありませんので・・・。
（htmlの知識があるかというと・・素人です）

上記を、連続して記述するものだと思いましたが・・・
試してみると、　a{・・・・・・｝　がテキスト表示されてしまいました。

どうも違うようですね。

通報する
お礼日時：2019/10/13 12:10

No.2

  • 回答者： naokita
  • 回答日時：

#1　いや、だから・・・　全部が全部　手取り足取り１から説明してない訳で・・・



自分でCSSを書いているんだから、
こちらもCSSで説明したんだよ
何故、HTMLのbodyにCSSを突っ込むの？
違うでしょ、自分がCSSを書いた場所に、CSSを書き換えるん　それぐらいわかってよｗ
    • good
    • 0
    • 件
通報する
この回答へのお礼

済みません・・・・返す言葉が無い。

理解しているわけでは無く、応用的に使用しているのでこの様な事になってしまいました。

通報する
お礼日時：2019/10/13 12:54

No.3

  • 回答者： naokita
  • 回答日時：

#1,#2です。

　それでも理解できないようなら実例だしますね。

パソコンで、ファイルを白紙の状態から、以下のHTMLをコピペして、
新規のファイルとして、.htmlで保存
ブラウザで表示して、動作確認したらわかるよ。あとは自分で応用してね！


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>テスト</title>
<style>
a {
color: #f00;
font-size: 1.2em;/*文字サイズは自由に変更*/
font-weight: bold;
}
a:hover { color: #1E90FF;}
</style>
</head>
<body>
<a href="Grindelwald/Grindelwald/Grindelwald1.html" target="right">シャモニー(EXCELSIOR.H)</a>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

有り難うございます。
面倒をおかけします。

トライしました。
文字が思うように色が変りました。
これでアンダーラインを消せば良いと思っています。

ご指摘にあった、
＞全てCSSで記述しないと、HTML側が優先してしまいます・・・
<a harf・・・・・>　
の中に、フォントカラー指定があるとそちらが優先されると言うことですね。

メニューに文字サイズが二種類、文字の色を三種類と使い分けていますが、
これは、個別に指定するしかないと思っています。
その場合には、css指定のマウスＯＮが有効にならないと言う事ですね。
（文字色は変りませんでしたが、アンダーラインは表示されました。
　文字間のブランクにもアンダーラインが）

通報する
お礼日時：2019/10/13 13:24

No.4ベストアンサー

  • 回答者： xs200
  • 回答日時：

htmlの


<head>と</head>の間に
<style>
a {
color: red
}

a:hover {
color: skyblue;
font-size: 2em;/*文字サイズ2倍*/
font-weight: bold;
}
</style>
と書いて

<font color="#ff0000" size=4 face="ＭＳ 明朝">と</font>は削除

してみてください。styleの部分が長くなるならcssは別なファイルにする方が良いです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

有り難うございます。

Styleの記述をコピーで置き換え、
<font color="#ff0000" size=4 face="ＭＳ 明朝">と</font>は削除
しました。

上手く表示されました。

あと、
フォントを”３”、”４”と使い分けているのを統一し、
フォントカラーも指定せず、統一する方法なんでしょうか。

通報する
お礼日時：2019/10/13 14:08

No.5

  • 回答者： naokita
  • 回答日時：

#1,2,3です。

　　アンダーラインも消せる！

<style>
a {
color: #f00;
font-size: 1.2em;/*文字サイズは自由に変更*/
font-weight: bold;
text-decoration: none;/*これを追加*/
}
a:hover { color: #1E90FF;}
</style>
    • good
    • 0
    • 件
通報する
この回答へのお礼

有り難うございます。

アンダーラインを消すをトライし、上手く出来ました。
xs200さんのアドバイスで、構文は書けたようですので・・。

後は今のメニュー毎の色と文字サイズの使い分けですね。
難しいようでしたら、どちらも統一する方法で・・・と思います。

通報する
お礼日時：2019/10/13 14:16

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報