- 締切済み
CSSのフォント設定・指示で、複数のフォント指示IDを組み合わせたIDがつくれないでしょうか?
CSSですが、フォント記述が面倒で困っております。 記述したものを組み合わせる宣言をして、XHTMLマークアップの方ではその組み合わせ名だけ記述して済むようにできないものでしょうか? または、他の方法で簡素化合理化できる方法があればそれでも結構です。 ご教授いただけましたら幸いです。 【フォントサイズ11px】フォントサイズだけを指定したID 【フォントサイズ12px】フォントサイズだけを指定したID 【フォントサイズ14px】フォントサイズだけを指定したID 【リンクカラー緑,hover赤(下線:緑)】リンクだけを指定したID 【リンクカラー白,hover緑(下線:白)】リンクだけを指定したID 【フォントカラー黒(薄色背景用)】フォントカラーだけを指定したID 【フォントカラー白(濃色背景用)】フォントカラーだけを指定したID 【使用する組み合わせ宣言1】上記IDのどれとどれを組み合わせたかを指定したID 【使用する組み合わせ宣言2】上記IDのどれとどれを組み合わせたかを指定したID というようにして、XHTMLマークアップの方では、例えばテーブルに文章を記述したいなら、テーブルタグに上記の【使用する組み合わせ宣言】のID名だけを記述すればそれでOK、というようにできれば楽になると思うのです。 もっといいのは、CSSで【使用する組み合わせ宣言】のIDは記述必要なく、XHMLの方で組み合わせ宣言できれば最高です。 実際を例に出すと、 ------------------------------------------------------------ /* リンク以外のフォント設定 */ ------------------------------------------------------------ #font_black { text-align:left; color: #FFFFFF; font-size: 11px; line-height: 120%; } ------------------------------------------------------------ /* リンク部分だけのフォント設定 */ ------------------------------------------------------------ #font_link_green a:link { color: #d0ae22; text-decoration: none; border-bottom: 1px solid #d0ae22; } #font_link_green a:visited { color: #d0ae22; text-decoration: none; border-bottom: 1px solid #d0ae22; } #font_link_green a:active { color: #ff0066; text-decoration: none; border-bottom: 1px solid #d0ae22; margin-bottom: 0px; } #font_link_green a:hover { color: #fde582; text-decoration: none; border-bottom: 0px; } とCSSで記述しておき、XHTMLの方では、 <table class="#font_black .font_link_green"> などと記載するような(この書き方はあくまで例です)感じです。 このように、CSSのフォント記述において、何か簡素化・合理化する記述方法はないものでしょうか? 普通にやっていたらソースは増えるし色の変更などであちこち書き直す必要があるしで(置換不能なケースもありますし)面倒この上ないですね。 宜しくお願い致します。
- みんなの回答 (7)
- 専門家の回答
関連するQ&A
- divでくくった中の要素にa link
以下のdivでくくった中の要素にa link等の カラーの指定をしたいのですが、どのように記述したらよいでしょうか。 div.main { width: 560px; padding-top: 15px; padding-left: 20px; line-height: 130%; } --------------- div指定していないところでは a:link, a:visited { color: #000000; font-size: 12px; line-height: 120%; text-decoration: none; } a:hover { color: #0066CC; text-decoration: underline; } a.navia:link, a:visited { font-size: 8pt; color: #666666; text-decoration:none;} a.navia:hover { color: #FF6633 ; text-decoration:underline } の2つを記述しています。
- ベストアンサー
- HTML
- 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 IDごとのCLASS指定
以下のようなCSSがあった場合に、それぞれのIDに同じ名前で中身の違うCLASSを指定する事は出来るのでしょうか? #main{ margin:0; padding:0; background: transparent; float : left; font-size : 0.8em; } #menu{ margin:0; padding:0; width:140px; float : left; font-size : 0.8em; background :url('img/back.gif') no-repeat left top; color:#17F600; } #mainにはこれ、 .txt { font-size : 1em; line-height : 120%; margin:0 0 5px 380px; padding:0 0 0 30px; text-align : left; color:#69788A; } #menuにはこれ .txt{ font-size : 1em; padding:0 0 0 10px; margin:5px 30px 5px 0; text-align : left; color:#69788A; border-bottom:1px solid #CFDEEF; } といったかんじなのですが…
- ベストアンサー
- HTML
- 外部CSSでリンクカラー指定
外部CSSでwebサイトを作っています。 リンクカラーの指定をbody全体にしているのですが、 フッターだけ色を変えることはできますか? その際フォントカラーも変えられればと思っています。 現在のCSSは a{/*リンクされた文字*/ color:#002AD1; font-style:normal; text-decoration:underline; } a:link {/*未訪問のリンク*/ color:0000ff; font-style:normal; text-decoration:underline; } a:visited {/*訪問後のリンク*/ color:#002AD1; text-decoration:underline; } a:hover {/*マウスをのせたとき*/ color:#335BFF; font-style:normal; text-decoration:underline; } a:active {/*クリック中*/ text-decoration:none; } 現在サイト全体のフォントカラーはグレーで、 リンクは上記の通り青系です。 footerは白から濃い紺の帯にするので、 文言やリンクが見えなくなってしまうのです。 フッターのCSSに個別にカラー指定しても変わりません。 .footer { border : none; width : 838px; heigth : 100%; text-align: left; padding : 0px 0px 0px 20px; color: #ffffff; ←このようにフォントを白にしても変化がないです line-height: 160%; font-size: 11px; } 何が原因でしょうか? またそのようにする方法があれば教えてください。 よろしくお願いいたします。
- ベストアンサー
- CSS
- blog CSSのタイトル色の変更指定について!!
このblog CSSのブログタイトルの色変更はどうすればいいですか? .blogtitle の所で色指定してもダメでした?他に方法があるのですか? livedoor Blog CSS FileName: ネコさん(20040819) Version: 2006.06.26 ----------------------------------------------------- */ #header{} #header td{ color:#FFF; font-size:12px; text-align:right; padding-right:10px; } #header a:link{color:#FFF;} #header a:visited{color:#FFF;} #header a:active{color:#FFF;} #header a:hover{color:#FFF;text-decoration:none;} body{ margin:0; padding:0; text-align:center; font-family: verdana ,arial ,sans-serif; background-color: #4d9d1c; /*background:#4d9d1c url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/bg.gif') repeat-y 50% 0;*/ } a{color:#666;text-decoration:underline;} a:link{color:#666;text-decoration:underline;} a:visited{text-decoration:underline;} a:active{} a:hover{color:#666;text-decoration:none;} #container{ width:833px; margin:0 auto; text-align:left; word-break:break-all; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/header.gif') no-repeat; } #banner,#subbanner{ width:833px; height:185px; margin:0 auto 35px;; } #banner a{color:#fff;text-decoration:none;} #banner a:link{color:#fff;text-decoration:none;} #banner a:visited{text-decoration:none;} #banner a:active{} #banner a:hover{color:#fff;text-decoration:underline;} #subbanner a{color:#fff;text-decoration:underline;} #subbanner a:link{color:#fff;text-decoration:underline;} #subbanner a:visited{text-decoration:underline;} #subbanner a:active{} #subbanner a:hover{color:#fff;text-decoration:none;} h1,h2,h3{margin:0;padding:0;} .blogtitle{ font-size:20px; font-weight:bold; padding-top:85px; padding-right:70px; text-align:right; } .description{ color:#000; font-weight:bold; font-size:12px; padding-right:70px; text-align:right; } #categorytitlebody{} #categorytitle{ font-size:14px; font-weight:bold; text-align:center; padding:20px 10px 15px 10px; } #blogcontainer{width:755px;margin:0 auto auto 20px;background-color:#FFF;} #content{ width:564px; float:left; padding-left:10px; text-align:left; padding-bottom:50px; } #links{ width:170px; float:right; padding-bottom:50px; } .blog{} .date{ color:#4d9d1c; font-size:14px; font-weight:bold; text-align:left; margin-bottom:5px; } .title{ font-size:14px; font-weight:bold; text-align:left; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; padding-left:26px; } .blogbody{ line-height:130%; text-align:left; background-color:#f3f1e2; padding:10px 0px 0px 10px; } .main,.mainmore,.portal-links{ line-height:150%; font-size:12px; padding:18px 10px 30px 26px; } blockquote{ padding:5px; margin:5px; border:2px dotted #4d9d1c; } .pict{margin:5px;} .posted{ color:#000; font-size:11px; text-align:left; margin:0; padding:10px 15px 10px 26px; } a.posted{color:#000;text-decoration:underline;} a.posted:link{color:#000;text-decoration:underline;} a.posted:visited{text-decoration:underline;} a.posted:active{} a.posted:hover{color:#000;text-decoration:none;} .menu{ font-size:11px; text-align:right; padding:2px 15px 20px 26px; } .blogbodybottom{ margin-bottom:20px; } .comblogbodybottom{ margin-bottom:20px; } #contentcommentbottom{} .formbodybottom{} #articletop{} #articlebody{} #articlebottom{} .trackbackurlbody{ text-align:left; padding-left:10px; } .trackbackurlttl{ background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; font-size:12px; font-weight:bold; padding-left:26px; } .trackbackurl{ padding-top:10px; padding-bottom:20px; text-align:left; } .trackbackurl table{width:350px;margin:0 auto;} input.trackbackbox{width:300px;} .trackbackurlbottom{} a.posttitle:link{color:#000;text-decoration:underline;font-si
- 締切済み
- CSS
- CSSで指定した文字色が見るマシンによって違う
リンクの文字の設定をCSSで以下のように指定しています。 a:link{font-size:12px; text-decoration:none} a:visited{font-size:12px; text-decoration:none} 文字色はデフォルトの青→紫になって欲しいので指定していません。 WinとMacのIE・NNで確認して大丈夫だったのですが、ある別のWinのマシン(IE)で確認したら、リンクの文字色がクリック後ピンク色になります。 なぜそうなるのでしょうか? 回避方法としては色の指定をしてやるべきでしょうか? よろしくお願い致します。
- ベストアンサー
- HTML
- cssで指定するfontサイズについて教えてくだい
初歩的な質問で恐縮です。 cssの記述について質問いたします。 下記のようにcssを記述しているのですが、 一部だけ「font-size: small」を解除する方法はあるのでしょうか? (要は、一部分をfont-size: X-smallにしたいのです。) * { font-size: small; font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #454545; letter-spacing: 0.05em; line-height: 180%; } a:link { color: #7B0215; text-decoration: none; } よろしくお願いいたします。
- ベストアンサー
- CSS
- 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
- スタイルシートで。。
こんにちは。 外部CSSをリンクさせてCSSを反映させています。 そこで質問です。 リンク箇所には下線がでるようにしていますが、リンクのある画像にまで下線がついてしまうのです。 画像だけには適用させない、というようなタグはありますか? ちなみにこういうのを記述してます a:link{color:#cccccc;text-decoration:none;border-bottom: #ffffff 1px dashed;} a:visited{color:#cccccc;text-decoration:none;border-bottom: #ffffff 1px dashed;} a:active{color:#cccccc;text-decoration:none;border-bottom : #ffffff 1px dashed;} a:hover{color:#cccccc ;text-decoration:none;background-color : #688999; border-bottom : #ffffff 1px dashed;} なにか回避方はありませんでしょうか? 教えてください、よろしくお願いいたします。
- ベストアンサー
- HTML
- CSS backgroundが反映されません
CSS初心者です。 CSSレイアウトで問題にぶつかりました。 下記CSSをIE6で見るとbodyに書いた 「background-image:url(images/flower.png); 」が反映されません。 IE10では反映されました。 いったい何故でしょうか。。。 調べてみたのですがいまいち分かりませんでした。 よろしくお願いいたします。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ * { margin:0; padding:0; } body { background-image:url(images/flower.png); background-repeat:no-repeat; background-position:bottom; background-attachment:fixed; background: rgb(#00000); color: rgb(76, 76, 76); } body{ text-align:center; } div#container { background-image:url(images/sora.jpg); background-repeat:no-repeat; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; } div#container{ width: 770px; margin: 0 auto; text-align: left; border: 3px solid rgb(228, 225, 219); } .photo{ margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute; } .photo2{ margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute; } p { line-height: 2em; font-size: 0.8em; } .p1{ font-weight: bold; letter-spacing: 0.1em; } .h1{ text-align: center; } h1 span { display:none; } h2 span { display:none; } h3 { line-height: 1.2em; padding-top: 2.4em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } h3 { background-image:url(images/h3.png); background-repeat:no-repeat; background-position:0px 35px; padding-right: 40px; padding-left: 30px; } h2 { line-height: 1.3em; padding-top: 1em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } a{ color:#0000ff; font-style:normal; text-decoration:underline; } a:link { color: rgb(90, 120, 255); font-style:normal; text-decoration:underline; } a:visited { color: rgb(165, 188, 255); text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } acronym { border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; } #intro { padding: 0px 79px 0px 86px; } #participation p { padding-right: 40px; padding-left: 10px; } #intro { padding-top: 50px; } #preamble p { padding-right: 40px; padding-left: 15px; } #explanation p { padding-right: 40px; padding-left: 15px; } #preamble { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #explanation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #participation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #benefits { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #requirements { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #quickSummary p{ padding-right: 40px; padding-left: 10px; } #footer { text-align: center; line-height: 1.5em; padding-top: 10px; padding-bottom: 40px; font-size: 0.9em; } #footer a:link { color: rgb(133, 126, 112); } #footer a:visited { color: rgb(133, 126, 112); } #footer a:hover { color: rgb(133, 126, 112); } #footer a:active { color: rgb(133, 126, 112); }
- ベストアンサー
- CSS
- MFC-J6583でクリーニングを何度やっても文字がかすれる問題について相談します。
- お使いの環境はWindows10でUSB接続です。
- 関連するソフト・アプリや電話回線の種類はありません。
お礼
色々と教えていただいてありがとうございますm(_ _)m あまりにも何度も書いてもらっていうのでもう申し訳ないです。 今後はスルーしてくださいね! ご紹介くださったCSSの記述方法は、のちにHTML側の変更が不要なので、CSSだけみると重複箇所があっても、それでもHTMLののちの変更が出ることと比べれば合理的である、と理解しました。 私もその通りだと思いました。ただ、CSSの中でグループ化したidなりclassなりが発行できる機能が欲しいです。このぶんだとその機能はおそらく無いんでしょうね。 パーツごとに記述をしておいて、使いたいパーツを複数選んだclassを発行して、そのclassひとつをHTML側では記述すれば済む、という形になればいいのに、と思いました。 何がともあれありがとうございました