あなたの映画力を試せる!POPLETA映画検定(無料) >>

CSSの読み込み方には3通りあります。

1)<head>~</head>内にstyle要素をマークアップする。
2)外部CSSファイルをHTMLに読み込ませる。
3)任意のタグにstyle属性を指定する。

そこで質問なのですが、3)のstyle属性で擬似クラスを指定する事は可能でしょうか?

1)と2)の方法であれば、

div a:link { color : #fff ; background : blue ;}
div a:visited { color : #fff ; background : purple ;}
div a:hover { color : #fff ; background : aqua ;}
div a:active { color : #fff ; background : purple ;}

のように指定すればよいだけですが、

3)の方法、つまりstyle属性を用いて擬似クラスの指定の仕方が分かりません。

宜しくお願いします。

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

A 回答 (3件)

おそらくCSSだけではできないのでは。


http://www.kanzaki.com/book/html/spec-nofollow.h …
こちらに少し古い時点での草案が載っていますが、この
<a href="http://foo.com" style="{color: blue} :hover {color: green}">
と言う書式をIE6とFirefox1.5で試してみたけど駄目でした。
javascriptとかで処理するんじゃないですかね。必要な人は。
    • good
    • 0
この回答へのお礼

私も
<a href="URI" style=":hover : silver ;">リンク</a>
とか
<a href="URI" style="a:hover : silver ;">リンク</a>
など試してみたのですが駄目でした。

普段は外部スタイルシートで全て済ましているので、style要素による指定はしていませんが、cssの復習をしている時に、ふとこの点が疑問に思い、質問させていただきました。
問題点に確信がもてました。ありがとうございました。

お礼日時:2006/08/17 16:31

結論から言うと、タグのstyle属性では擬似クラスの指定は不可能だったと思います。



質問者さんが何故そこまでstyle属性にこだわるのかがわかりませんが、
例えば複数のaタグにそれぞれ別々の内容の擬似クラスを指定したい場合は、
class属性やid属性を用いて指定するのが一般的ではないでしょうか?
    • good
    • 0
この回答へのお礼

普段は外部スタイルシートでclass属性,id属性を使って指定していますが、style属性による指定に関する今回の疑問が解決してすっきりしました。
ありがとうございました。

お礼日時:2006/08/17 16:34

なにがしたいかいまいちわかりませんが、


こういうコトでしょうか?

<html>
<head>
<style type="text/css">
.hidden{
display:none;
}
</style>
<script language=javascript>
function redhidden(){
var divs=document.getElementsByTagName("*");
for (var i=0;i<divs.length;i++){
if(divs[i].style.color=="#ff0000") divs[i].className="hidden";
}
}
</script>
</head>
<body>
<div style="color:#ff0000;">aaa</div>
<div style="color:#00ff00;">bbb</div>
<div style="color:#0000ff;">ccc</div>
<div style="color:#ff0000;">ddd</div>
<form>
<input type="button" value="赤い段落を隠す" onClick="redhidden()">
</form>
<body>
</html>

この回答への補足

説明不足ですみません。
質問の趣旨は、HTML文書中にstyle属性を記述して、その値に擬似クラスを指定する事は可能かどうか。
可能な場合は、どのような記述をすればよいのかという意味です。

例えば、HTML文中にリンクテキストを記述します。

例)
<div>
<a href="URI" title="リンクテキスト">リンクテキスト</a>
</div>

ブラウザで表示すると、画面上に「リンクテキスト」の文字が表示されます。

このリンクテキストにCSSで装飾を施すとします。
CSSの適用方法は、【style属性】を用いることとします。

従って、外部ファイルとしてCSSを読み込む方法は今回は考慮しない事とします。
→ <link rel="stylesheet" type="text/css" href="style.css" />

また、style要素による装飾も考慮しない事とします。

<head>
<title>...</title>
<style>
a:hover { background : silver ; }
</style>
</head>
________________________

あくまで今回は【style属性】による装飾に限定します。
【style属性】を用いて、仮にリンクテキストの背景を黄色にしたいと思います。

▼source
<div>
<a href="URI" title="リンクテキスト" style="background : yellow ;">リンクテキスト</a>
</div>

背景は黄色になりました。

では、このリンクテキストに、マウスカーソルが重なっている状態のときにだけ背景をsilverにするにはどうしたらよいか。
※ただし、JavaScriptを使用せず、CSSのみ用いることとする。

この場合に用いるのが、CSSの擬似クラスだと思います。
しかし、通常の装飾(単に背景を黄色にするなどの)はstyle属性で指定できても、擬似クラス(a:hover,a:active等)をstyle属性の値として指定することが可能かどうか疑問に思いまして、今回質問させていただきました。宜しくお願いします。

補足日時:2006/08/17 00:04
    • good
    • 0

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

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

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

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

Qaタグに直接style=""で:hoverをしたいしたい

お世話になります。
下記のaタグのCSS記述部分を直接<a href="" style="..."として記述するには
どのようにすればよいのでしょうか
hoverをaタグ内に直接指定しようとしていろいろ調べたのですが、解説しているサイトを見つけられなくて、質問させてもらってます。
A:link.menu {
text-decoration:none;
FONT-SIZE: 12px;
COLOR: #0000ff;
}
A:visited.menu {
text-decoration:none;
FONT-SIZE: 12px;
COLOR: #0000ff;
}
A:hover.menu {
FONT-SIZE: 12px;
color:#0000ff;
background-color:#66bce2;
}
A:active.menu {
FONT-SIZE: 12px;
COLOR: #0000ff;
}

お手数お掛けしますが、どなた様かご教授いただけますようお願い致します。

Aベストアンサー

<a href="http://www.yahoo.co.jp" style="text-decoration:none;FONT-SIZE:12px;COLOR: #0000ff;"
onmouseover="this.style.backgroundColor='66bce2'"
onmouseout="this.style.backgroundColor=''">やふう</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の方も修正する方法でもよけ...続きを読む

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Qforeachで回った数を表示したい

単純な質問ですみません。
====
//getTestlistは別ファイルで定義済み。
<?
$testlist=getTestlist();
foreach($testlist as $test){
?>


<? } ?>
====
例えば↑こんなふうにforeachで$testlistが存在するだけ回したとします。
そのときに何回まわったか?($testが何件あったか?)だけを表示したいのですが、そんなことってできますか?
表示したい位置は<? } ?>の外側にと考えています。
あさってな質問でしたらすみません。
phpVer 4.3

よろしくお願いいたします。

Aベストアンサー

<?
$testlist=getTestlist();
$n=0;
foreach($testlist as $test){
$n++;
?>
<?}?>

<?=$n?>回
とかでよいかと思います。

途中でbreakなどが無ければ
<? echo count($testlist) ?>でも良いかも知れません。

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Q文字列から、特定の文字を削除したい

アンケートで入力された値を受け取り、メールで送信しているのですが、受け取った値から、特定の文字列を削除することは可能でしょうか?

例えば電話番号の入力の場合、
03-xxxx-xxxx →03xxxxxxxx
077-xxx-xxxx →077xxxxxxx
のように、-(ハイフン)が入力されていたら、-を削除した文字列に置換してメール送信したいのです。
入力する時に、3つのテキストエリアに分けるのは諸事情でできないので、特定の文字を削除する関数か処理方法がありましたら、教えていただきたいです。
よろしくお願いします。

Aベストアンサー

str_replace
http://itbtech.itboost.co.jp/man/php_man/function.str-replace.html

<?php
$orig_telno = "03-xxxx-xxxx";

$telno = str_replace("-", "", $orig_telno);
echo $telno;

03xxxxxxxx

“PHP 文字列” あたりをキーワードに検索すれば
そんなに難しいものでもないような。

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 {

にするだけ

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;


人気Q&Aランキング