ウェブデザインとWordpress

Google｜Google と相性の良いサイト

以下はGoogleのウェブマスター向けガイドラインの引用文です。

行っていただきたいこと

ユーザーが探している情報を提供する
サイト内、特にホームで質の高いコンテンツを提供することが、最も重要です。サイトを訪れるユーザーにとって有用な情報が含まれていれば、サイトの人気が上昇して他のサイトからリンクされるようになります。情報に富んだサイトを作成するには、それぞれのページでトピックをわかりやすく正確に記述します。ページを検索するときにユーザーがどのような言葉を入力するかを考慮して、その言葉をサイトで適切に使用します。

他のサイトからリンクが貼られるようにする
他のサイトからリンクが貼られていると、クローラがサイトを見つけやすくなり、Google の検索結果で表示される可能性が高くなります。Google では、検索結果の表示において、ページの重要度を示す独自の指標 PageRank と高度なテキスト マッチ技術を組み合わせて使用し、それぞれの検索に重要かつ関連性のあるページを表示しています。PageRank 評価の一環として、ページ A からページ B へのリンクをページ A からページ B への票として解釈し、1 つのページが獲得した票数を計算します。「重要度」の高いページによって投じられた票はより高く評価され、それを受け取ったページを重要なサイトとして判断します。

Google のアルゴリズムでは、自然リンクと人工リンクが区別されます。 サイトへの自然リンクは、ウェブの動的な性質の一環として、他のサイトがユーザーにとって便利で価値があると判断した場合に増えていきます。人工リンクは、検索エンジンに対してサイトの人気を高める目的で配置されます。リンク プログラムや誘導ページのような、これらのタイプのリンクについてはウェブマスターの向けのガイドラインをご覧ください。

サイトのインデックス登録やランキングで有効なのは、自然リンクのみです。

サイトを簡単にアクセスできるようにする
サイトを論理的なリンク構成で作成します。各ページには、少なくとも 1 つの静的なテキスト リンクからアクセスできるようにします。

Lynx などのテキスト ブラウザでサイトを確認します。Lynx で表示できるサイトであれば、ほとんどのスパイダーで検出できます。JavaScript、cookie、セッション ID フレーム、DHTML、Flash などの機能が使われていると、テキスト ブラウザではサイト全体が表示されません。この場合、スパイダーによるクロールが困難になる可能性があります。

動的なページがある場合は出来るだけ静的なバージョンも作成してください。Google のインデックスには動的なページも登録されますが、動的なページは Google インデックスのほんの一部です。URL に疑問符を含むページなど、動的に生成されるページによってクローラの問題が発生していると考えられる場合は、これらのページの静的なコピーも作成することをお勧めします。 静的なコピーを作成した場合、robots.txt ファイルに動的なページを忘れずに追加してください。追加されていないと、重複したページとして扱われることがあります。

避けていただきたいこと

ページにキーワードを一覧で表示したり、クローキングを行ったり、「クローラ用」のページを用意しないでください。ユーザー向けでないページ、リンク、テキストがサイトに含まれる場合、Google ではそれらを不正と判断し、サイトを登録しないことがあります。

不正な検索エンジン最適化サービスを購入しないでください。Google の検索結果の上位にサイトを掲載することを「保証」すると宣伝しているサービスがありますが、その中には、サイトのフローとコンテンツを改善するアドバイスを提供する合法的なコンサルティングがある一方で、検索エンジンにとって不正な方法を使用している場合もあります。ドメインに不正なサービスが関係している場合は、Google のインデックスから除外される可能性もあります。

重要な名前、コンテンツ、リンクの表示に画像を使用しないでください。 Google のクローラでは、画像に含まれるテキストを認識できません。ページの主要なコンテンツとキーワードを通常の HTML 形式で記述できない場合は、ALT 属性を使用してください。

同じページのコピーを複数作成して別の URL で公開しないでください。画像の多いページに対して同じコンテンツのテキストのみのバージョンと印刷用のバージョンを用意していることがあります。ページが検索結果に掲載されるようにするには、スパイダーが重複ページと認識することのないように、robots.txt ファイルに URL を設定してください。robots.txt ファイルを使用するための詳細については、Googlebot のブロックに関する情報をご覧ください。

