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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

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

CSS

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

Q&A

解決済

4回答

4760閲覧

リンク反応範囲を拡張したい

_k0u

総合スコア12

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/01/16 08:42

編集2019/01/16 10:08

前提・実現したいこと

現在Webサイト作成を学習している初学者です。あまり知識がありません。

ログアウトボタンの実装を行いたいと考えています。

動作している環境

  • OS: linux 7(Core)
  • ブラウザ: Google Chrome (version) 55.0.2883.87 (64-bit)

期待している動作

マウスカーソルをログアウトボタンにかざしたときにボタンの色などを変化させる。

発生している問題

「ログアウト」という文字にマウスカーソルがかざされた時のみ、変化する。(リンクの反応範囲がボタン全体でなく文字のみになっている。)

修正した部分

該当箇所について自分なりに調べ、aタグは初期状態がインライン要素となっていて中身の文字の部分の大きさしか持たないので、それをブロック要素に変化させればよいという結論に至りました。そこで、cssファイルのaタグ部分に「display: block;」という処理を追加したのですが、うまくいきませんでした。

該当のソースコード

html

1<!doctype html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>test</title> 6 <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"> 7 </head> 8 <body> 9 <div class="header-list"> 10 <a href="#" class="logout">ログアウト</a> 11 </div> 12 </body> 13</html> 14

css

1.header-list a { 2 display: block; 3 text-align: center; 4 vertical-align: middle; 5 text-decoration: none; 6 color: white; 7 font-size: 20px; 8} 9 10.header-list a:hover { 11 color: black; 12 opacity: 0.4; 13}

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

他の方の回答でうまくいくと思うのですが。。。

ブラウザのキャッシュクリアを試してください。
CSSやHTMLはキャッシュに残っていることが多いので。

投稿2019/01/16 10:44

Kaiser

総合スコア295

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_k0u

2019/01/16 12:35

ご回答ありがとうございます。 キャッシュクリアは毎回行なっています。
Kaiser

2019/01/16 12:38

失礼いたしました。
guest

0

ボタンというのがよくわからないので推測ですが、

<div class="header-list"></div>

で囲っている部分で反応させたいということでしょうか?

もしその認識であっているのであれば、div要素にCSSを追加してやればいいだけな気がします。

html

1<html> 2 <head> 3 <meta charset="utf-8"> 4 <title>test</title> 5 <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"> 6 </head> 7 <body> 8 <div class="header-list"> 9 <a href="#" class="logout">ログアウト</a> 10 </div> 11 </body> 12</html>

css

1.header-list a { 2 display: block; 3 text-align: center; 4 vertical-align: middle; 5 text-decoration: none; 6 color: white; 7 font-size: 20px; 8} 9 10.header-list a:hover { 11 color: black; 12 opacity: 0.4; 13} 14 15.header-list { 16 background:red; 17 width:200px; 18} 19 20.header-list:hover { 21 background:blue; 22}

画面での実行結果(追記)

![イメージ説明]

う~ん?色変わるんですけどこういうことではないのですか?

F12→ディベロッパーツール表示→更新ボタン右クリック→キャッシュの消去とハードの再読み込み

は行ってるんですもんね?

想定としている動作はこの画像で合っているのでしょうか?

CSSやHTMLはこれで全部ですか?


代替案の提示

html

1<html> 2 <head> 3 <meta charset="utf-8"> 4 <title>test</title> 5 <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"> 6 </head> 7 <body> 8 <div class="testdiv"> 9 <input class='testbutton' type="button" value="ログアウト"> 10 <button type="button" class='testbutton2' name="test" value="logout">ログアウト2 11 </button> 12 </div> 13 </body> 14</html>

css

