hタグについて 色・サイズを同時に指定したい
- スタイルシートを使用してフォントのサイズと色を同時に設定する場合、hタグを使用するのが一般的です。
- hタグは見出しを示すために使用されることが多いですが、見出しでないテキストにも色とサイズを設定したい場合、hタグは便利です。
- ただし、hタグは見出しの階層を示すためにも使われるため、6つしか指定できません。もし6つ以上のパターンが必要な場合、他のタグを検討する必要があります。
- ベストアンサー
ｈタグについて 色・サイズを同時に指定したい
スタイルシートでフォントのサイズと色を同時に設定したい時は、 ｈタグを使うしかないのでしょうか？ <html> <head> <title>test</title> <STYLE TYPE="text/css"> <!-- h1 { font-size:50%;color:green; } --> </STYLE> </head> <body> <h1>test</h1> </body> </html> このような場合です。 ｈタグは見出しに使うべきで6つしか指定できないとのことですが 見出しでもない文字に色とサイズを設定したい上、６つ以上パターンがある場合、 どうすればいいでしょうか？
- EXOORHZZRX6
- お礼率100% (40/40)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
見出し以外という事は、 一般的には、<p>を利用しますので、 p{font-size:116%;color:gray;} 複数ならの段落を個別指定するなら以下を試すと理解できるでしょう。 p{font-size:116%;color:gray;} p#line-2{font-size:100%;color:lime;} p.line-3{font-size:85%;color:red;} p.line-3 + p{color:yellow; background:black;} p.line-4{font-size:150%;color:maroon;} p.line-4:first-line{color:blue;} p strong{color:purple;} p span{color:fuchsia;} ul li{color:blue;} ul li:first-line{color:aqua;} <p>ああああああ</p> <p id="line-2">いいいいいい</p> <p class="line-3">うううううう</p> <p>うううううう</p> <p class="line-4">ええええええ</p> <p class="line-4">おおおおおお<br>かかかかか</p> <p>きき<strong>きき</strong>きき、く<span>くく</span>くく</p> <ul><li>けけけ<br>こここ</li><li>さささ</li></ul> その他にも、色々ありますのでじっくり勉強して下さい。
その他の回答 (2)
- kmee
- ベストアンサー率55% (1857/3366)
h1からh6は、見出しの段階の区別で、いくつ使ってもかまいません <h1>大見出し</h1> <h2>中見出し1</h2> <h2>中見出し2</h2> という感じに。 > 見出しでもない文字に色とサイズを設定したい なら、hを使うことがそもそもの間違いです。
お礼
ありがとうございました。
- s806099d
- ベストアンサー率34% (17/49)
文中の場合はspanタグを使うのが一般的です。 複数のパターンを作成したいときはidで関連付けるのが一般的です。 以下、サンプルです。試してみてください。 <html> <head> <title>test</title> <STYLE TYPE="text/css"> <!-- span[id="1"] { font-size:100%;color:red; } span[id="2"] { font-size:100%;color:blue; } --> </STYLE> </head> <body> <span id="1">test</span> <span id="2">test2</span> </body> </html>
お礼
spanを使えばいいのですね。 有難うございます。
関連するQ&A
- H1タグの色を変えたい。
H1タグの色をCSSで変更したいのですが、上手くいきません。 どこの設定を間違えているのでしょうか？ 大変申し訳ございません。ご教授よろしくお願いいたします。 以下にソースを記述します。 /*--- HTMLソース ---*/ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="index.css" type="text/css"> <title>H1タグ色変更</title> </head> <body> <h1>大見出し</h1> </body> </html> /*--- CSSソース（外部ファイル：index.cssとする） ---*/ @charset "utf-8" h1 {color: #0000ff;}
- ベストアンサー
- CSS
- ブラウザによる表示の違いについて
ブラウザによる表示の違いについて ホームページを作成しています。今少し気になることがあり今日も朝からずっと調べていたのですが分からずここで質問させてください。 自分のホームページが最近ブラウザにより見え方が違うのに気づきました。 たとえばInternet ExplorerやFirefoxなら問題なくきれいに表示されていますがSafariやGoogleChromeだとスタイルシートで書いた部分がおかしくなっています。 私のほうで色々調べたのですがたとえば見出しタグH1にスタイルを適応する場合に直接 <html> <head><title></title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_jis"> <style type="text/css"> <!-- h1 { color:#ff0000; font-size:240%; } --> </style> </head> <body> <h1>テスト</h1> </body> </html> のように記述すれば問題なくブラウザSafariにもスタイルシートが適応されるみたいなのですが これを外部からスタイルシートをリンクを貼ると適応されないみたいです。 つまり <html> <head><title></title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_jis"> <LINK REL="stylesheet" HREF="style.css" TYPE="text/css"> </head> <body> <h1>テスト</h1> </body> </html> として style.cssファイルに h1 { color:#ff0000; font-size:240%; } と記述した場合にSafariで開くと見出しの色も赤で指定したにもかかわらず紺色になっているしフォントサイズも240%に変更されていません。 原因と対処法が分かる方がいればアドバイスお願いします。
- 締切済み
- HTML
- ｈ１タグについて教えてください。
ｈ１タグを付けると文字が大きくなってしまいます。 フォルダにメモ帳で h1 { text-align: center; font-size: 10px; font-weight: normal; color: #FF0000; } の内容です。フォルダの名前はstyle.cssです。 HPのソースには<HEAD></HEAD>の中に<link href="style.css" rel="stylesheet" type="text/css"> を入れてあります。 h1を使ったソースは <TD><h1>●●●●●</h1></TD>です。 ●の文字が大きくなってしまい困っています。教えてください。おねがいします。 初心者ですので伝え方の不足の部分があるかもしれませんが、宜しくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- なぜ文字がでかくなってしまうのでしょうか？
http://masaboo.cside.com/new_css1/cs_11.htmを見てるのですが ************************************** <HTML> <HEAD> <TITLE>サンプル</TITLE> <STYLE type="text/css"> <!-- H1 { color:red; } P { color:green; } --> </STYLE> </HEAD> <BODY> <H1>レベル1の見出しは赤色です。</H1> <P>段落は、緑色です。</P> </BODY> </HTML> ************************************** のサンプルの意味がよくわからないのですが、 なぜ、 H1 { color:red; } を宣言するだけで、文字がでかくなってしまうのでしょうか？ フォントサイズに関する記述がないのに、 赤文字が大きくなる理由を教えてください。
- ベストアンサー
- HTML
- h1タグ
h1のタグを使うと文字がやたらでかくなってしまいます。h1のタグを使って、文字のサイズを小さくしたいです。 質問１）FONTサイズの指定で小さくするのはどういう意味で不都合があるんでしょうか？ 「文法的に正しくない」などの理由以外で具体的なデメリットを教えて下さい。 質問2）h1のタグを使って、文字のサイズを小さくするにはCSSとやらを使うしかないのでしょうか？ 質問3）例えば下記サイトのような場合一番上の文字は h1になっていますが文字が小さいです。 これはスタイルシートを使っているんですか？ http://www.noavocal.jp/school.htm
- ベストアンサー
- HTML
- aタグに色を付ける場合、hrefは必須なの？
<html> <head> <title>test</title> <style type="text/css"> a:link.a_0ken{ color:red; } </style> </head> <body> <a class="a_0ken">0件</a> <br><br> <a class="a_0ken" href="http:///未定/test.html">10件</a> </body> </html> この場合、 10件の方は色が付きますが、0件の方は色が付きません。 aタグに色を付ける場合、hrefは必須なのでしょうか？
- ベストアンサー
- CSS
- テーブルの一つのtdタグだけ、文字を小さく
テーブルの一つのtdタグだけ、文字を小さくしたい場合は、 この方法でいいのでしょうか？ <html> <head> <title></title> <STYLE type="text/css"> <!-- p { font-size: 20%; } '--> </STYLE> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>普通</td><td>普通</td></tr> <tr><td>普通</td><td><p>test</p></td></tr> </table> </body> </html>
- ベストアンサー
- CSS
- h1タグについて
スタイルシートで例：（.style3{font-size:18px}）と指定する方法はわかりますが、h1タグでフォントサイズを指定する場合どのように指定すればよいのでしょうかお願いします。
- 締切済み
- ホームページ作成ソフト
- スタイルシートの優先順位について
以下のような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
- h1、h２タグの付け方について教えて下さい
h1、h2タグの使い方について質問させて下さい。 h1、h2タグがseo対策に有効であり、かつ見出しの大きい順にh1、h２と使っていくものだという事はわかりました。 フォルダ内に CSS書類を作ってこれを添付したいのですが、以下のような場合、h1、h2タグの設定はどうしたらよいでしょうか。ソフトはDreamweveMX2004使用。タグ打ちだけでは作れないので、Dreamweverで書き込んだソースを必要に応じて書き直し等しています。 【ホームページの構成】 ・index.htmlページはFlashで作った、swfファイル一つと(C)表示の一文のみ。swfファイル中のENTERボタンで２ページ目にリンク。 ・２ページ以降は同じパターンのページが、上部メニューバーで５ページ各リンク。（２挨拶、３商品説明、４アクセス～など） ・２ページ以降は各ページのタイトルバーの形が同じなのでこれに見出し設定をしたい。タイトルバーは文字色、余白などは全て同じだが、背景色のみ各ページごとに変えている。（教えて！gooの紺色地に白抜き文字のような形です。各ページごとに紺色地が別色になります） 【質問】 ・h1はindex.htmlに設定すると思うのですが、テキストは（C）の一行しかありません。他のページでは最下部に（C）表示を置きます。h1はどこに設定したら良いですか？画像にh1を設定する事があると聞きますが、swfにh1を設定することになるのでしょうか？ ・タイトルバーはDreamwever／新規CSS/セレクタタイプ／タグ／h2で共通の文字色、文字サイズ、ボックスなどを設定して背景色のみ、各ページ設定する。この場合、２ページ以降はh1タグが無くなってしまいますーこの形は正しいでしょうか？ ・hタグの使い方を考えるとサイトの構成に問題があったと思いますが、この構成で作ることになってしまいました。CSS添付ではなく各ページ毎に設定するべきなのでしょうか。もしそうならその時のh1,h2はどう設定したらよいでしょうか？ どうか方法を教えてください。よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
お礼
ありがとうございました。