カテゴリ:seo | Page Top

Google｜品質に関するガイドライン

以下はGoogleのウェブマスター向けガイドラインの引用文です。

• 検索エンジンではなく、ユーザーの利便性を考慮してページを作成する。ユーザーを騙すようなコンテンツや、「クローキング」を行って検索エンジン用とは異なるコンテンツを表示しないでください。
• 検索エンジンでの掲載位置を上げるための不正行為を行わない。ユーザーや、ランクを競っているサイトに対して自分が行った対策を明確に説明できるかを判断の目安としてください。その他にも、ユーザーにとって役立つかどうか、 検索エンジンがなくても同じことをするかどうか、などのポイントを確認してみてください。
• サイトの順位や PageRank を上げるように設計されたリンク プログラムに参加しない。特にウェブスパマーや不正なウェブサイトへのリンクは行わないでください。これらのリンクにより、サイトのランクが下がることがあります。
• プログラムの送信や掲載順位の確認に不正なコンピュータ プログラムを使用しない。このようなプログラムはリソースを消費し、Google の利用規約に違反します。 Google は、自動化またはプログラム化されたクエリを Google に送信する WebPosition Gold™ のような製品の使用は推奨していません。

具体的なガイドライン

隠しテキストや隠しリンクを使用しない。

コンテンツに隠しテキストや隠しリンクが含まれていると、ユーザーに対するものと異なる情報が検索エンジンに提示されるため、信頼できないサイトと見なされる可能性があります。過度のキーワードといったテキストは、以下のような複数の方法で隠すことができます。

• 白の背景で白のテキストを使用する
• テキストを画像の後ろに含める
• CSS を使用してテキストを隠す
• フォント サイズを 0 に設定する

隠しリンクとは、Googlebot でクロールされることを意図しているが、下記のようにユーザーからは読み取れないリンクのことです。

• リンクが隠しテキストで構成されている (たとえば、テキストの色と背景色が同じ)。
• CSS を使用して、高さが 1 ピクセル程度の非常に小さいハイパーリンクが作成されている。
• リンクが小さな文字 (たとえば、段落中のハイフン) に組み込まれている。

偽装目的の隠しテキストや隠しリンクが含まれていると判断されたサイトは、Google のインデックスから削除され、検索結果ページに表示されなくなります。隠しテキストや隠しリンクが含まれていないかを評価する際は、サイトのユーザーから見にくい部分がないかをご確認ください。また、ユーザーではなく検索エンジンだけを対象としたテキストやリンクがないかどうかもご覧ください。

テキストを使用して、JavaScript、画像、Flash ファイルといった、検索エンジンがアクセスできないコンテンツを記述する場合は、スクリーン リーダー、携帯電話のブラウザ、プラグインのないブラウザ、低速の回線を使用するユーザーの多くがそのコンテンツを表示できないことにご注意ください。これらのアイテムについて説明テキストを使用すると、サイトのアクセス性は向上します。アクセス性のテストは、JavaScript、Flash、画像をオフにしたり、Lynx などのテキスト ブラウザを使用して行えます。サイトのアクセス性を高めるためのヒントを以下に示します。

• 画像: alt 属性を使用して説明テキストを含めます。また、画像の近くにわかりやすいキャプションや説明テキストを入れることもお勧めします。
• JavaScript: JavaScript と同じ内容を noscript タグに含めます。 この方法を使用する場合は、タグの内容が JavaScript とまったく同じであり、ブラウザで JavaScript を無効にしているユーザーに表示されることを確認してください。
• Flash: 説明テキストとサイト ナビゲーションを Flash の外側に配置します。
• 動画: 動画の説明テキストを HTML に含めます。 キャプションや字幕を含めることもできます。

サイトで隠しテキストや隠しリンクを見つけた場合は、削除してください。サイトのユーザーに関連する場合は、見やすくしてください。サイトが検索結果から削除された場合は、Google のウェブマスター向けガイドラインで詳細をご覧ください。 変更を加え、サイトが Google のウェブマスター向けガイドラインに従っていることを確認できたら、再審査用にサイトを送信します。

