CSSを使って文字を小さくしたい

質問

制作中に詰まってしまいました…

珈琲（<h1 style="font-size:small;">コーヒー</h1>）

このHTMLを開くと

珈琲（
コーヒー
）

というように表示されてしまい困っています。
又、文字が太字になってしまい普通の文字にしたいと考えているのですが、
なかなかうまくいかなくて困っています。
どなたか詳しい方、教えてください。
よろしくお願いします。

回答No.2

kazumero · ベストアンサー

h1は、Header1の略で、見出しで一番重要な役割を持ちます。
たいていはそのWebページのタイトルに用いるのが基本です。
見てる感じだと、「コーヒー」はページタイトルとは思えないので、h1タグを用いるのは（文法的にもSEO的にも）不適切です。

ちなみにそのように表示されるのはh1タグがブロック要素だからです。
改行しないようにするにはCSSでdisplay:inline;を指定するか、インライン要素を用いるかです。

コーヒーに対して何か装飾をしたいのであれば、
珈琲（<span style="color:"ff0000;">コーヒー</span>）
などと、spanタグを用いるのが正しいです。

しかし、今回の場合、特に装飾もなしで普通の文字として表示されたいようですので、
<p>珈琲（コーヒー）</p>
で十分です。
下手に不適切なタグ付けをすると、かえってSEO的に逆効果となりますので要注意です。

お礼

なるほど…
頑張ってみたいと思います。
ご回答ありがとうございました。

回答No.4

Nine-nine

h1はブロック要素だから改行されます。
そしてｈ1のブラウザ毎に持っている初期値があてはまり、文字が太くなると推察します。
ｈ1とはそのページで一番大きな見出しという意味です。本当の意味でそのページで一番大きな見出しにｈ1をつけたほうがseo対策にはなる気がします。

お礼

ご回答ありがとうございます。
検討してみたいと思います。

回答No.3

noname#56851

<h1>珈琲(<span style="font-size:small;">コーヒー</span>)</h1>

この様に書く事が良いんではないでしょうか。
smallは小さすぎませんか、それから括弧もspanの中に入れたほうが良いような気がします。

お礼

レイアウトとしては、もっと普通の文字に近づけたいと考えています。
大きくなってしまうH1は使わないほうがいいのでしょうか。
ご回答ありがとうございます。

回答No.1

shimix

h1で括っているのは何故でしょう？他の要素で代替はできないのでしょうか？括弧書きの中の文言がh1というのもちょっとヘンだし・・。

補足

ご回答ありがとうございます。
SEO対策にH1タグを使いたいと考えているので
検索エンジンへの実験で小さくしてみようと思っています。