- ベストアンサー
CSSを使って文字を小さくしたい
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
h1は、Header1の略で、見出しで一番重要な役割を持ちます。 たいていはそのWebページのタイトルに用いるのが基本です。 見てる感じだと、「コーヒー」はページタイトルとは思えないので、h1タグを用いるのは(文法的にもSEO的にも)不適切です。 ちなみにそのように表示されるのはh1タグがブロック要素だからです。 改行しないようにするにはCSSでdisplay:inline;を指定するか、インライン要素を用いるかです。 コーヒーに対して何か装飾をしたいのであれば、 珈琲(<span style="color:"ff0000;">コーヒー</span>) などと、spanタグを用いるのが正しいです。 しかし、今回の場合、特に装飾もなしで普通の文字として表示されたいようですので、 <p>珈琲(コーヒー)</p> で十分です。 下手に不適切なタグ付けをすると、かえってSEO的に逆効果となりますので要注意です。
その他の回答 (3)
- Nine-nine
- ベストアンサー率49% (25/51)
h1はブロック要素だから改行されます。 そしてh1のブラウザ毎に持っている初期値があてはまり、文字が太くなると推察します。 h1とはそのページで一番大きな見出しという意味です。本当の意味でそのページで一番大きな見出しにh1をつけたほうがseo対策にはなる気がします。
お礼
ご回答ありがとうございます。 検討してみたいと思います。
<h1>珈琲(<span style="font-size:small;">コーヒー</span>)</h1> この様に書く事が良いんではないでしょうか。 smallは小さすぎませんか、それから括弧もspanの中に入れたほうが良いような気がします。
お礼
レイアウトとしては、もっと普通の文字に近づけたいと考えています。 大きくなってしまうH1は使わないほうがいいのでしょうか。 ご回答ありがとうございます。
- shimix
- ベストアンサー率54% (865/1590)
h1で括っているのは何故でしょう?他の要素で代替はできないのでしょうか?括弧書きの中の文言がh1というのもちょっとヘンだし・・。
補足
ご回答ありがとうございます。 SEO対策にH1タグを使いたいと考えているので 検索エンジンへの実験で小さくしてみようと思っています。
関連するQ&A
- CSSでフォントの色で困っています
CSSを覚えようと使い始めたばかりの初心者です つまずいてしまったのでおしえていただければありがたいです。 見出しにh1を指定して続けてテキストを書く ○ソースは <h1><p class="ttl">日記の書き方</p></h1> <p>まずは思いついたことを箇条書きにする</p> ○スタイルシートは ・h1、pにはノーマル、フォントサイズ1emを指定 ・ttlにはフォントカラーで青、太字、サイズ110%を指定 こうしたところ2文ともttlのスタイルシートが効いた状態になってしまいました。 私の意図としては、1文目は青の太字でやや目立たせて 2文目は黒の普通の文字にしたかったのですが… どうすればよかったのでしょうか。 それから、初心者向けのCSSの本をちょっと見たところでは理解できたのですが、 実際やってみるとすぐにこのようにつまづいてしまいます。 初心者がつまづきやすい事例を紹介・説明しているおすすめサイトなどありましたら 教えてください。
- 締切済み
- CSS
- 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回目 全く同じタグでブラウザには何も表示されず・・・・ ///////////////////////////////////////////////////////////// いったい何が問題なのでしょうか。 こんなところで足止めされているのが悲しいです・・・
- ベストアンサー
- その他(インターネット・Webサービス)
- CSSとタグの関係
おはようございます。宜しくお願い致します。 HTMLに外部スタイルシート(CSS)を組み込み、更にHTML内にタグでスタイルシートと同じ内容のものを書き込んだ場合、そのタグを消さないとCSSは反映されませんよね? 例えば、CSSでフォントサイズを指定したとして(tdにidで指定するとします)、HTML内にフォントサイズのタグを書き込んだ場合、どちらを優先されますか? 例:CSSで、 td#word {font-size: 10pt;} と指定します。それに併せて、HTML内に、 <td id="word" colspan="1"><font size="-1">表示したい文字</font></td> とした場合、指定するものに一番近い指定(<font size="-1">)を優先される…と覚えていたのですが。そして、この場合CSSは効かないと…。 しかし、両方効くはずと言われたことがあるのです。 それと、外部スタイルシートを「外してみているユーザーが居る」と言われた事が有ります。 勉強不足で申し訳有りません。外部スタイルシートの外し方って、どうやるのでしょう? 宜しくお願い致します。
- ベストアンサー
- CSS
- 魔法のiらんどの文字。
魔法のiらんどて普通に表紙作成欄に文字を打つと 太字で表示されてしまいます。 FONTで文字のサイズは変えられますが、文字の太さの変え方が判りません。 そこでこの文字を細くするにはどうすれば良いのでしょうか?
- ベストアンサー
- HTML
- CSSで文字指定:あるセレクタで指定した値を他のセレクタへ継承させることは出来ますか?
文字サイズをCSSで指定する方法についての質問です。 同一の文字サイズ指定でも、OS・ブラウザ間で表示にギャップがあります。 そのギャップを調整するために、JavaScriptを使用して OS・ブラウザごとにそれぞれ異なった外部CSSファイルを読み込むようにしています。 macintosh.css windows.css windowsIE.css ...このような振り分けCSSファイルでそれぞれ文字サイズ指定をしています。 CSSファイルの中身は、 macintosh.css .small { font-size: 10px; } /* 小さめ */ .middle { font-size: 12px; } /* 中くらい */ .large { font-size: 14px; } /* 大きめ */ windowsIE.css .small { font-size: 0.8em; } /* 小さめ */ .middle { font-size: 0.9em; } /* 中くらい */ .large { font-size: 1em; } /* 大きめ */ ...といった具合です。 このやり方では、h2の文字サイズを全て中くらいの大きさに指定したい場合、 全てのh2タグに <h2 class="middle"> と記述することになってしまいます。 これは煩雑なので一括指定したいと考えます。 すぐ思いつく方法は、振り分けCSSファイルにh2の文字指定も含めることです。 macintosh.css h2 { font-size: 12px; } windowsIE.css h2 { font-size: 0.9em; } ...のようなことです。 そうではなく、h2に .middle(=中くらい)で指定した文字サイズをそのまま受け継がせる方法はないでしょうか? h2 { class="middle" } 変な書き方ですが、意図を汲み取っていただけるでしょうか。 このように指定出来れば、かなり省力化出来るように思います。方法があればぜひお教え下さい。
- ベストアンサー
- HTML
- CSSの記述
HTMLで普通のテキストのサイズを固定したいのですが、 うまくいきません。 何が間違っているのでしょうか。 一部のHTMLだけ、リンクの下線をはずしたいので、 HTMLに <LINK REL="stylesheet" HREF="css/style_win.css" TYPE="text/css"> <STYLE TYPE="text/css"> <!-- A { text-decoration: none; font-size: 10pt;} --> </STYLE> と記述。 こちらの方は大丈夫です。 だめなのは外部 css/style_win.css に body { font-size:10pt } と書いたほうがまったく制御していません。 初心者で、本もたくさん調べましたが わかりません。 どうかお願いいたします。
- ベストアンサー
- HTML
- fc2無料ホームページにて携帯サイトを作成しております。文字サイズや色
fc2無料ホームページにて携帯サイトを作成しております。文字サイズや色が変更されません。 2点質問させて下さい。 1.文字サイズの変更がされません。すべて同じサイズになってしまいます。 2.1行だけ目立たせる為にリボンの様に色をつける事をしたいのですが表示されません。文字のみ表示されます。 ホームページビルダー上で作成しており、ソフト上では文字サイズもリボンの様な色も表示されます。 また、iモードHTMLシミュレータII上でも表示されるのですが、実機では表示されません。 よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.2.0 for Windows"> <meta name="IBM:DeviceType" content="i-mode7_FOMA3"> <title></title> </head> <body> <div style="font-size:x-small;">小文字</div> <div style="font-size:medium;">中文字</div> <div style="font-size:x-large;">大文字</div> <div style="font-size:10;">size10</div> <div style="font-size:11;">size11</div> … <div style="font-size:20;">size20</div> <div style="background-color:#ff0000;">リボンの上に文字</div> </body> </html>
- ベストアンサー
- HTML
- ブラウザによって異なるフォントサイズについて
ホームページを制作していますが、ブラウザによって文字のサイズが見かけ上違ってしまいます。 具体的には、フォントのサイズが IE8<Safari<Firefox3 になっています。 価格.comなどの有名サイトを見ていると、どのブラウザでも同じサイズに見えます。 スタイルシートに body { font:13px; *font-size:small; *font:x-small; } を書き加えてみましたがあまり変化はありませんでした。 どのようにすればいいのでしょうか?
- ベストアンサー
- HTML
- CSS font-size について
cssでfont-sizeを指定したのに反映されなくて困っています。(スクリーンショットをとって確認したところ) 12pxと13pxは11px 14pxと15pxは13px 16pxは15pxになってしまいます。 プログラムは次のように打ちました。お願いします。 <HTML> <HEAD> <TITLE>無題ドキュメント</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- h1 { font-size: 12px; font-weight: normal} h2 { font-size: 13px; font-weight: normal} h3 { font-size: 14px; font-weight: normal} h4 { font-size: 15px; font-weight: normal} h5 { font-size: 16px; font-weight: normal} --> </STYLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <h1>春夏秋冬 12px</h1> <h2>春夏秋冬 13px</h2> <h3>春夏秋冬 14px</h3> <h4>春夏秋冬 15px</h4> <h5>春夏秋冬 16px</h5> </BODY> </HTML>
- ベストアンサー
- HTML
お礼
なるほど… 頑張ってみたいと思います。 ご回答ありがとうございました。