Page Top

クローキング、JavaScript リダイレクト、誘導ページ

クローキング

クローキングとは、ユーザーと検索エンジンとで異なるコンテンツや URL を表示することです。user-agent に基づいて異なる結果を表示するサイトは、偽装の意図があると見なされ、Google インデックスから削除される場合があります。

クローキングの例を以下に示します。

• 検索ページには HTML テキストのページを表示し、ユーザーには画像や Flash のページを表示する。
• ユーザーに対するものとは異なるコンテンツを検索エンジンに表示する。

Flash、JavaScript、画像など、検索エンジンがクロールできない要素がサイトに含まれている場合、クローキング コンテンツを検索エンジンに提供するのではなく、サイトのユーザーにもそれらの要素を表示できない可能性があることを考慮して対応してください。たとえば、下記のように対応します。

• スクリーン リーダーを使用したりブラウザで画像をオフにしているユーザーのため、画像を説明する alt テキストを含める。
• JavaScript のテキスト内容を noscript タグに含める。

JavaScript と noscript タグに同じテキストを含めるなど、両方の要素に同じ内容を含めるよう、注意してください。実質的に異なる内容が代替要素に含まれている場合は、Google がそのサイトに対して処置を取る可能性があります。

不正な JavaScript リダイレクト

Googlebot は JavaScript を含んでいるページもインデックスに登録しますが、JavaScript そのものに含まれているリンクをたどったりインデックスに登録することはできません。JavaScript の使用は完全に正当なウェブ処理ですが、検索エンジンをだます目的で JavaScript を使用することはそうではありません。たとえば、JavaScript と noscript タグとに異なるテキストを含めることは、ユーザー (JavaScript ベースのテキストを見る) と検索エンジン (noscript ベースのテキストを見る) とで異なるコンテンツが表示されるため、Google のウェブマスター向けのガイドラインに対する違反になります。同様に、検索エンジンに対するものとは異なるページをユーザーに表示する目的でユーザーを別のページにリダイレクトするリンクを JavaScript に埋め込むことは、ウェブマスター向けのガイドラインに対する違反となります。リダイレクト リンクが JavaScript に埋め込まれている場合、検索エンジンは元のページをインデックスに登録し、リンクをたどることはありませんが、ユーザーはリダイレクト先に移動します。クローキングと同様、ユーザーと Googlebot に異なるコンテンツが表示され、ユーザーが意図しない場所に移動することになるため、これは偽装行為となります。

ただし、JavaScript 内にリンクを入れること自体は偽装行為ではありません。サイト上の JavaScript が Google のガイドラインに従っているかどうかを検証する際は、目的を考慮してください。

一般に、検索エンジンは JavaScript の内容にアクセスできないため、JavaScript 内の正当なリンクにもアクセスできない可能性があります。これは、JavaScript に対応していないブラウザを使用するユーザーにも当てはまります。リンクは JavaScript の外部に配置するか、noscript タグ内に複製することができます。

誘導ページ

誘導ページは、特に検索エンジン用に作成されたページです。このページには、ユーザーにとってほとんどまたはまったく役に立たない、しばしば数百に及ぶ多数のリンクが含まれ、価値のある内容が含まれることはありません。HTML サイトマップはユーザーにとって価値のあるリソースですが、これらのリンク ページはユーザーにとって移動しやすいものにする必要があります。多数のリンクを含める場合は、カテゴリに分類するか複数のページに分けることができます。その場合も、単に検索エンジンを対象としたものではなく、ユーザーがサイトのセクションを移動するのに役立つページにしてください。

Google の目標は、最も関連性の高い、価値のある検索結果をユーザーに提供することです。そのため、検索エンジンを操作したり、ユーザーをだまして意図しないサイトにリダイレクトする処理や、検索エンジンだけを対象にしたコンテンツを提供する処理などには反対しています。こういった処理を行うサイトは Google インデックスから削除され、Google 検索結果に表示されなくなる可能性があります。

