質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.75%

  • HTML

    8322questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • WordPress

    6668questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    5346questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • hover

    17questions

    これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。

WordPress内のマウスオーバーでの背景色変更

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 334

AM_UTC

score -4

WordPressでホームページを作成しているのですが、ボーダーで囲っている部分がクリックした際、リンクに飛ぶのが一目でわかるよう、カーソルを合わせた際、そこの部分の背景色を変更したいのです。
いろいろサイトを見てみましたが、追加した箇所が文字列で反映されてしまったり、変化が全くなかったりです。
下のコードの中にhoverやonmouseoverのタグを追加して背景色の変更をできませんでしょうか。

<div style="height: 300px; width: 33.33%; border-style: solid; border-left: inset 1px #000000; text-align: center; float: left; ">

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/05/10 11:53

    調べてみたこと、やってみたこと(そのソースコード)を具体的に追記してください。また参考先サイトがあればURLも質問に追記してください。既に見た先が回答についてしまうと無駄なやり取りが発生しますし、もしかしたら参考記事の理解が間違っているために解決に至れていないのかもしれません。https://teratail.com/help/question-tips#questionTips1-2 またプログラムコード(およびエラーメッセージ)は```で囲ってください。(わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください)正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。

    キャンセル

回答 2

+2

まず特別な必要に迫られない限りインラインCSSはやめましょう。
スタイルを定義するためにstylesheetがあります。