1.testdiv { 2 text-align:center;/*真ん中寄せ*/ 3} 4 5.testbutton {/*ログアウト1*/ 6 height:60px; 7 width:100px; 8 border-radius: 10px; /*角丸にする*/ 9 background-color:#ffa500; 10} 11 12.testbutton:hover { 13 background-color:#ff8c00; 14} 15 16.testbutton2 {/*ログアウト2*/ 17 height:60px; 18 width:100px; 19 border-radius: 10px; /*角丸にする*/ 20 background-color:#ffa500; 21} 22 23.testbutton2:hover { 24 background-color:#ff8c00; 25}

イメージ説明

ボタン作成時にdivを背景として使わないという方法もあるので一応書いておきます。
どうしてもdivで設定しなければいけないんだという強い希望があるのでしたら
また考えます

投稿2019/01/16 09:00

編集2019/01/17 01:28
azuapricot

総合スコア2341

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_k0u

2019/01/16 09:10

ご回答誠にありがとうございます。 ボタンというのは曖昧な表現ですね、すみません。 回答者様がおっしゃられている通り、divで囲っている部分(ログアウトという文字とその周りの部分)で反応させたいという意味です。 回答者様のおっしゃられているように、div要素にCSSを追加しましたが、うまくいきませんでした。 具体的には、hover時に背景色をblueに変更するように記述していますが、文字の部分の背景色のみ青く変化してしまいます。
Kaiser

2019/01/16 10:43

下記消してみてください。 .header-list a { display: block; text-align: center; vertical-align: middle; text-decoration: none; color: white; font-size: 20px; } .header-list a:hover { color: black; opacity: 0.4; }
_k0u

2019/01/16 12:59

返信遅くなりましてすみません。 aタグのhover部分を削除するとマウスを乗せたときの色の変化自体がなくなってしまいます。
guest

0

CSS

1<style> 2.header-list { 3 text-align: center; 4} 5.header-list a { 6 display: inline-block; 7 text-decoration: none; 8 color: red; 9 font-size: 20px; 10} 11.header-list a:hover { 12 color: black; 13 opacity: 0.4; 14} 15</style> 16<div class="header-list"> 17<a href="#" class="logout">ログアウト</a> 18</div> 19

追記

CSS

1<style> 2.header-list { 3 display:block; 4 border:solid 1px #000000; 5 text-align: center; 6} 7.header-list a { 8 text-decoration: none; 9 color: red; 10 font-size: 20px; 11} 12.header-list:hover a{ 13 color: black; 14 opacity: 0.4; 15} 16</style> 17<div class="header-list"> 18<a href="#" class="logout">ログアウト</a> 19</div>

投稿2019/01/16 08:54

編集2019/01/16 09:34
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_k0u

2019/01/16 09:05

ご回答誠にありがとうございます。 「display: inline-block」に変更しました。 また、「text-align: center」の記述を「.header-list」内に変更し、「vertical-align: middle;」の記述を消去しました。 そのほかに回答者様と自分のコードの違いを認識できなかったのですが、何か間違いはありますでしょうか。
yambejp

2019/01/16 09:14

もとのソースはdivに乗った時点でcolorが変わります。 私のソースは文字に乗ったときだけcolorが変わります。 やりたいことは違うのでしょうか?
yambejp

2019/01/16 09:35

逆なのかな? .header-listにhoverしときのaのスタイルを変える追記しました
_k0u

2019/01/16 09:42

追記ありがとうございます。 divに乗った(「ログアウト」という文字とその周りの範囲)時にcolorを変化させたいという意です、まぎらわしい質問で申し訳ありません。 回答者様の追記を参考にコードを編集しましたが、やはり文字にのった時のみcolorが変化してしまいます。
yambejp

2019/01/16 09:45

.header-list に枠線をひいてあるのは分かりますよね? その枠線の中にマウスがのれば文字色がかわりませんか? もしかして背景色のことを言っているのですかね?
_k0u

2019/01/16 09:57

追記ありがとうございます。 いろいろ試してみましたが、枠線内にマウスがのっても文字の色は変化しなかったです。。
yambejp

2019/01/16 10:01

動作確認の環境:スマフォ、タブレット、PC ブラウザの種類やバージョンを質問に追記ください
_k0u

2019/01/16 10:09

動作環境についての情報を更新しました。
guest

0

ベストアンサー

a要素を「display: block;」化したのであれば、ブロック要素になりますので、高さの指定が必要です。

提示のコードだと指定が無いので「width:auto;」「height:auto;」となり、横は一杯まで確保されますが、高さが文字分しか確保されません。

「width:auto;」or「width:100%;」は状況に合わせれば良いです。

CSS

1.header-list a { 2 display: block; 3 text-align: center; 4 vertical-align: middle; 5 text-decoration: none; 6 color: white; 7 font-size: 20px; 8 width: 100%; /* ← 追加 */ 9 height: 100%; /* ← 追加 */ 10}

投稿2019/01/19 09:30

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問