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

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

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

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

CSS

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

Q&A

解決済

2回答

973閲覧

title の指定

ryohasegawa

総合スコア437

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/03/06 15:14

編集2017/03/06 15:27

html

1<div class="text1"> 2 <a title="テキスト1">テキスト1</a> 3</div> 4<div class="text2"> 5 <a title="テキスト2">テキスト2</a> 6</div>

上のコードでおそらく、テキストをホバーさせた時にテキスト1と表示されると思うのですが、CSSでclassがtext1のtitle="テキスト1"だけにスタイルを適応させたい時にどういう風にCSSを書いたらいいですか?
セレクタと言うやつですかね?

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

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

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

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

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

guest

回答2

0

どのテキストかわかりませんが、質問者さんのコードでは、テキストをホバーさせていない時にもテキストが表示されるのですが...
CSSでclassがtext1のtitle="テキスト1"の文字のところにスタイルを適応させたい時、というのは以下のような挙動でしょうか?

HTML

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .text1 a[title="テキスト1"]:hover { 13 color: #ffff00; 14 } 15 </style> 16</head> 17<body> 18<div class="text1"> 19 <a title="テキスト1">テキスト1</a> 20</div> 21<div class="text2"> 22 <a title="テキスト2">テキスト2</a> 23</div> 24</body> 25</html>

追記

HTML

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .text1 a[title]:hover::after { 13 display: block; 14 position: absolute; 15 top: 1.0em; 16 left: 1.0em; 17 width: 12em; 18 border: #000 solid 1px; 19 background: #fff; 20 color: #000; 21 content: attr(title); 22 z-index: 2; 23 } 24 </style> 25</head> 26<body> 27<div class="text1"> 28 <a title="テキスト1">テキスト1</a> 29</div> 30<div class="text2"> 31 <a title="テキスト2">テキスト2</a> 32</div> 33</body> 34</html>

投稿2017/03/06 15:28

編集2017/03/06 15:56
s8_chu

総合スコア14731

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

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

ryohasegawa

2017/03/06 15:33

<a title=""></a>でつけたtitleはhover指定しなくても表示されるんじゃないですか?
ryohasegawa

2017/03/06 15:34

それと、スタイルを変えたいのは、aタグのスタイルを変えたいのではなく、表示されるtitle=""の中のテキストのスタイルを変えたいんです。
ryohasegawa

2017/03/06 15:39

わかってもらいやすいのはyoutubeの動画のタイトルをホバーするとはいりきっていないテキストも表示されますよね? で、認証バッジをホバーすると認証済みとテキストが表示されると思います。 これはtitle=""の中にそれぞれのテキストが入ってました。(確認済み)なので、それぞれで表示形式を変えたいので、CSSでスタイルを指定したいと思っている次第です。
ryohasegawa

2017/03/06 15:39

非常にわかりづらい説明でごめんなさい。
ryohasegawa

2017/03/06 15:51

回答頂いて、調べて見た結果変更はできないみたいです。 回答いただきありがとうございました。
s8_chu

2017/03/06 16:00

解決済みになってしまいましたが... title属性にスタイルを設定することはできませんが、追記したようにするとtitle属性にスタイルを設定しているような挙動を実現できます。
ryohasegawa

2017/03/07 08:05

ありがとうございます。 参考にさせていただきます。
guest

0

ベストアンサー

そこはブラウザ依存なのでブラウザごとに表示が違います。スタイルはできません。
ツールチップを表示したければ別途CSSやJavaScriptで行います。

【H33: title属性を用いて、リンクテキストの文言を補足する|WCAG 2.0 実装方法集】
http://waic.jp/docs/WCAG-TECHS/H33

現在のグラフィカルなユーザーエージェントは、title属性の内容表現をコントロールするメカニズムを提供していない。利用者は、ツールチップのテキストのサイズを変更したり、前景色と背景色をコントロールしたりできない。

投稿2017/03/06 15:42

kei344

総合スコア69364

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

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

ryohasegawa

2017/03/06 15:44

それじゃあYoutubeのタイトルとバッジの表示はJavaScriotでスタイリングしてるということでしょうか?
ryohasegawa

2017/03/06 15:51

調べてみた結果、やはり変更できないようなのでベストアンサーに選ばさせていただきました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問