サイトが検索結果から削除された場合は、Google のウェブマスター向けのガイドラインで詳細をご覧ください。変更を加え、サイトが Google のウェブマスター向けのガイドラインに従っていることを確認できたら、再審査用にサイトを送信します。

Page Top

キーワードの乱用

「キーワードの乱用」とは、Google の検索結果におけるサイトのランキングを操作する目的で、ウェブページにキーワードを詰め込むことです。ページにキーワードを詰め込むと、ユーザーの利便性が低下し、サイトのランキングに悪影響が及ぶ可能性があります。情報に富んだ有用なコンテンツの作成に焦点を合わせ、キーワードは文脈に合わせて適切に使用してください。

この問題を修正するには、サイトで乱用されているキーワードがないかどうかを調べます。通常、これはキーワードのリストや段落で、ランダムに繰り返されています。キーワードはしばしば隠しテキストの形式になっていたり、title タグや alt 属性に含まれていることがありますので、注意して確認してください。

Page Top

重複するコンテンツ

一般に、重複するコンテンツとは、ドメイン内または複数ドメインにまたがって存在する、他のコンテンツと完全に同じであるか非常によく似たコンテンツのブロックを指します。 多くの場合、偽装を意図したものではありません。 悪意のない重複するコンテンツの例には、以下のものがあります。

• 通常ページと携帯デバイス用の簡易ページの両方を生成するディスカッションフォーラム
• 複数の異なる URL で表示またはリンクされる商品ページ
• ウェブ ページの印刷用バージョン

しかし、検索エンジンの操作やトラフィックの増大を意図して、コンテンツが複数ドメインにまたがって複製されることもあります。この種の偽装行為は、ユーザーが検索結果で実質的に同じコンテンツを何度も見ることになり、利便性の低下につながります。

Google は、固有の情報を持つページをインデックスに登録して表示するよう努めています。 たとえば、サイトの各記事に「通常」バージョンと「印刷用」バージョンがあり、そのどちらも robots.txt でブロックされておらずnoindexメタ タグも設定されていなければ、フィルタリングによっていずれか 1 つがリストに登録されます。ごくまれなケースとして、Google でのランキングの操作やユーザーへの偽装を意図した重複コンテンツが表示される可能性が認識された場合も、Google では関係するサイトのインデックス登録とランキングに対して適切な調整を行います。その場合、該当するサイトはランキングが低下するか、Google インデックスから完全に削除されて検索結果に表示されなくなる可能性があります。

重複するコンテンツに関する事前の対策を行い、ユーザーに意図したとおりのコンテンツが表示されるようにするための手順を以下に示します。

