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" />と1行だけ書けば良い。
    余計な手間は省いて、コンテンツの作成に手間をかける。
    検索上位ヒットしやすくなる。すこしだけ。
  3. HTMLファイルのサイズが小さくなる。
    HTMLファイルに<h2><fontsize="large">XYについて</fontsize></h2>などと書くより、
    色の指定、大きさの指定をCSSファイルに書いておけば、たいていの場合、HTMLファイルのサイズは小さくなる。
    これは、検索エンジンにも、訪問者にも、製作者にもメリットになる。
    検索上位ヒットしやすくなる。すこしだけ。
  4. CSSファイルで脱テーブル レイアウト。
    テーブルをレイアウト目的で使ってはいけません。
  5. CSSファイルで脱フレーム レイアウト。
    フレームを使うのは、検索エンジンにも人間にも嫌われます。

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

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

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

CSSファイルを使ってホームページを作る事が、 いまや、世界標準となりつつあります。
その事に早く気がついた人、早く勉強を始めた人が勝ちです。
CSSファイルのデメリットは少ししか、ありません。
外部リンクCSSファイルの利点と問題点Wikipediaより(別ウィンドウ)

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

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

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

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

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

  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までの12個のファイルと、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でホームページのメニューの更新を自動化

補足

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

CSSファイル、スタイルシートについては以下のサイトが参考になります。
外部リンク 外部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. ホームページの作成が主題です。
  • 費用:無料
  • 場所:三郷北高校 パソコン教室5階
  • サイト内リンクテキストエディタを使ったホームページの作成

最後まで読んでいただいて、ありがとうございました。
↑CSSファイルを利用したホームページの作成の一番上へ↑