スタイルシートについて解説しています。
子育てママののほほんおこづかい稼ぎマニュアル

TOP初心者向けアフィリエイトホームページ作成講座 >スタイルシートを使おう
スタイルシートを使おう

スタイルシートを使って、サイトを作りましょう。

スタイルシートとは、ホームページの「見栄え」を定義するための、技術のことを言います。HTMLはサイトの『文書だけ』を作成し、『見た目』はHTMLではなく、スタイルシートで作成しましょうということです。

WWWで利用される技術の標準化をすすめる団体を『W3C』は、『見た目』箇所にスタイルシートを使うように推奨しています。

具体的にいうと、実物を例としてあげてみます。下の画像を見てください。これは当サイトの現在のトップページの裏側部分になります。

下の画像通り、ホームページの文章はHTMLで入力してあります。

HTML画像

それ以外の見栄えに関する部分、例えばページのレイアウトや飾り付け(文字の大きさや色、表の色や線の種類…など)は文章とは別にスタイルシートとして入力してあります。

スタイルシート画像

このふたつを合わせたものが、インターネット上でこのように表示されます。

トップページ画像

見づらい場合は、画像をクリックすると拡大されます。

これをスタイルシートと言います。ここではスタイルシートの役割、使い方、スタイルシートの参考サイトを解説しましょう。

スタイルシートの役割

ここではどのようにスタイルシートを使うのか、役割を紹介します。

見栄えが抜群によくなる

スタイルシートで登録したスタイルを、いろんなページで使うので、ページ全体が統一され見栄えがよくなります。さらに自由な発想でできるため、自分の思い通りのページが作成できます。

編集がとっても楽!

色や大きさをなどを変えたい、という時、スタイルを登録してあるスタイルページだけを変更します。するとホームページ全体から、同じ名前がついているスタイルだけを一括変更させられます。ページ数が多ければ多いほど、編集が楽にすみ、とても便利です。

HTML編集画面も見やすくなる

同じタグを何度も使わないため、HTMLの編集画面のページもすっきりし、見やすくなります。

ページが軽くなる

スタイルシートを使わなくても、HTMLのテーブルタグを使えば、ホームページの細かなレイアウトを取ることができます。でもテーブタグを何重にも囲って作ったレイアウトは、それだけでファイルサイズが大きくなってしまい、ページが重くなってしまいます。結果、階層が深くなるため、なかなか開かないホームページになることに。

当初、このサイトもスタイルシートを使わずに、テーブルタグでレイアウトを取った、ホームページでした。旧ホームページと、現在のスタイルシートを適用したホームページのファイルサイズを比較するとなんと半分以下に!

スタイルシートを使うとホームページはページは軽くなり、使いやすくなります。これについては、後ほどのアフィリエイトサイトの構成とデザインで解説していきます。

ホームページの表を別名、『テーブル』と言います。

表の中にもうひとつ表を作り、さらにその中に表を作り…。何重にも囲った一番外側の表から内側に向かった、深さを表わすものを『階層』と言います。

スタイルシートの使い方

まずスタイルシートのページを作成します。ここには自分がホームページの各箇所で使用したいスタイルを作成、名前をつけて登録します。そしてそのスタイルを、ホームページ本体ページの指定したい箇所に、スタイルシートで登録したスタイル名を入力します。

そうすることで、スタイルシートのスタイルを適用させた箇所すべてに、同じスタイルを使うことができます。こうすればどのページでも、どの箇所でも、スタイルシートを変更するだけで、同じスタイル名を適用した箇所は、一括で変更することができます。

スタイルシートについての参考サイト

スタイルシート…と言っても、HTMLすらわからないホームページ作成初心者の人がスタイルシートを1から作成するのは正直とても大変なコト。

そんなときはスタイルシートのサンプルを提供してくれているサイトを利用してみるといいかもしれません。サンプルを自分のホームページ用に細工して使うので、スタイルシート作成のコツがつかめるようになります。

どんなコトでもそうですが、覚えるためには一度始めてみることが一番手っ取り早く覚えられます。違うパターンのスタイルでも作り方はみな同じ。コツをつかめば意外と簡単に作成できますよ♪

超初心者のためのスタイルシート講座

スタイルシートの専門知識の解説。管理人が思うところによるとこれ以上専門用語をつかわずに初心者にわかるように解説してくれているスタイルシート関連のサイトはないです。

スタイルシートサンプル-eWeb-

サンプルを提供してくれるサイトです。初心者がスタイルシートを一から作成するのはとても大変なコト。なのでサンプルをいじりながら作成していきましょう。これだけでも充分勉強になります。

重要!アフィリエイトで稼ぐためのスタイルシートのポイントまとめ

アフィリエイトで稼ぐためには、アクセスを得るのが大切です。ここではアクセスアップのための、スタイルシートのポイントをまとめました。とても重要なことなので、ぜひ目を通しましょう。
後のSEO対策に関連する内容にもなります。

SEO対策とは、ロボット型検索エンジンの検索結果に上位表示させるためにホームページを細工するコトを言います。

スタイルシートでホームページの階層が浅くなる

前述した通り、スタイルシートを適用すると、ホームページの階層を浅くできます。その理由は、表の挿入を最小限で済ませられるから。 ホームページのレイアウトを表だけで取ろうとすると、何重にも囲った表を使わねばなりません。

何重にも囲った表の情報は、ロボット型検索エンジンの情報収集ロボットが、深い層の表まで辿り着けない原因に…。結果、表の中の情報がロボット型検索エンジンに収集されにくくなります。最終的に、そのページの情報は検索エンジンの検索結果に、ずっと表示されなくなってしまいます。

でも表はホームページのレイアウトに必ず使うもの。見た目がシンプルなレイアウトを取ることを心がけ、表の挿入は最低限にとどめましょう。そしてホームページのデザインは、スタイルシートで整えるようにすると、表の挿入は最低限で抑えることができ、階層も浅くなります。

詳しくは後ほどのアフィリエイトサイトの構成とデザインでも解説していきます。

インターネット上にあるさまざまなホームページの情報を拾って、検索エンジンの検索結果に表示してくれるものを、ロボット型検索エンジンの情報収集ロボット(別名:クローラー)と言います。

HTML編集画面がすっきりする

HTML画面がすっきりすることで、ロボット型検索エンジンの情報収集ロボットがホームページ内のキーワードを探しやすくなり、情報を拾いやすくなります。

同じタグを何度も使った、タグだらけの情報では、ロボット型検索エンジンの情報収集ロボットも目的のキーワードを探すのが大変。 このような理由から、HTML編集画面をすっきり見やすくすると、ロボット型検索エンジンの情報収集ロボットがホームページの情報を収集しやすくなります。

初心者向けアフィリエイトブログ作成講座へ戻る♪

アフィリエイトでおこづかいへ戻る♪

子育てママののほほんおこづかい稼ぎマニュアルTOPへ