• ページがインデックスに登録されないようにする: Google のアルゴリズムに文書の「最善の」バージョンを判断させる代わりに、優先するバージョンを Google が判別しやすくすることができます。 たとえば、サイトの記事の印刷用バージョンがインデックスに登録されないようにするには、該当するディレクトリを除外するか、robots.txtファイルで正規表現を活用します。
• 301 を使用する: サイトの構造を変更した場合は、301 リダイレクト (”RedirectPermanent”) を .htaccess ファイルで使用して、ユーザー、Googlebot、他のスパイダーを適切にリダイレクトすることができます (Apache の場合は .htaccess ファイルを使用し、IIS の場合は管理コンソールを使用します)。
• 一貫性を保つ: 内部リンクの一貫性を保つように努力します。 たとえば、http://www.example.com/page/、http://www.example.com/page、http://www.example.com/page/index.htm の中から、どれか 1 つに絞ってリンクします。
• トップレベル ドメインを使用する: Google で文書の最も適切なバージョンが表示されるよう、国別のコンテンツを扱う場合は可能な限りトップレベル ドメインを使用します。 たとえば、www.example.de を使用すれば、www.example.com/de や de.example.com の場合よりも、ドイツを対象としたコンテンツが含まれることを Google で認識できる可能性が高くなります。
• シンジケーションは注意して行う: コンテンツを他のサイトでシンジケーション提供している場合、お客様の判断とは無関係に、Google で最適と判断されたバージョンが常に表示されます。 ただし、コンテンツがシンジケーション提供される各サイトに元記事へのリンクを含めると、役に立ちます。また、シンジケーション提供されたコンテンツを使用するユーザーに、自身のサイト上のバージョンを robots.txt でブロックするように依頼することもできます。
• ウェブマスターツールを使用して、サイトをインデックスに登録する方法を Google に伝える: www.example.com と http://example.com のどちらを使用するかなど、使用するドメインを Google に伝えることができます。
• 決まりきった内容の繰り返しをできるだけ少なくする: たとえば、著作権に関する説明をすべてのページの下部に含める代わりに、短い要約文を含め、詳細情報のページにリンクします。
• スタブの公開を避ける: ユーザーは「空の」ページが表示されることを好まないので、プレースホルダーはできるだけ使わないようにします。たとえば、実際のコンテンツがまだ存在しないページは公開しません。プレースホルダー ページを作成した場合はrobots.txt を使用してクロールをブロックします。
• コンテンツ管理システムについて理解する: コンテンツがウェブ サイトで表示される仕組みをよく理解しておきます。ブログ、フォーラムなどのシステムでは、同じコンテンツがしばしば複数のフォーマットで表示されます。たとえば、ブログのエントリはブログのホームページ、アーカイブ ページ、および同じラベルを持つ他のエントリのページに表示されることがあります。
• 類似する内容をできるだけ少なくする: 類似するページが多数存在する場合は、各ページに内容を追加するか、1 つにまとめます。たとえば、旅行サイトで 2 つの都市を別々のページで紹介しているが、ページ内の情報は同じである場合は、両方の都市を紹介する 1 つのページにまとめるか、各ページに内容を追加して、それぞれの都市に関する独自のコンテンツを含めます。

サイトに重複するコンテンツが存在しても、偽装や検索エンジンの結果を操作する意図がうかがえない限り、そのサイトに対する処置の根拠とはなりません。重複するコンテンツが問題になっていて、上記のアドバイスが適用されていない場合、Google の検索結果に表示されるコンテンツのバージョンは Google で選択されます。

カテゴリ:seo | Page Top

Google｜技術関連のガイドライン

以下はGoogleのウェブマスター向けガイドラインの引用文です。

• Lynx などのテキスト ブラウザを使用してサイトを確認する。ほとんどの検索エンジン スパイダーがサイトを認識する場合、Lynx と同様の形式で認識しています。 テキスト ブラウザで、JavaScript、cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能を使用して作成されたサイトの一部が表示されない場合は、検索エンジン スパイダーがサイトをクロールするときに問題が発生する可能性があります。
• セッション ID やサイト内のパスを追跡する引数がなくても、検索ロボットがサイトをクロールできるようにする。 これらの技術は個々のユーザーの行動を追跡する場合には便利ですが、ロボットがアクセスするパターンとはまったく異なります。 これらの技術を使用すると、実際は同じページにリンクしている、異なる URL をロボットが排除できず、そのサイトのインデックスが不完全なものになる可能性があります。
• ウェブ サーバーが If-Modified-Since HTTP ヘッダーに対応していることを確認する。この機能を使用すると、Google が前回サイトをクロールした後にコンテンツが変更されたかどうかをサーバーから Google に通知し、帯域幅や負荷を軽減できます。
• ウェブ サーバーの robots.txt ファイルを活用する。このファイルでは、クロールを実行するディレクトリと実行しないディレクトリを指定できます。誤って Googlebot クローラがブロックされることのないよう、このファイルにサイトの最新の状態が反映されていることを確認してください。サイトへのロボットのアクセスを制御する方法については、次の URL (英語) をご覧ください。
  http://www.robotstxt.org/wc/faq.htmlGoogle ウェブマスター ツールのrobots.txt 分析ツールを使用して、robots.txt ファイルを正しく使用しているかテストできます。
• コンテンツ管理システムを導入する場合は、検索エンジン スパイダーがサイトをクロールできるように、システムからコンテンツをエクスポートできることを確認する。
• robots.txt を使用して、検索結果ページや、検索エンジンからアクセスしたユーザーにとってあまり価値のない他の自動生成ページをクロールしないよう制御します。

