CSSファイルを使用して検索上位ヒット、脱テーブル

googleで検索上位ヒットを検索すると10位以内に『CSSファイルで検索上位ヒット 脱テーブル』が表示されるようです。

スタイルシートとCSSファイル

HTML文書にスタイルシートを適用させるには、CSSファイルが利用される事が多い。この為、スタイルシート＝CSSファイルと思われている。

スタイルシートとは

HTML文書の見栄えと構造を分離する為のもの。詳しくは スタイルシートWikipedia（別ウィンドウ）

検索上位ヒットの為に。CSSファイルを利用する利点

  1. グーグルなどの検索エンジンが重要視する＜body＞の直後に、キーワードを埋め込むのが簡単。

    上部に表示されるメインメニューなどをHTMLファイル上では最後の部分に書き、CSSファイルで表示位置を先頭に変更する事ができる。これにより、検索エンジンが重要視する＜body＞の直後に、本論に関係ないメインメニューなどを書かないですみます。検索上位ヒットしやすくなる。すこしだけ。

  2. サイト全体の構成を統一するのが、簡単。

    共通な配置構成、背景、文字の色、大きさなどをCSSファイルに書いておいて、各HTMLファイルでは、＜link rel="stylesheet" href="base.css" type="text/css" /＞と１行だけ書けば良い。余計な手間は省いて、コンテンツの作成に手間をかける。検索上位ヒットしやすくなる。すこしだけ。

  3. HTMLファイルのサイズが小さくなる。

    HTMLファイルに＜h2＞＜fontsize="large"＞XYについて＜/fontsize＞＜/h2＞などと書くより、色の指定、大きさの指定をCSSファイルに書いておけば、たいていの場合、HTMLファイルのサイズは小さくなる。これは、検索エンジンにも、訪問者にも、製作者にもメリットになる。検索上位ヒットしやすくなる。すこしだけ。

  4. CSSファイルで脱テーブル レイアウト。

    テーブルをレイアウト目的で使ってはいけません。

  5. CSSファイルで脱フレーム レイアウト。

    フレームを使うのは、検索エンジンにも人間にも嫌われます。

上位ヒットの方法についは、グーグルやヤフーの企業秘密で、公開されていません。

上位ヒットの為にできる事は何でもやってみようという事で、CSSファイルを使って、このサイトを作っています。

CSSファイルを利用するデメリット

CSSファイルを使ってホームページを作る事が、いまや、世界標準となりつつあります。その事に早く気がついた人、早く勉強を始めた人が勝ちです。CSSファイルのデメリットは少ししか、ありません。

CSSファイルを利用したホームページの作成

CSSファイルを利用したホームページの作成（見本）が簡単にできます。以下の手順に従って、CSSファイルとHTMLファイルをダウンロードしてください。

ただし、CSSファイルを利用する利点１で書いた、「検索エンジンが重要視する＜body＞の直後に、本論に関係ないメインメニューなどを書かない。」は生徒用の為、行っていません。三郷北高校の「情報」の授業で扱っている教材を少し改良したものです。

CSSファイル見本初級のダウンロード

新しいフォルダを作っておいて、ください。以下の１から１３のリストをクリックして開いたページの手順にしたがってください。

  1. css11.htmをダウンロード（別ウィンドウ）
  2. css12.htmをダウンロード（別ウィンドウ）
  3. css13.htmをダウンロード（別ウィンドウ）
  4. css21.htmをダウンロード（別ウィンドウ）
  5. css22.htmをダウンロード（別ウィンドウ）
  6. css23.htmをダウンロード（別ウィンドウ）
  7. css31.htmをダウンロード（別ウィンドウ）
  8. css32.htmをダウンロード（別ウィンドウ）
  9. css33.htmをダウンロード（別ウィンドウ）
  10. css41.htmをダウンロード（別ウィンドウ）
  11. css42.htmをダウンロード（別ウィンドウ）
  12. css43.htmをダウンロード（別ウィンドウ）

  13. cssファイルをダウンロード（別ウィンドウ）

    表示されたcssファイルの内容をコピーして、メモ帳などに貼り付けます。それをbase.cssという名前で保存したら、cssFILE1.htmは閉じてください。（クリックした後の、画面の説明に従ってください。）

  14. 新しく作成したフォルダの中にcss11.htmからcss43.htmまでの１２個のファイルと、base.cssというファイルがあれば、終了です。css11.htmをIEインターネット　エクスプローラで開いてみてください。

base.cssファイルのコメント

base.cssファイル内にはコメントが書かれています。/*　*/で囲まれた所がコメントです。コメントは削除しても動作に変化は起きません。

解説はCSSファイルについてのコメントへ

CSSファイルの見本。超初級と中級

  • 超初級

    このページのCSSファイル初級をさらに簡略化したものが
    CSSファイルサンプル超初級にあります。

  • 中級

    CSSファイルを利用したホームページの作成（中級編）に
    「メインメニューをHTMLファイル上では最後に書く」ためのCSSファイルのサンプルをのせてあります。このサイト自体も「メインメニューを最後に書く」という方法で作成されています。

HTMLファイルの変更の仕方

  1. ホームページビルダーなどで開くと、表示が乱れる事があります。css11.htmなどをメモ帳などで、開いてください。
  2. 日本語で書かれている所を変更してください。具体的には、
  3. ■メインメニュー■と■サブ　メニュー■の下の＜a href="css11.htm"＞★★へ＜/a＞「★★へ」の部分を変更してください。
  4. ＜!-- ===== --＞と＜!-- ===== --＞の間の内容を変更してください。
  5. あとは、試行錯誤してください。このページを開いた方なら、簡単にできるはずです。
  6. 分からない事がありましたら、M君の掲示板に書き込んでください。可能な限り、お答えします。質問掲示板 数学パソコン 草加 M君へ
  7. サンプルの「sitemap」（サイトマップ）と「bbs」（掲示板）の飛び先は存在しません。ご自分で作ってください。

HTMLファイルのメニューの簡単な変更方法

多数のホームページがある場合、新しいページを追加した時のメニューの更新は大変です。簡単にメニューを更新する方法は、NoEditorのGREP機能でメニューの更新を自動化

補足

このサンプルには「index.htm」ないし「index.html」がありません。（三郷北高校の「情報A」用のため）「css11.htm」を上記の名前に変えるといいと思います。

CSSファイル、スタイルシートについては以下のサイトが参考になります。
HTMLリファレンス中級

CSSファイルに関する無料公開講座

  • 講座名：検索上位表示されるホームページの作り方
  • 費用：無料
  • 場所：埼玉県三郷市三郷北高校
  • 日時：08年。7月26、27、8月2、3の土日、4日間の13時〜16時。
  • 内容：CSSファイルの使い方。検索で上位ヒットする方法。検索エンジンの仕組み。HTMLタグと検索順位の関係。
  • 申し込み方法は、三郷北高校無料公開講座

ホームページの作り方に関する無料公開講座

  • 講座名：テキストエディタを使ったホームページの作成
  • 講座内容予定：
    1. 12月27日（土）1時〜4時。NoEditorの使い方。
    2. 12月28日（日）〃。HTMLタグについて。
    3. 1月4日（日）〃。検索で上位表示されるホームページの作成。
    4. ホームページ・ブログの作成経験がある方に最適です。
    5. ホームページの作成が主題です。
  • 費用：無料
  • 場所：三郷北高校　パソコン教室５階

最後まで読んでいただいて、ありがとうございました。