- ベストアンサー
CSSでリンクにクラスを設定するには？
a:link { color: #007700;font-size:15px;font-weight:bold;} こういうものにクラスを設定する場合、 .class1 はどの位置に埋め込めればいいんでしょうか？ いろいろやりましたがうまくいきません
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- Firefoxでのスタイルシートの記述について
Firefoxでのスタイルシートの記述について ４つの文字を配置するために (1) font-size:18px; font-weight:bold; color:#000000; margin:127px 72px 0px 40px; (2) font-size:18px; font-weight:bold; color:#000000; margin:64px 72px 0px 40px; (3) font-size:18px; font-weight:bold; color:#000000; margin:101px 72px 0px 40px; (4) font-size:18px; font-weight:bold; color:#000000; margin:65px 72px 0px 40px; と指定しました。IEでは思った位置になったのですが Firefoxでは(2)(3)(4)が下のほうにずれてしまいました。Firefoxに合わせるとIEでの位置が上にずれてしまい頭を悩ませています。 記述の間違いや、アドバイスなどあれば教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- CSS：スタイルシートでテキストリンク
教えてください！！ 外部ファイルのスタイルシート（ＣＳＳ）を使って、各ページへジャンプするテキストリンクをマウスオーバー時に太字になるように設定しています。 ＩＥ6.0では問題なく起動していますが、ＮＳ7.1,Firefox1.0では、機能していません。何か対処方法はないでしょうか？ ↓私の記述は以下の通りです↓ 【外部ファイルへのリンクの記述】 <link rel="stylesheet" type="text/css" href="../menu.css" title="menu" /> 【外部ファイル内のＣＳＳの記述】 .menu { font-family: "ＭＳ Ｐゴシック", Osaka; font-size: 12px; font-style: normal; line-height: 14px; color: #FFFFFF; text-decoration: none; } .menu a:link { color: #FFFFFF; text-decoration: none; } .menu a:visited { color: #FFFFFF; text-decoration: none; } .menu a:hover { color: #FFFFFF; font-weight: bold; text-decoration: none; } .menu a:active { color: #FFFFFF; font-weight: bold; text-decoration: none; }
- ベストアンサー
- その他（プログラミング・開発）
- リンク文字を好きな位置に表示したい
お忙しいところすいません。 ホームページ（トップページ）上において、リンク文字を好きな位置に表示したいのですがどのようにしたらうまく表示できますか？。 現在、以下のように記述していますが、これだと改行して表示するだけなので、ランダム配置させたいと思っています。 これは可能でしょうか？。 また、そのようなサンプルサイトがあれば教えていただきますでしょうか？。 よろしくお願いいたします。 ＜html記述＞ <div id="menu"> <a href="test1.html" title="トップ" class="moji1">トップ</a> <a href="test2.html" title="テスト" class="moji2">テスト</a> </div> ＜css記述＞ .moji1{ margin : 100px 10px 50px 60px; font-family : Arial,'ＭＳ Ｐゴシック',sans-serif; font-weight : bold; font-size : 48px; } .moji2{ margin : 50px 10px 80px 260px; font-family : Arial,'ＭＳ Ｐゴシック,sans-serif; font-weight : bold; font-size : 48px; }
- ベストアンサー
- HTML
- firefoxでCSSがうまく反映されないです！
スタイルシート（外部）で.moji{color:#;font-weight:bold} .moji a:link, .moji a:visited,{color:#f66;font-weight:bold}という具合に各クラスにリンクした時の色を指定するとIEでは反映されてもfirefoxでは反映されません。どうすれば両方にうまく反映されるのでしょうか？ 教えてください！
- ベストアンサー
- HTML
- CSSの正しい記述の仕方
CSSの記述の仕方なんですが、下記のような書き方は正しいのでしょうか？ .f14 {font-size: 14px;} .bold {font-weight: bold;} .red {color: #FF0000;} <p class="f14 bold red">あいうえお<div> HTMLには構成要素、CSSにはデザイン要素のみを記述と考えると正しくない気がしますが、 何度も使うような場合は、この方がCSSが短くなるので使っています。 どうなんでしょうか？ 気にしすぎでしょうか。
- ベストアンサー
- HTML
- CSSについて
こんにちは。 現在、ホームページの制作をしています。 早速ですが、 floatを使用し、左右に「お知らせ」と「PR」の見出しをつけようと思ったのですが・・・。 http://www5.atpages.jp/ri19960914/souzou.png ↑のように、ひとつ段落ができてしまいます。 このようにしたいのです。↓ http://www5.atpages.jp/ri19960914/souzou2.png CSSはこちらです。↓ #mainbody .titleall { float:left; color:#fff; font-size:12px; font-weight:bold; background-color:#636; height:10px; margin:0 auto; width:800px; padding:8px; } #mainbody .titleleft { float:left; color:#fff; font-size:12px; font-weight:bold; background-color:#636; height:10px; margin:0 auto; width:370px; padding:8px; } #mainbody .titleright { float:right; color:#fff; font-size:12px; font-weight:bold; background-color:#636; height:10px; margin:0 auto; width:370px; padding:8px; } #mainbody ul.all { width:800px; white-space:normal; } #mainbody ul.left { float:left; width:350px; } #mainbody ul.right { float:right; width:350px; } まだCSS初心者なので、不適切なCSSもあるかもしれません。 htmlソース↓ （途中略） <div id="mainbody"> <div class="titleleft">お知らせ</div> <ul class="left"> テスト（ここにお知らせの文字） </ul> <div class="titleright">PR</div> <ul class="left"> ここに広告のhtmlタグ </ul> どなたか、 http://www5.atpages.jp/ri19960914/souzou2.png のようになる方法を教えていただければ、幸いです。 お願いします。 追記：画像URLを開くと、Forbiddenエラーが出るので、 ご面倒だとは思いますが、URLボックスに直接アドレスを 入力してくださるよう、お願いします。 追記2：分からない点があったら、お願いします。
- ベストアンサー
- CSS
- CSSで表示が異なってしまう
下記のようなCSSを使っているのですが、リンクが入ると表示が異なってしまいます。 画像の下のようにしたいのですが、どうすればよろしいでしょうか？ よろしくお願いします。 ■ CSS A:link{ color:#0095ff; text-decoration: none;} A:visited{ color:#0095ff; text-decoration: none;} A:hover{ color:#00efff; text-decoration: underline;} A:active{ color:#00efff; text-decoration: underline;} .style02{ padding:3px 0 0 6px; margin-bottom: 5px; font-size:16px; font-weight:bold; background-image:url(../_images/h_02.gif); background-repeat:repeat-x; border: 1px solid #000000; color: #000000; } ■ ソース <a class="style02" href="http://www.hogehoge.com">トップページ</a> <div class="style02">トップページ</div>
- ベストアンサー
- HTML
- ｃｓｓで中央よせ
CSSでwidthはパーセントで設定する場合テキストボックス、ボタン、リンクを一列に 中央配置したいのですがどうしたらいいのでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--Android 1.6対応--> <style type="text/css"> <!-- div#topCouponSearch { background-image: url("./top_coupon_search_bg.jpg"); display: block; height: 26px; margin-bottom: 1px; width: 100%; } .topCouponSearcha { display: block; font-weight: bold; height: 15px; padding: 5px 0 0 1px; width: 100%; } .topCouponSearcha2 { background-color: #FFFFFF; background-image: url("./spacer.gif"); color: #999999; height: 10px; padding: 3px 0 0; width: 40%; font-size: 10px; } .topCouponSearcha3 { font-size: 11px; font-weight: normal; margin-left: 3px; } button#getad { font-size: 10px; } --> </style> </head> <body> <form id="form1" action="" method="post" name="form1"> <div id="topCouponSearch"> <span class="topCouponSearcha"> <input id="address" class="topCouponSearcha2" type="text" value="" name="address" style="color: #999999;"> <button id="getad">検索</button> <span class="topCouponSearcha3"> <a href="?act=u05">店舗一覧</a> </span> </span> </div> </form> </body> </html>
- ベストアンサー
- CSS
- CSSでa要素全体をリンク出来るようにしたいのですが
CSSでa要素全体をリンク出来るようにしたいのですが、 Firefoxなら出来るもののIE8、Sleipnirでは文字の上しかリンクされません。（文字の上にマウスを当てると全体の色は変わったりするのですが。） 5時間くらい迷ってるので少しでも分かる方、いらっしゃいましたら 何でもお願いします。。 色々検索してソースに付け加えたりしてるので適切ではないものが多々あるかと思いますが、とにかくCSSソースをそのまま載せます。 div#link ul { list-style: none outside; overflow : hidden; padding: 0; margin: 0; letter-spacing:7px; font-weight: bold; } div#link li a { display: block; width: 100%; overflow : hidden; padding: 5px; padding-left: 20px; padding-right: 0px; font-size: 14px; color: #0000ff; } div#link li a:hover { display: block; overflow : hidden; background-color: #ffff33; color: #000; } HTMLは <div id="link"> <ul> <li><a href=".html">あいうえお</a></li></ul></div>です。 なにとぞ宜しくお願い致します。
- ベストアンサー
- HTML
- IEでCSSのアンカー色指定が反映しない
<style type="text/css"> a:visited { color:blue;} div.testB { padding-left:12px; clear:both; } div.testB a{ color:#000000; text-decoration:none; font-weight:bold; } div.testB a:hover{ color: #cc0000; font-weight:bold; text-decoration:underline; } </style> <div class="testB"> <div><a href="#">リンク</a></div> </div> このようなソースで、FireFoxでは理想どおり表示されるのですが、IEではtestBで指定したリンク色が反映されず、先のa:visited{}のカラーでボールドだけ効いた状態になってしまいます。hoverしても色は変わらずです。visitedの指定がなければ、きちんと反映されるようなのですが… 解決策ありますでしょうか。 よろしくおねがいします。
- ベストアンサー
- CSS