カテゴリ:seo | Page Top

Google｜デザインおよびコンテンツに関するガイドライン

以下はGoogleのウェブマスター向けガイドラインの引用文です。

• わかりやすい階層とテキストリンクを持つサイト構造にする。 各ページには、少なくとも 1 つの静的なテキスト リンクからアクセスできるようにします。
• サイトの主要なページへのリンクを記載したサイトマップを用意する。 サイトマップ内にリンクが 100 以上ある場合は、サイトマップを複数のページに分けます。
• 情報量が豊富で便利なサイトを作成し、コンテンツをわかりやすく正確に記述する。
• ユーザーがサイトを探すときに入力する可能性の高いキーワードをサイトに含める。
• 重要な名前、コンテンツ、またはリンクを表示するときは、画像の代わりにテキストを使用する。 Google のクローラでは、画像に含まれたテキストは認識されません。
• TITLE タグと ALT 属性の説明をわかりやすく正確なものにする。
• 無効なリンクがないかどうか確認し、HTML を修正する。
• 動的なページ (URL に “?” が含まれているページなど) を使用する場合、検索エンジンのスパイダーによっては、静的なページと同じようにはクロールされない場合があることを考慮する。 パラメータを短くしたり、数を少なくすると、クローラで見つけやすくなります。
• ページのリンクの数を適切な数に抑える (100 未満)。

カテゴリ:seo | Page Top

DOCTYPE宣言(文書型宣言)について

Strict  厳密型DTD

W3Cの仕様で非推奨とされる要素、属性、フレーム機能用の内容を一切使用しない。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Transitional 移行型DTD

W3C の仕様で非推奨とされる要素や属性も使用する 。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Transitionalで記述していても、非推奨要素などを使用せず、正しい記述に沿って(X)HTMLを記述するのであれば、それは立派な厳密型です。

カテゴリ:(X)HTML | Page Top

XHTML記述ルール

終了タグ

HTMLでは一部のタグで終了タグの省略が可能でしたが、XHTMLではどの要素も必ず最後は終了タグで閉じます。

HTML
<ul>
<li>サンプル
<li>サンプル
</ul>

XHTML
<ul>
<li>サンプル</li>
<li>サンプル</li>
</ul>

また、<br>などの空要素は<br />と半角スペースとスラッシュを追加します。

head要素内に記述するmeta情報やlink情報も半角スペースとスラッシュで閉じます。

<meta http-equiv=”Content-Style-Type” content=”text/css” />

<meta name=”keywords” content=”***” />

<rel=”stylesheet” href=”***.css” type=”text/css” media=”screen” />

小文字で記述

HTMLでは大文字と小文字の区別はありませんでしたが、XHTMLでは小文字で記述します。(大文字と小文字を区別します。)

HTML
<P>***********</P>

XHTML
<p>***********</p>

属性値

HTMLでは省略が可能な属性値もXHTMLでは省略する事は出来ません。「属性=”属性値”」形式で記述しなければいけません。

XHTML
<input type="radio" checked="checked">

引用符

XHTMLでは全ての属性値を必ずダブルクォーテーション（”）、もしくはシングルクォーテーション（’）の引用符でくくらなければなりません。

カテゴリ:(X)HTML | Page Top

DOCTYPE宣言とレタリングモード表

カテゴリ:(X)HTML | Page Top

標準準拠モードと後方互換モード

ウェブページを閲覧する為のInternet Explorer,Opera,Firefoxなどのブラウザには、(X)THML上で宣言された文書型定義（DTD）に応じて表示モードを切り替えてしまう機能が備えられています。これを !DOCTYPE スイッチ（!DOCTYPE Switching）といいます。

表示モードとは、それぞれの互換性を重視した後方互換モードと、W3Cの仕様を重視した標準準拠モードです。ウェブサイト制作者が仕様に準拠して正しい書式に沿った文書を作成していれば何も問題はありませんが、ウェブ技術の進歩に未対応の場合や、一部問題のある記述をしている制作者もいる為に、文書型定義（DTD）に応じて表示モードを自動的に切り替えてしまう機能が備わっています。

