• 締切済み

CSSのフォントのタグについて教えてください。

前回はh1タグについて、みなさまにご親切にご指導いただき、理解する事ができました。ありがとうございました。今回はフォントの色について苦戦しています。自分でもネット等で調べてはいるのですが、どうしも判らない部分がありますので教えてください。 <body> <p>あああああ<em>いいい</em>ああああああ あああ<?>ううう</?>ああああああ ああああ<?>えええ</?>ああああ</p> </body> 例えば<em>いいい</em>を赤で指定しました。 <?>ううう</?>をグリーン <?>えええ</?>を青 と別の色で指定したいのですがた、<?>の指定するタグがわかりません。 宜しくお願いします。

みんなの回答

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.4

CSSはタグといいません。失礼ながら何でもタグで括るレベルではまだまだ…。 CSSは要素すなわち特定のタグごとに色を指定するのではなく、classやidにデザインのパターンを設定して、その内容をHTMLから呼び出すようにしたものです。 CSSの仕組みやclassやidについてもう少し学んだほうが宜しいかと思います。 覚えると結構デザインの幅が広がりますよ。誰にも負けないデザインにしたいならばやっぱしっかり覚えないと! 一応簡単そうなとこをひとつ参考リンクに挙げておきますね。

参考URL:
http://heo.jp/tag/kowaza/css/01.html
全文を見る
すると、全ての回答が全文表示されます。
  • dezimac
  • ベストアンサー率56% (2365/4208)
回答No.3

まずは、HTMLタグやCSSの意味をもう少し理解しましょう。 <p>~</p>で一つの段落 <em>~</em>は強調 というようにちゃんと意味があります。 <span>~</span>は特に深い意味は無く、意味は無いけど文字の色を変えたいとかいう場合に利用するのには最適です。 http://www.htmq.com/index.htm CSSは見た目を制御するもので、どんな要素にも適用できます。 classやid等のセレクタを利用する事で、同じタグに対してまったく違う指定をすることが出来ます。 【HTML】 <p> <em class="iro1">強調1</em> ああああ <em class="iro2">強調2</em> いいいい <span class="iro3">特に意味は無いけど色付けたい</span> うううう </p> 【CSS】 .iro1{color: red;} .iro2{color: blue;} .iro3{color: green;} とでもしておけばいいです。 ちなみに、クラス名に「red」だとかのあまりにも安直な名前付けると後で管理するときに苦労しますよ。 http://allabout.co.jp/internet/hpcreate/closeup/CU20051008A/

全文を見る
すると、全ての回答が全文表示されます。
  • suzuki-_-
  • ベストアンサー率77% (152/195)
回答No.2

回等No1の仰られていることですが、 タグそのものにカラーを設定するのでなく、 使い回しが出来る class という要素を自分で作り、 それにフォントのカラーを使用することで、 同じタグで様々なバリエーションを実現することが可能です 例えば、css側で <style type="text/css"> <!-- /* 各class設定 (css内でのclass指定は . (ドット) + class名とする) */ .astr{color:red;}/* astr という class */ .bstr{color:green;}/* bstr という class */ .cstr{color:blue;}/* cstr という class */ // --> </style> HTML側は <p>あああああ<em class="astr">いいい</em>ああああああ あああ<em class="bstr">ううう</em>ああああああ ああああ<em class="cstr">えええ</em>ああああ</p> のような感じです "いいい"以外は<em>タグで囲みたくないというのならば、 <p>あああああ<em class="astr">いいい</em>ああああああ あああ<span class="bstr">ううう</span>ああああああ ああああ<strong class="cstr">えええ</strong>ああああ</p> 等、他のタグにclassを入れてあげればよいです

全文を見る
すると、全ての回答が全文表示されます。
  • Tacosan
  • ベストアンサー率23% (3656/15482)
回答No.1

形としては span要素を使って適切な class を指定するかな. もちろん class としては「その色を使って何を意味するのか」を書くのが正しく, 緑にしたいからといって class="green" などと指定するのは ((X)HTML 的には問題ないけど) 論理的に間違い.

kamonegi2005
質問者

補足

