• ベストアンサー

A:link等の指定をstyle属性でタグへ埋め込みたい

CSSで、 A:link A:visited A:active A:hover の指定をする際、別ファイルのスタイルシートを読み込む等の方法ではなく、 style属性を使って直接タグ内へ埋め込むことはできるのでしょうか。 例えば、 <table style="A:link { font-size: 99 }"> のような使い方をしたいのですが・・・うんともすんともです・・・

  • HTML
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

まずは、cssの書き方ですが・・・ インラインで書く場合、a:link { font-size: 99 }という様な書き方はしません。 この様な書き方は、headタグ内又は外部ファイルの場合になります。 インラインと言うのは<div style="padding:3px; text-align:right;">などの書き方をいいます。 a要素のcssを指定したい場合かつhtmlに直接記入するには、headタグ内に下記の様に書くしか無かった気がします。 <style type="text/css"> <!-- a:link { color: #0000ff; } a:visited { color: #000080; } a:hover { color: #ff0000; } a:active { color: #ff8000; } --> </style> そもそも、インラインで書くと後々面倒だと思いますけど・・・

zyousuke
質問者

お礼

koooooooolさん、ご返信ありがとうございます。 私も、たぶん無理なんだろうなぁと、うすうす感づいていたところです。。。 まあ、無理なら無理で仕方がないけど、念のため確認してみようと、質問に参ったわけです。 さて、無理という確認がとれて気持ちがスッキリしたところで、いさぎよく代替手段を検討します!

その他の回答 (2)

  • think49
  • ベストアンサー率59% (285/482)
回答No.3

> さて、無理という確認がとれて気持ちがスッキリしたところで、いさぎよく代替手段を検討します! 目的は何でしょうか? もし目的が「特定のリンクだけスタイルを変更したい」ということなら、class属性と複合させることで対応できます。 <style type="text/css"> a.test:link { color: green; } a.test:visited { color: #000080; } a.test:hover { color: yellow; } a.test:active { color: #ff8000; } </style> <a class='test' href='#'>test</a>

zyousuke
質問者

お礼

think49さん、ご返信ありがとうございます。 目的はそのとおりです。 しかし<head>タグは共有部分としてリテラルで作成してしまったため、修正したくないという思いがあります。 そこでタグ内に直接スタイルを埋め込むという方針にしました。 しかし代替手段は思い浮かばなかったので 結局No.2abrilさんの回答にもあるように、 <a href="#" style="font-size: 99">リンク部分</a> のように妥協しました。

  • abril
  • ベストアンサー率69% (388/560)
回答No.2

> <table style="A:link { font-size: 99 }"> この書き方は何もかも間違ってますね。 ・a要素に対するスタイルをtable要素のstyle属性に指定している。 ・style属性として記述する場合はstyle="~"の中は、単にダイレクトに各プロパティの指定をセミコロンで並べなくてはだめ(つまり外部スタイルとしてまとめる場合の{ ~ }の中だけを直接記述するという事)。 ・style属性として記述する場合は、疑似要素":link"等は指定できない。 CSSもHTMLも決まり事によって動いている世界ですから当てずっぽうはNGです。ちゃんとルール(文法)を調べてから試みましょう。すぐ調べられる事ですから。 ちなみに、a要素に対するスタイルを、style属性として各タグ毎に記述したいのであれば、以下の様にしかできません。 <a href="#" style="font-size: 99">リンク部分。疑似要素は指定できないので、リンクの操作状態(訪問済・未訪問・マウスオーバー・クリック中)に関わらず常にこのスタイルが適用されるのみ。</a>

関連するQ&A

  • aタグに直接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; } お手数お掛けしますが、どなた様かご教授いただけますようお願い致します。

    • ベストアンサー
    • HTML
  • Linkタグのcharset属性について

    Linkタグにcharsetという属性があり、 UTF-8を設定してUTF-8エンコーディングのスタイルシートを作成しました。 そしてHTMLドキュメント内に ##################################### <META http-equiv=Content-Type content="text/html; charset=shift_jis"> <LINK href="test.css" type=text/css rel=stylesheet charset="UTF-8"> ##################################### と指定しましたが上手くいきません。 試しにHTMLドキュメントはそのままにして スタイルシートだけをSJISに変更してみたところ 上手くいきました。 Linkタグのcharset属性にはUTF-8は指定できないのでしょうか?それとも指定の仕方が間違っているのでしょうか? ●環境 OS:Win2000 ブラウザ:IE5.5 SP2

    • ベストアンサー
    • HTML
  • アンカータグのスタイルシート指定

    どうも、スタイルシートを書く上で困っていることがありまして質問します。 スタイルシートにおいてa,a:link,a:visited,a:activeといった属性でアンカーの装飾ができると思いますが、今回これで困ったことになりました。 「黒い背景では白い文字のリンクを、白い背景には黒い文字のリンクを」、という形を1つのページ上で行う必要がありスタイルを書いてみたのですがなかなかうまくいきません。 それぞれfontタグで指定すれば色は変わったもののtextdecoration:noneを使用したいためそれでは解決になりません。 どなたかよろしくお願いします。

  • スタイルシートの「A」とは何ですか?

    ホームページビルダー13を使っています。 スタイルシートマネージャーを開くと、 「ルール情報」のなかに 「A  A:link A:visited A:hover」 というのがあります。 「A:link」「A:visited」「A:hover」は、 「A:link」はいわゆる通常のリンクの表示の状態 「A:visited」はすでに訪れたときの状態 「A:hover」はポインタが上にきたときの状態 という解釈で良いでしょうか。 疑問なのは単に「A」となっているタグです。 これはどのようなタグなのでしょうか。

  • style属性を使って擬似クラスを表現することは可能ですか?

    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属性を用いて擬似クラスの指定の仕方が分かりません。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • スタイルシートについて

     スタイルシートでフォントサイズを指定する場合、 .style○○○ { size: 12px; }だと思うのですが、  次のリンクの3つをスタイルシートで上記のフォントサイズのようにあらわす場合どう表記すれば良いのでしょうか。 a:link { color: #0000cc; } a:visited { color: #000080; } a:active { color: #ff0000; }  一括でstyle○○になるのでしょうか。それとも3個しれぞれスタイルシートに登録するのでしょうか。  お願いします。

  • リンクだけが指定にない色になります。

    テキストの色を全体に統一したいのですが、リンク部分のみ指定にない色(青)になります。 <STYLE type="text/css"> <!-- a:hover { color:ffffff; } --> </style> <BODY TEXT="CC0033" VLINK="CC6666" ALINK="CC6666"> <A HREF="link.html "STYLE="TEXT-DECORATION:NONE;"> <FONT SIZE=-2>link</FONT></A> 直接リンク文字に色を指定すれば直るのですが、スタイルシートでマウスがリンクに触れた時色が変わるという設定が効かなくなるようです。この設定を外さず、任意の色に変える方法はありませんでしょうか。 そのようなサイトを知っている、でも構いません。どうかよろしくお願いいたします。 (powermacG4/OS9/IE5/NN4.7/Jedit4.0)

    • ベストアンサー
    • HTML
  • リンクの文字色を別々に指定したい(オンマウスで変わるタグ)

    メモ帳でHPをちまちま作ってたのですが、ちょっと困ったことが出てきたので質問させて下さい。 同じページのリンクの文字色を一括で変更するのは… <style type="text/css"> <!-- a:link { color: maroon } a:visited { color: maroon } a:hover { color: white } a:active { color: black } --> a { text-decoration: none; } </style> ですよね。 それと個別に変更するのが… <body link="maroon" vlink="black" hover="white" alink="maroon"> </body> なんですが、個別設定でカーソルをのせた時色が変わるタグがどうしても分かりません。 上の設定を踏まえた上で、オンマウスで色が変わるタグを教えて下さい。よろしくお願いします。

  • CSSの文字指定

    <style type="text/css"> <!--A:link {color:#000055; text-decoration:none; } A:visited {color:#000055; text-decoration:none; } A:hover {color:#ff3300; text-decoration:underline; }--></style> 上部はcssのリンクですが、これに加えて文字のサイズ指定とフォントのフェイス指定もしたいです。 たとえば、MSゴシック,平成角ゴシックなど。 どう加えればよいですか? <style type="text/css"> font:16px "MS Pゴシック",平成角ゴシック,</style>とやってもダメでした と

    • ベストアンサー
    • HTML
  • a:hoverの下線指定が反映されない

    htmファイルのheadタグ内に以下のようなCSSの記述をしていますが、なぜかa:hoverのunderlineの部分だけが反映されません。はじめは一部のリンク箇所だけが反映されなかったのですが、訪問済みになった箇所がどんどん反映されなくなってしまい、しまいにはすべての箇所が反映されなくなりました。ただし、それはunderlineのみでfont colorやboldはしっかり反映されているのです。 これはなぜでしょうか? ちなみにscriptの記述は一切していません。 最初は同様の記述を外部ファイルにしていたのですが うまく読み込めていないのかと思って、htmファイル内に 記述しましたがダメだったというわけです。 <style type="text/css"> <!-- body { font-size: 10.5pt; line-height: 130%} table { font-size: 10.5pt; line-height: 130%} a:hover{ text-decoration: underline; color: #FF0080; font-weight: bold} a:active { text-decoration: none} a:link { text-decoration: none} a:visited { text-decoration: none} --> アドバイスお願いいたします。

    • ベストアンサー
    • HTML

専門家に質問してみよう