DOCTYPEによる解釈の違い

DOCTYPEによる解釈の違いはさまざまありますが、以下はレイアウト崩れ関係する部分です。

• paddingの解釈
• borderの解釈

サンプルソース
#sample{
width: 200px;
margin: 0;
padding: 0 10px;
border: 1px solid #cccccc;
}

上記ソースの場合、後方互換モードの解釈は200pxですが、標準準拠モードでは222pxとなります。つまり、標準準拠モードではpaddingとborderはwidthに含まないと解釈されます。

Internet Explorerでは上手く表示できたのに、Firefoxではレイアウトが崩れた,,,,というのは、これが原因の一端です。

関連情報：CSSレイアウト崩れの原因について

カテゴリ:(X)HTML | Page Top

非推奨属性と代替え指定

カテゴリ:(X)HTML | Page Top

非推奨要素と代替え指定

カテゴリ:(X)HTML | Page Top

background-position：背景画像の配置

プロパティ

background-position

値

単位 | キーワード(下記参照)

[ left | center | right ]

[ top | center | bottom ]

[ パーセンテージ | px | em ]など

対象

すべての要素

継承の有無

なし

background-positionサンプル

横方向
.sample{
background-image: url(sample.jpg);
background-repeat: repaet-x;
background-position: left top;
(background-position: 0 0;)
}

.sample{
background-image: url(sample.jpg);
background-repeat: repaet-x;
background-position: left center;
(background-position: 0 50%;)
}

.sample{
background-image: url(sample.jpg);
background-repeat: repaet-x;
background-position: left bottom;
(background-position: 0 100%;)
}

縦方向
.sample{
background-image: url(sample.jpg);
background-repeat: repaet-y;
background-position: left top;
(background-position: 0 0;)
}

.sample{
background-image: url(sample.jpg);
background-repeat: repaet-y;
background-position: center top;
(background-position: 50% 0;)
}

.sample{
background-image: url(sample.jpg);
background-repeat: repaet-y;
background-position: right top;
(background-position: 100% 0;)
}
など

[px]を使えばさらに細かな指定可能。

カテゴリ:CSSプロパティ一覧 | Page Top

background-repeat：背景画像の繰り返し

プロパティ

background-repeat

値

キーワード(下記参照)

repeat | repeat-x | repeat-y | no-repeat

対象

すべての要素

継承の有無

なし

repeat(繰り返し)

repeat-x(横方向に繰り返し)

repeat-y(縦方向に繰り返し)

no-repeat(繰り返しなし)

background-repeatサンプル

background-positionを参照

カテゴリ:CSSプロパティ一覧 | Page Top

background-image：背景画像指定

プロパティ

background-image

値

URL

対象

すべての要素

継承の有無

なし

ポイント

アクセシビリティ上、背景画像と文字色はユーザーに見やすい設定にする。

background-image指定サンプル

.sample{ background-image: url(sample.jpg); }

.sample{ background-image: url(images/sample.jpg); }

.sample{ background-image: url(../images/sample.jpg); }

.sample{ background-image: url(http://www.sample.jp/images/sample.jpg); }など

カテゴリ:CSSプロパティ一覧 | Page Top

background-color：背景色指定

プロパティ

background-color

値

単位 | キーワード(下記参照)

対象

すべての要素

継承の有無

なし

ポイント

アクセシビリティ上、背景色と文字色はユーザーに見やすい設定にする。

background-color指定サンプル

p{ background-color: red; }

p{ background-color: #f00; }

p{ background-color: #ff0000; }など

サンプル

カテゴリ:CSSプロパティ一覧 | Page Top

color：文字色

プロパティ

color

値

単位 | キーワード(下記参照)

対象

すべての要素

継承の有無

継承

ポイント

アクセシビリティ上、背景色と文字色はユーザーに見やすい設定にする。

color指定サンプル

p{ color: red; }

p{ color: #f00; }

p{ color: #ff0000; }など

サンプル

カテゴリ:CSSプロパティ一覧 | Page Top