<div class="hoge">
...
</div>
.hoge{
   通常のcssスタイル
}
.hoge:hover{
   マウスホバー時のCSSスタイル 
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/10 12:05

    ありがとうございます。
    それでやると
    .hoge:hover{
    background-color: #e0e0e0;
    }
    この部分が文字列になってしまうのです。

    キャンセル

  • 2018/05/10 13:23

    スタイルシートの概念は理解していますか?
    出来れば外部ファイル化しましょう。

    初歩的なこと過ぎて書くのもあれですが、
    例えばhoge.cssというファイルを作ってcssを書き、
    ページに下記のようにリンクさせます。
    <link rel="stylesheet" type="text/css" href="CSSファイルまでのパス/hoge.css"/>

    ページ内に書くのであれば、
    <style type="text/css" media="screen">
    .hoge{
    通常のcssスタイル
    }
    .hoge:hover{
    マウスホバー時のCSSスタイル
    }
    </style>

    本来であれば調べれば出てくることです。
    まず調べましょう。そして学習しましょう。

    今のままではホームページは作れません。

    キャンセル

  • 2018/05/10 13:32 編集

    横から失礼します。
    https://saruwakakun.com/html-css/reference/where-css
    このあたりに、外部CSSの読み込み、styleでの記述、インラインの記述とその優先順位についてわかりやすく書いてあります。基本的にインラインでは疑似クラス(hover等)はできないと思っておいた方がいいです。
    ご参考まで。

    キャンセル

  • 2018/05/10 15:19

    @stampdoor
    わからないのでお聞きしています。
    言い方に気を付けてください。

    キャンセル

  • 2018/05/10 15:35

    > r.nakamuraさん
    横からすみません。
    参考までにお聞かせいただきたいのですが、気をつけたほうがいいと考えられた「言い方」とは、具体的にはどの部分ですか?

    キャンセル

  • 2018/05/10 15:45

    では「いろんなサイトを見た」とありますがどのようなワードで検索してどれほどのページを参考にしたのでしょうか?参考書などを購入して学習したりしたのでしょうか?
    私から見るとかなり早い段階からご自身での検討を放棄して質問に頼っているように見えます。
    なんだか他の質問でも色々と回答者に噛み付いているみたいですが言い方にカチンときている場合ではないと思いますよ。

    キャンセル

  • 2018/05/10 16:07 編集

    Lhankor_Mhyさん
    わざわざ言いたくはないのですが。。

    >初歩的なこと過ぎて書くのもあれですが
    わからないから聞いている質問者に向かってわざわざ言うことでしょうか。

    >本来であれば調べれば出てくることです。
    >まず調べましょう。そして学習しましょう。
    十数種類のサイトをみても分からないので質問したのですが、質問することが悪いことのように受け取れます。

    こういう方は回答してくださらなくて結構ですのでどうぞスルーしてください。

    キャンセル

  • 2018/05/10 16:14

    あっ…(察し)

    キャンセル

  • 2018/05/10 16:17

    > r.nakamuraさん
    参考になりました。ありがとうございます。

    > わざわざ言いたくはない
    私もわからないのでお聞きしたのですが、「わざわざ言いたくはない」とわざわざ言わなくてはいけないことなのでしょうか。

    キャンセル

  • 2018/05/10 16:30 編集

    Lhankor_Mhyさん
    >「わざわざ言いたくはない」とわざわざ言わなくてはいけないことなのでしょうか。
    わたしも喧嘩したいわけではないので言いたくない、との意味でした。stampdoorさんにこれ以上悪く思われたら困るので。揚げ足取るのはやめてください。お二人ともこのコメント欄には書かないでください。

    キャンセル

  • 2018/05/10 17:19

    > r.nakamuraさん
    失礼いたしました。お詫びいたします。
    私も喧嘩をしたいわけではなかったので、ご理解いただければ、と存じます。

    teratail の回答者は、「目的を達成する手伝い」をしない傾向があります。
    では、どのような回答をするかというと、「スキルアップの手伝い」になるような回答をする傾向にあります。
    r.nakamura さんの目的は wordpressでのサイトの作成なのでしょうけれど、teratail の回答者はそれを自力でできるようになるための回答をします。
    なので、(ちょうど私がr .nakamura さんにしたような)回答者たちから自明であるように見える質問をしても、r.nakamura さんから見るとそっけない回答が返ってくることが多いかと思います。場合によっては、「この人はどれだけ教えても自力でできるようにならない人だ」と判断され、感情を害するかもしれません。

    エンジニアはプロです。本来、彼らのアドバイスは対価を払うべきものなのです。
    そこは理解してください。

    また、エンジニアたちは、感情を軽視し事実を重視する傾向があります。
    https://ja.wikipedia.org/wiki/%E3%83%A2%E3%83%92%E3%82%AB%E3%83%B3%E6%97%8F_(%E3%83%8D%E3%83%83%E3%83%88%E7%94%A8%E8%AA%9E)
    彼らと付き合うなら、彼らの文化に理解を示すことも必要になるかと思います。

    r.nakamura さんは、↓この質問のレベルで言うと、3OI にあるかと思いました。
    https://qiita.com/seki_uk/items/4001423b3cd3db0dada7#%E8%B3%AA%E5%95%8F%E3%81%AE%E3%83%AC%E3%83%99%E3%83%AB
    なので、「きちんと情報がまとまったところで勉強してみてください」という回答が返ってくるのは、(teratail の文化では)仕方がない面もあるかな、と思います。

    もし、teratailが性に合わないのであれば、はてな人力検索に行ってみるのもいいかもしれません。あちらのコンセプトは「質問者の代わりにググります」というもので、しかもITスキルがある回答者が複数います。検討してみてください。

    以上、ご理解をいただけますと、幸甚です。



    まあ、無駄に口が悪い回答者とか、わかってない質問者と見るとマイナス評価をつける回答者とか、そういうのどうなのかね、とは自分も思う時がありますけどね。

    キャンセル

  • 2018/05/10 19:20 編集

    訂正:Lhankor_Mhyさん
    長文だった為見ておりませんでした。(誹謗中傷は傷つくので見たくないと思い)
    サイトを拝見し、納得しました。普段こういう言い方をされないので正直驚いていますが、
    こういった方が多いところなんですね。
    正直ひどい印象があるyahoo知恵袋が、天国のように感じます。
    ありがとうございました。

    キャンセル

  • 2018/05/11 10:12 編集

    Lhankor_Mhyさん
    この質問者さんには「検索の仕方から試行錯誤の仕方」を教えてあげたほうが良いかもしれません。
    あげられたQiitaの記事、よく読まれているので私も参考にしていますが、その中にある「魚の釣り方を教えよ」というところですね。

    私の個人的な経験から技術者観点の理論だけでは通じない方も一定数いらっしゃいますので(中には技術者じゃないから、代理でやってるから、と色々な背景の方がいるので一辺倒では良くないことも多々あります)

    キャンセル

check解決した方法

-3

<div>内に大量のスタイルを入れたので、hoverの優先順位が低くなったと考えられます。
以下のようにスタイルタグのみで書くと作動しました。
外部ファイルは1ページのみの作成なので、あえて作りませんでした。
初歩的かと思う方もいらっしゃると思いますが、そのための質問する場だと思います。

<style>
.stampdoor { height: 350px; width: 33.33%; border-style: solid; border-left: inset 1px #DCDCDC; text-align: center; float: left; }

.stampdoor:hover { background-color:#FFFFFF; color:#808080; }
</style>

<a class="stampdoor" href="https://idungivaf‎">

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/10 23:26

    嘘をつくのはやめましょう。

    何らかで困っていて検索したユーザーがこのページを見た場合、間違った認識を与えてしまいます。

    かなり厳密にセレクタを絞っていなければページ内にstyleで設定したものよりインラインCSSで
    設定したもののほうが優先処理されるのはある程度CSSをかじっている人はわかります。

    あなたの最初の質問文ではCSSとHTMLの分離も理解できていないような内容でした。

    そして自身で解決まで導いた場合は、その処理まで書くのが暗黙のルールです。

    このままではあなたが正解に至ったということを信じる根拠がありません。

    まぁ、何を言っても聞く耳を持たないようなので後は適当に書きますが、
    人にものを聞いてるのですから、少し謙虚になりましょうよ。

    大学の受験問題を手伝う人がいたとして「算数がわかりません」、って言われたら
    ちょっともう少し自分でできることがあるでしょう?って思うでしょ。

    自分が傷つきたくないからって都合のいい答え以外を排除していては、いつか本当に手詰まりになるよ。

    恐らく社会にまだ出ている人じゃないんでしょうが(出ていたらそれはそれで問題ですが)。

    IT関係でどこかに入社しても「始めたばっかりでわからないのに」とか「丁寧に教えてくれないほうが悪い」とか言って早期退職するパターンの予感をひしひし感じる。

    あなたの今後に幸あれ。

    これ以上他の回答者との軋轢が生まれないように祈るばかりです。


    P.S.
    Lhankor_Mhyさん

    申し訳ございません、なんだかとばっちりを受けてしまって。
    とても丁寧なレスをありがとうございます。
    実に素晴らしいアフターケアだったと思います。
    フォローさせていただきます。

    キャンセル

  • 2018/05/11 09:55 編集

    嘘はついておりません。

    回答は控えてくださいと申したはずです。

    あなたのその言い方、不快に感じる方は私以外にもたくさんいる思いますよ。
    なんとか族か知りませんが、正当化しないでください。ただの、人の気持ちを一切考慮しない人なんだと思います。
    今まで対人関係でもめることも多々あったでしょう。
    あなたの両親、同僚に同情してしまいます。

    キャンセル

  • 2018/05/11 10:06 編集

    stampdoorさん
    全く回答になっていないベストアンサーなので何の参考にもならないと思いますよ。当件についてはそこまで気にしなくて問題ないかと。
    (今後困るのはこの質問者さんですし)

    キャンセル

  • 2018/05/11 10:33

    全く的はずれな回答ですのでマイナス評価をさせていただきます。

    キャンセル

  • 2018/05/11 15:23

    わかりましたので、これ以上何も言わないでください。

    キャンセル

  • 2018/05/11 15:25

    では正しい解決策をお書きください。
    発生した現象、うまくいかない原因、解決策 が全くつながっていないために指摘されていますので。

    キャンセル

  • 2018/05/11 15:27

    teratail始めたばかりなので書き方がよくわからないです。
    誰も参考にしない回答なら、もう無視してください。

    キャンセル

  • 2018/05/11 15:45

    説明書は熟読して利用しましょう。(用法・容量は守りましょう)
    https://teratail.com/tour
    https://teratail.com/help/question-tips

    質問も回答も投稿者のみ編集することができます。
    修正・更新すれば良いだけの話です。

    キャンセル

  • 2018/05/11 17:57

    教えたことそのまま使っていて草
    なんだか可愛くなってきたな

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8322questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • WordPress

    6668questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    5346questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • hover

    17questions

    これは、HTMLの 擬似クラス[hover]に関するタグです。Hoverは与えられた要素へマウスカーソルを置くことを意味します。また、タッチ可能なデバイスでユーザーが要素へタッチすることをHoverと呼ぶ場合もあります。