SEOで検索エンジン上位表示！猿でも出来るSEO対策

猿でも出来るSEO対策　（CSS）

CSS（スタイルシート）の重要性

ここからは、ホームページに対しての技術的な話が出てきます。初心者の方は難しく感じる所があるかもしれませんが、最後まで読んでいただければ必ずご理解いただけると思いますので、頑張っていきましょう！

いきなりですが、CSSってご存知ですか？

猿でも出来るSEO対策（基本編）の、パート2の最後に少しお話しましたがSEO対策を行なう上で、CSSは非常に重要な要素の１つとなってきます。

ここで、CSSについて再度、簡単にご説明いたします。

CSSとはカスケーディングスタイルシートの略なのですが、このCSSの役目はといいますと、ホームページ作成時において、デザインとコンテンツ（文章と思ってください）を、別々に定義しようという考え方です。

一昔前までは、CSS自体のルールが、現在ほど明確に決定していない部分が多く、CSSを使用すると、ブラウザ等によるユーザーサイドの使用環境によって、表示がとんでもないことになる場合が多く、使われることが少なかったのですが、現在はCSSの基準もかなり明確になってきたため、CSSの使用が必須項目となりました。（W3C的にもです）

もちろん「猿でも出来るSEO対策」も全てCSSで作成されています！

「CSS？？デザインと文章を分けて作る？？？」

CSSを今回はじめて聞いた方は、意味が把握しづらいかと思いますので、一度ここで、現在見ているこちらのページの、CSSをとってしまった場合はどうなるのか？をご覧下さい。

←クリック

※戻す場合は、ブラウザの更新ボタンを押してください。

どうですか？とんでもない表示になってしまいましたよね！様は、HTMLのページとCSSのファイル２つそろって初めて普通に閲覧できる、そして希望とするページとなるのです。

じゃあ、なぜCSSが必要なのか？

当然これだけではCSSの必要性がわかりません。

それでは以下にある２つのボックスを見比べて下さい。双方ともに幅480ピクセル、高さ60ピクセルを指定し、上付き、赤文字という具合に同じような指定を行ったものです。

普通に見る限りでは、大した違いを感じることは出来ません。 こちらはHTMLのtable（テーブル）タグを使って作成しました。

いかがでしょうか？ブラウザから見る限りでは、ほとんど違いは感じられないのではないでしょうか？しかし、今度はソースコードで見てみましょう！

まず最初にテーブルタグを使って書いた方をご覧下さい。

次に、CSSだけで書いた方をご覧下さい。

いかがでしょうか？違いがお分かりになりましたか？

最初のテーブルタグを使った場合には、不要なコードが多すぎる事に気がつきますでしょうか？次に、CSSを使った場合は、ソースコードが、物凄く簡潔に書いてあり、文章などが非常に見やすいですよね？

実は、検索エンジンも同じなのです。

余分なソースコードを省くことによって、検索エンジンが重要な文章や単語を拾いやすくなるのです。拾いやすくなるということは、拾った物が検索結果に反映されやすくなるのです。

今回は、1つのテーブルでソース結果を見てみましましたが、この違いです。

もしも、サイト全部をテーブルで作った場合はどうなるでしょう？大量の余分なコードによって大事な情報が、奥へ奥へと追いやられてしまいます。

まだまだあるぞ、恐るべしCSS！

SEO対策を行なう上で、CSSが必要な意味が伝わったかと思いますが、CSSはテーブルだけではありません。デザインに関する全ての定義を行なうことが可能です。

文字サイズ、文字カラー、表示位置、背景色、回り込み、解除、等々デザイン面における全てをCSSから定義することが可能です。

これら全てを、CSSによって定義することで、もっともっとソースコードを簡潔に書くことが出来ます。またSEO対策上非常に有利であるとされているブログですが、もちろんブログも全て、CSSでデザインされています。

また、CSSを使うと検索エンジンが、読み込む順番も自由に変えることが出来ます。通常検索エンジンは、ソースコードを上の部分から読み込んできます。

テーブルを使って書いた場合などは、この様な流れになりますが、2番目のメニュー部分って重要な文章なんて、あまり無いですよね？また、こちらに広告や、そのほかの物を掲載している場合、左側の重要性は更に低くなります。

しかし、検索エンジンは上記の様な流れで読み込んでいきます。

CSSを使った場合は↓

この様に、設定によって強制的に読み込ませる順番を変えることが可能なのでサイト内で重要な説明文やキーワードが確実に検索エンジンによって読み込まれます。これはSEO対策を行なう上で重要な要素といえるでしょう。

しかし、残念ながらCSSの使用方法や、CSSによって出来ることを全て書くことは当サイトでは出来ません。CSSの定義というものは、膨大な情報量だからです。完璧にCSSを理解されたい方は、CSSのリファレンスなど専門書籍を読まれることをお薦めします。

しかしながら、CSSを使いたいという方々の声が、あまりにも多く私もどうしたものかと考えました。そこで、CSSが使いたいとおっしゃっている方々には、ある共通点が存在することに気がつきました！

その共通点とは、みなさんは、すでにCSSを使っている！という事です。

ご意見をお寄せいただいた方のほとんどは、実はCSSを使っている人が8割だったのです。使い方は、文字の設定や背景色などが圧倒的に多かったです。

「じゃあCSS使えるじゃん！」 と私は思ったのですが、サイト全体をCSSで作るとなると、そこが問題のようです。

確かに、以前はまずテーブルを作って、分割してホームページを作っていた場合CSSでの作成は、設定項目が多く、少々難しく感じるかもしれません。

そこで今回は、サイト全体がCSSで定義された枠のテンプレートを作成いたしました。今回は、2カラムバージョンと3カラムバージョンを作成し、ダウンロードできるようにいたしましたので、必要な方はご使用下さい。

各部位を分かり易くするために、全て違う色で、色分を行なっています。

枠だけの非常にシンプルなものですが、逆に、 枠だけで何もない分、CSSを使ってのboxの組み方や定義方法が理解しやすいかと思います。

2カラムパターン1をダウンロードする。

2カラムパターン2をダウンロードする。

3カラムをダウンロードする。

※ホームページのカラム構成（箱の枠組み）に関して、ご要望がありましたらご連絡下さい。当方にて作成可能な場合、時間の都合も御座いますが、当方にて作成いたしますので以下のメールフォームよりご連絡下さい。

ホームページカラム構成依頼申し込み！