ありがとうございます。 質問の書き方が解り難いですね。すみません。 本文<p>の中に複数の色のフォントを使いたいのですが、1つは<em>で指定しました。他のフォントの部分を<em>以外の色で指定したいという事です。初心者の為、質問内容も解りづらいかもしれませんが、宜しくお願いします。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • CSSでフォントの色で困っています

    CSSを覚えようと使い始めたばかりの初心者です つまずいてしまったのでおしえていただければありがたいです。 見出しにh1を指定して続けてテキストを書く ○ソースは <h1><p class="ttl">日記の書き方</p></h1> <p>まずは思いついたことを箇条書きにする</p> ○スタイルシートは ・h1、pにはノーマル、フォントサイズ1emを指定 ・ttlにはフォントカラーで青、太字、サイズ110%を指定 こうしたところ2文ともttlのスタイルシートが効いた状態になってしまいました。 私の意図としては、1文目は青の太字でやや目立たせて 2文目は黒の普通の文字にしたかったのですが… どうすればよかったのでしょうか。 それから、初心者向けのCSSの本をちょっと見たところでは理解できたのですが、 実際やってみるとすぐにこのようにつまづいてしまいます。 初心者がつまづきやすい事例を紹介・説明しているおすすめサイトなどありましたら 教えてください。

    • 締切済み
    • CSS
  • hタグについて 色・サイズを同時に指定したい

    スタイルシートでフォントのサイズと色を同時に設定したい時は、 hタグを使うしかないのでしょうか? <html> <head> <title>test</title> <STYLE TYPE="text/css"> <!-- h1 { font-size:50%;color:green; } --> </STYLE> </head> <body> <h1>test</h1> </body> </html> このような場合です。 hタグは見出しに使うべきで6つしか指定できないとのことですが 見出しでもない文字に色とサイズを設定したい上、6つ以上パターンがある場合、 どうすればいいでしょうか?

    • ベストアンサー
    • HTML
  • CSSが反映されません

    勉強不足は承知ですが、もうどうにもお手上げ状態です。 質問させてください。 CSSを勉強しているのですが、反映されません (本や、サイトのサンプルとおり記述しても、です) (タグ、スペルの間違いがないかは10回以上確かめています) (CSSサイトのサンプルをクリックすると、それは表示されます) ●ヘッダー内に指定すると、反映されない ○例  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS"> <meta http-equiv="Content-Type" content="tet/css"> <style type="text/css"> <!-- p.ehon{ font-size:100px; color:red; } --> </HEAD> <BODY> <p.ehon> 「絵本」の色は赤色です </p> </BODY> </HTML> ・・・結果・・・ ブラウザには標準フォント(色、サイズ)で ”「絵本」の色は赤色です” と表示される 文字色は font-color:red font-color:#rbg番号 などしてみても、黒のまま 文字サイズも30px、50px、100pxとしてみているが、結果は同じ文字サイズ (標準)になる ○<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS"> <meta http-equiv="Content-Type" content="tet/css"> <style type="text/css"> <!-- body{color:#CCFFCC} h1{color:#996633} --> </HEAD> <BODY> <h1> 絵本の色は赤色です </h1> </BODY> </HTML> ・・・結果・・・ ブラウザになにも表示されない ●BODY内指定 ○例 <div style="color:red"> 絵本の色は赤色です </div> ・・・結果・・・ フォントサイズ標準で、文字色赤で表示されました ○例 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ ブラウザに何も表示されませんでした ○2回目 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ フォントサイズそれなりの大きさに。文字色は赤で表示されました ○3回目 全く同じタグでブラウザには何も表示されず・・・・ ///////////////////////////////////////////////////////////// いったい何が問題なのでしょうか。 こんなところで足止めされているのが悲しいです・・・

  • Fontタグとスタイルシートについて。

    Fontタグとスタイルシートについて。 「Fontタグは非推奨である」と最近はじめて聞きました。 そして、「その代わりにスタイルシートで色とか大きさとかを指定しろ」ということも。 なぜですか? 独学でウェブサイト作成を学んでいたため、まるで村八分されたような気分です。 また、いちいちスタイルシートに書いておくのって面倒じゃありません? たとえば「ここの文字色は赤にしたいけど、ここ以外で文字色を赤にすることは二度とない」のようなときでも、スタイルシートに記述しなければならないのでしょうか。 誰かこのもやもやを解決してください。 お願いします。

  • CSSのタグについて

    今CSSを勉強中の者です。一つ質問させて下さい。 とあるサイトで --------------------------------------------- <div id="album"> <ul> <li><a id="photo" href="#">  <em><img src="album/img/photo.jpg" /></em>    <span>写真1</span></a></li> </ul> </div> --------------------------------------------- とHXTML表記があり、CSSの設定は下記のようになっていました。 (※一部抜粋) --------------------------------------------- div#album ul li a em, div#album ul li a span  {  display: none;  } --------------------------------------------- そこで質問です。<em>や<span>のタグを単独で使った 事がなく、どうしてこの二つのタグが使われているの かがわかりません。 特にemはフォントサイズの指定ではないのでしょうか? それともCSSで効果の設定をするために無理に入れて いるだけなのでしょうか。 勉強中の為に訳の分からない質問なのかも知れませんが どなたか分かりやすく教えて頂けますと幸いです。

  • スタイルシートの優先順位について

    以下のようなHTMLとCSSを記述したとします。 <p>タグに囲まれた「test」という文字に対して、Bodyタグから font-size:10emと、PタグからFontChangeクラスを指定して、 font-size:0.1emを適用しています。 一見、優先順位の高いFontChangeクラスの0.1emが「test」に対して適用されそうに見えますが、 実際には両方のスタイルが適用され、中途半端なフォントサイズになります。 優先順位を無視してスタイルが2重適用されるのは何故でしょうか? ご教授下さい。 宜しくお願いします。 <html> <head> <style type="text/css"> <!-- body { font-size:10em; } .FontChange{ font-size:0.1em; } --> </style> </head> <body> <p class="FontChange" >test</p> </body> </html>

    • ベストアンサー
    • HTML
  • <sub>や<sup>タグを使用した箇所だけ、CSSでのフォントカラー指定が反映されない。

    お世話になります。 HTMLとCSSでの表示について質問します。 <sub>や<sup>タグを使用した箇所だけ、CSSで指定したフォントカラーが反映されません。 ・ソースは <h2>CO<sub>2</sub>排出削減!</h2> ・CSSは h2{height:27px; line-height:27px; font-size:17px; font-weight:600; color:#283281;} このような指定になってます。 どうにか見出しタグを使ったまま、同じ色指定で下付き文字を使い、しかし<sub>や<sup>には直接フォントカラーを指定しないで解決する方法などありましたら教えてください。 *<sub>や<sup>は、インライン要素であると定義されてますが、この問題に関係してるのでしょうか。。

  • CSSの質問です。1行にある「●タイトル」を別々の色にしたいです。

    CSSの質問です。1行にある「●タイトル」を別々の色にしたいです。 ●タイトル ↑ ●とタイトルを別々の色にしたいです。 現在のCSSはこうなっています。 div.post h2 {font-size: 0.87em} div.post h2 a {text-decoration: none; color:red} これをどうすれば、別々の色に指定できますか? h3を作ると改行されて、a1というタグは無理っぽいです。 CSSがわからないので、助けてください。

  • CSS) emでのサイズ指定

    CSS初心者です。 何のサイズをem単位で指定できるのか調べたくて、適当に h1,h2,h3,h4,p { font-size: 2em; margin: 1em; padding: 1em; margin-border: 1px; border-color: #000000; ligh-height: 1em; border-width: 1px; } としました。 すると、すべてのフォントサイズが同じになりました。 それぞれのヘディングが倍のサイズになると思っていたのですが、なぜこうなってしまったのでしょうか? また、マージンのサイズ、パッデイングのサイズを視覚的に確認したいのですが、どうすればいいのでしょうか?

    • ベストアンサー
    • CSS
  • html4.01で使われないことが推奨されているタグ

    タグの参考書にHTML4.01に使われないことが推奨されているタグがあり、そのタグはスタイルシートに替えて使用することが書かれていました。 主要なもので、タグではfontタグが、属性ではcoloerの指定、div、p、table、tr、td、h1~h6、imageのalignの指定、imageの borderの指定、trとtdのwidthとheightなどがありましたが、リニューアルされたばかりのページなどを見ても、完全にそれを守っているページはありませんでした。fontタグは使われていなかったのですが、それ以外のタグはそのまま使ってhtml4.01Transtisionとするのは一般的なのでしょうか。推奨を守ってhtml4.01 strictとして制作しているwebデザイン会社などはどのくらいあるのでしょうか。 fontタグはできるとしても、alignやborderなどを使用しないで作成すると、すべてのtdやtrなどにclass指定で指定する方法でしょうか?

    • ベストアンサー
    • HTML

専門家に質問してみよう