• ベストアンサー

CSSで一般的でSEOに有効な値(単位)は?

お世話になります。初めて質問させていただきます。 CSSで使う「font-size」や「margin-top」等の属性の値(単位)は「em」「pt」「px」等、色々ありますが・・・ 【例1】 H1{ font-size: 12px; 【例2】 H1{ font-size: 12pt; 【例3】 H1{ font-size: 1em; 上記以外にも色々と値(単位)が有りますが、どれが一般的でSEOに有効ですか?(H1に限りません) また、CSSでの各種の属性に有効な値等が説明してあるHPなどありますか? 教えて下さい。よろしくお願い致します。

  • h1y10
  • お礼率86% (20/23)

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

私の買ったSEOの本には、h1を外部スタイルシートで h1{ font-size:100%; font-weight: nomal; } とかいてしまうと、大見出しなのに、普通のテキストと全く同じように表示されるためスパム行為にあたる、と書かれていました。 が、 http://www.sem-research.jp/faq/seo/20040517141927.html によると、そうではないようですね。私も本に書いていたことより、こっちの方が納得しました。 SEOに有効な値ってあるんですか? やってはいけないことは、ロボットにしか読めないようなスタイルシートの指定をすることだと思います。 例えば、 ・背景色と文字色を同じにする <span style="color:#fff;background-colot:#fff">隠しテキスト</span> ・表示しない <span style="display:none">隠しテキスト</span> とかです。 SEOとは関係ないですが、pxやptは、絶対指定ですので、%やemを使用するほうがユーザビリティは良いとされています。

参考URL:
http://www.sem-research.jp/faq/seo/20040517141927.html
h1y10
質問者

お礼

ご回答ありがとうございます。 >SEOに有効な値ってあるんですか? そこそこSEOに詳しい知り合いが「ある」と言っていました。 ウソなのかなぁ・・・ なるほど。%やemを使用するほうが色々な面で良いのですね。 勉強になりました!

その他の回答 (1)

回答No.2

hinatamamaさんが仰るとおり背景色と文字色を同じにするやフォントサイズを1ptにするとかなどのスパム行為をしない限り単位などの指定は関係ないと思います。 goolge等の検索エンジンがもし、差をつけたとしても微々たるものだと思います。 また、今のところh1タグ等をスタイルシートで装飾することはスパムではないと判断されているようです。

h1y10
質問者

お礼

ご回答ありがとうございます。 返信が遅れ、申し訳御座いません。 勉強になりました!

関連するQ&A

  • 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
  • CSSファイルのコメント

    CSSファイルにコメント(/*・・・・*/)を入れるとIEで表示されないことがあります。 ftpするとWEB上では表示されるようです。 ローカル環境だけで起こるようなのですが、このような現象後存知ですか? たとえば、CSSの内容は /*ヘダー*/ h1,h2,h3,h4,h5,h6,ul,ol,dl,p { margin-top: 0px; margin-bottom: 0px; } /*内容*/ body { margin: 0px auto; width: 750px; font-size: 0.8em; color: #333333; line-height: 1.5em; 宜しくお願いします。

    • ベストアンサー
    • CSS
  • 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での大きさの単位について

    またまた、お世話になります。 フォントサイズの指定をどの単位にしたら良いか迷っています。 emについて調べると、   親要素のフォントの大きさを 1 とする単位 と書かれていたり、   その範囲で有効なフォントの高さを1とする単位 などと書かれています。 ブラウザの文字設定や解像度などで変わることは何となくわかったのですが、この単位ですと、作成時に大きさがつかめないことはないのでしょうか? また、%はどうなのでしょうか?   他の基準となる大きさに対する割合 と書かれていました。 他の基準というのは、そのページ内の他の文字ということでしょうか? 基準となる文字は何なのでしょうか? 説明の後に(基準はそれぞれ異なります)とあります。 あるページで、違いも確認しましたが、はっきり『こうなんだ』とは理解できませんでした。 どのようなパソコンでも、ほぼ同じように見えるようにするには、どの単位を使うのがいいのでしょうか? 現在は、HTMLのフォントサイズを使ったり、CSSではptを使っています。 皆さんのご意見、アドバイスなどお聞かせ下さい。よろしくお願い致します。

  • Firefoxのhtmlとcssの使い方

    Firefoxの件で質問なんですが、現在htmlとcssを勉強している本に 下記のcssはIEでは表示せずFirefox 3.6以上かgoogle Chrome 2以上を使用すれば 背景表示出来ると書いてありましたので両方試した結果背景等はOKですがhtml にカーソルが出て来ませんでした。出来たら操作が慣れているIEのままでこのソースで表示をしたいのですが無理でしょうか?教えて下さい。 #header { width: 760px ; height: 150px ; ( ここから) background: #719a18 ; background: -moz-linear-gradient(top, #719a18, #2a3a09) ; background: -webkit-gradient(linear, left top, left bottom,from(#719a18),to(#2a3a09)) ; } (ここまでです。) #header_inner {padding: 20px ; } #header h1 {margin: 0; font-size: 2em; font-family: Verdana, Helvetica, sans- serif; color: #ffffff ; } #header p {margin: 0 ; margin-top: 8px ; font-size: 1em ; color: #ffffff ; }

  • このCSSで間違いがありますか?

    下記のCSSで上手く認識しません。 どこか間違いがありますでしょうか? お詳しい方宜しく願います。 table.cal tr td{ padding:2px; border-style:none; color:#575757; } tr.out{ margin:20px 20px 10px 20px; text-indent:0em; font-size :12px; letter-spacing:0.2em; line-height:1.5; color:#575757; } td.outs{ margin:20px 20px 10px 20px; text-indent:0em; font-size :12px; letter-spacing:0.2em; line-height:1.5; color:#575757; }

  • 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の優先順位について

    うまく説明できるかわかりませんが・・・ XHTMLとCSSでページを作成しています。 デザインは全て外部CSSを参照しているのですが、 トップページだけ、一部個別設定したいと思っています。 リストメニューのデザインを現在このようにしています。(外部CSS) ul{ list-style-type:none; margin-left:0; padding-left:0; padding:0; margin-top:30px; width:120px; float:left } li{ padding-right:10px; font-size:0.75em; margin-bottom:10px; border-bottom:solid 1px #66aa66 } --------------------------------------- トップページだけ、 ul{ list-style-type:none; margin-left:0; padding-left:0; background-color:#efef77; padding:3px 20px; margin-top:0 } li{ display:inline; padding-right:10px; font-size:0.75em } ----------------------------------- この設定にしたいので、トップページヘッダーにこちらを入力しました。(外部CSSよりヘッダーを優先するとテキストに書いてありました) しかし、 li{ display:inline; } だけは、外部CSSを参照してしまいます。 なぜでしょうか?? 優先させる為に li display:inline !important; } としてみましたが、ダメでした。 どなたかご教授願いますm(__)m

  • 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
  • jQueryで特定のcssプロパティの値を書き換えたい

    jQueryで特定のcssプロパティの値を書き換えたい html上にインラインで記述しているスタイルのうち、特定のプロパティの値のみをjQueryで書き換えることはできますでしょうか。 具体的には↓ <span style="font-size: 16px;font-weight: bold;">テキスト1</span> <span style="color: #f00; font-size: 16px;">テキスト2</span>を <span style="font-size: 18px;font-weight: bold;">テキスト1</span> <span style=""color: #f00; font-size: 18px;">テキスト2</span>に style属性のfont-size: 16px;をfont-size: 18px;にしたい。 他は変えずそのままにしたい。 $(function() { $('span').filter(function() { return ($(this).css("font-size","16px")); }).css("font-size","18px") }); http://okwave.jp/qa/q5310183.html 似たような質問が上記でされていて、真似て書いてみたのですが、これだとfont-sizeが16pxでないものも全て18pxに書き換わってしまいました。 不勉強でお恥ずかしい限りですが、詳しい方いらっしゃいましたらどうかご教授ください。 よろしくお願いいたします。

専門家に質問してみよう