ネットでお金を稼ぐ方法を比較してまとめた、無料のお金稼ぎ攻略サイト。小中学生の子供から主婦、お年寄りまでできるよう、わかりやすく解説。

トップ ＞ サイト作成とSEO対策 ＞ 現在のページ

CSS（スタイルシート）は、HTMLの補佐的な役割を果たします。

カスケーディング・スタイル・シートと呼ばれる、
専用のメモ帳に書いていきます。

最近のウェブサイト作成では、表の大きさや文字の色、
ページ全体のレイアウトなどといった細かい数値、
スタイルの設定については、
HTMLでは行わず、CSSで設定することが鉄則です。

CSSを使えば、以下のような利点があります。

• ページの共通部分をある程度管理できる。CSSの一箇所をいじれば、すべてのページの共通部分を一括で変更できる。

• HTMLで長い記述をする必要がなくなるので、ページが軽くなる。結果的にSEO的にも有利となる。

• IE、Firefox、GoogleChrome、Safari、Operaなど、あらゆるブラウザでの表示に対応できる。

HTML同様、CSSもまた、
ウェブサイト作成の際には学習の必要な知識です。

アフィリエイトで稼ごうとしている人達は、
確実にCSSを操れるようにしましょう。

たとえばCSSに「p{font-size:95%;}」と書けば、
全ページのHTMLでのpタグ内の文字が、９５％の大きさになります。

このときpをセレクタ、font-sizeをプロパティ、95%を値といいます。

プロパティと値の間には半角のコロンを記入し、
半角の中括弧でプロパティ、値を囲います。

また、値は複数もちいることもあり、
最後の値のあとには半角のセミコロンを使います。

CSSのセレクタ	HTMLの属性	特徴
.半角英数字	class	ページ内で何度も使える
#半角英数字	id	ページ内で一回しか使えない

CSSで「.redletter{color:red;}」と記入すれば、
HTMLで「<p class="redletter">」で囲った部分は、
すべて赤色で表示されます。

このようにCSSの「.半角英数字」のセレクタの名前は、
HTMLのclass属性の中身と対応しています。

このCSSでの半角ピリオドのあとの半角英数字の名前は、
自分で好きな名前をつけることができます。

ただし、冒頭に数字を持ってくることは不可能です。

またCSSで「#letter1{font-size:12pt;}」と記入すれば、
HTMLで「<div id="letter1">」で囲った部分の文字が、
12ptの大きさで表示されます。

CSSの「#半角英数字」のセレクタは、HTMLのid属性と対応します。

この「.半角英数字セレクタ・class属性」と、
「#半角英数字セレクタ・id属性」の使い分けですが、
前者はページ内で何度も使えるという特徴がある一方、
後者はひとつのページごとに一度しか使えません。

class属性は文字などの装飾等に使い、
id属性はページのレイアウト等に使っていくのがオススメです。

CSS	オススメの要素	主な用途
.半角英数字・class	span	文字の装飾など
#半角英数字・id	div	ページのレイアウトなど

CSSを使う上で重要になるのが、HTMLのdiv要素とspan要素です。

divとspan自体はなんの性質も持たない要素で、
CSSとセットで使うことが前提になるタグです。

CSSでHTMLのなにかを規定したいとき、
pやfontなど、特に指定する要素がない場合に使います。

span要素（インライン要素）は一行以内で完結する際のみ使えますので、
もっぱら「.半角英数字セレクタ・class属性」のclassセレクタと組み合わせて、
文字の装飾などに使います。

一方でdiv要素（ブロック要素）は改行を必要とする際に使いますので、
やはり「#半角英数字セレクタ・id属性」のidセレクタと組み合わせて、
ページのレイアウト等に向いています。

またCSSで、
「#box1 td{width:150px; border:2px double;}」と記入することで、
HTMLで「<div id="box1">」で囲まれた部分のtd要素は、
なにもいじらなくても、すべて横幅150px、
罫線が2pxの二重線で表示されます。

このように、セレクタのあとにHTMLの要素を書くことで、
id属性やclass属性で規定された範囲内の特定のHTMLタグ群を、
一気に設定することができるのです。

この方法を使えば、かなりHTMLの記述を軽量化できますので、
SEO的に非常に有効です。

（１）font-style・font-size・font-family

文字の形、大きさ、種類を決定します。

font-styleの値normalは、
dfn要素のように元から斜体になっている要素を、
標準の文字にしたい場合に使えます。

またfont-familyのセレクタをbodyに設定することで、
ページ全体の文字を固有のフォントにすることができます。

当サイトでもヒラギノ角ゴなどを用いています。

（２）line-height

行と行の間の余白（行間）を設定します。

コンテンツ本文を見やすくするユーザビリティのために使用します。

本文をこのプロパティのdiv要素でくくることで使えます。

（３）color・background

colorは文字の色を設定します。

基本的には黒を、強調したい文字には赤や青を使いましょう。

backgroundは背景の色や画像を設定します。

colorに暗い色を使う場合、
backgroundで暗い色や暗い画像を使ってしまうと、
当然見にくくなってしまいます。

SEO的にもスパム（不正SEO）と見なされることがありますので、
colorとbackgroundの色は、それぞれユーザビリティを考慮しましょう。

（４）text-align

left、center、rightの値で、
それぞれ文章を左寄せ、中央揃え、右寄せにします。

（５）width・height

横幅、縦幅の長さを設定します。

主にはtable要素群やul要素群、div要素と組み合わせ、
表やレイアウトに使います。

（６）border

罫線の太さや色、種類を決めます。

種類はsolid、double、groove、ridge、
inset、outset、dashed、dotted等の値があります。

それぞれブラウザによって見栄えがずいぶんと違ってきますので、
設定する場合は注意が必要です。

（７）padding・margin

余白を作ります。

前者はHTML要素（わかりやすく言えば罫線）の内側の余白を、
後者はHTML要素の外側の余白を設定します。

（８）list-style-type

主にul・ol要素群に使われるプロパティで、
箇条書きの先頭に表示されるマーカーの種類を変更します。

noneの値をとった場合マーカーを消すことができ、
これはul・ol要素群で、table要素の代わりに表を作る際に多用します。

その際はpadding-left・margin-leftのプロパティで、
0pxの値を設定することで、
左にあるマーカー分の余白をつめることができます。

（９）float

left、rightの値で、それぞれ指定した要素を左寄せ、右寄せにします。

レイアウトに使う場合は、div要素のidセレクタで多用します。

左に置きたいdiv要素にleftの値を指定し、
右に置きたいdiv要素にrightの値を指定することで、
当サイトのコンテンツ（左）とサイドバー（右）のように、
２つのdiv要素を並列に配置することができます。

（１０）clear

bothの値を設定することで、上記のfloatを解除します。

floatによる並列配置をやめたい場合、
その次の要素にこのプロパティを使います。

ですから、もっぱらフッターのdiv要素などに使われます。

HTML同様、CSSも深く解説していくと膨大な情報量となりますので、
当ページでは概略しか書いていません。

CSSはHTMLと比べて更に複雑です。

しっかり使いこなすためには、CSSの解説ウェブサイトをご覧ください。

●　CSSレイアウト実践講座

●　CSS入門

他人のCSSを見たい場合はウェブサイトのソースで、
rel属性の中身がstylesheetとなっているlink要素のhref属性の中身を、
ブラウザのアドレス表示にコピペすれば見れますし、
FirefoxではFirebugというアドオンをインストールすれば見れます。

最初は他人のスタイルシートを自分のパソコンに保存して、
「ここをこうするとこうなるのか」といった感じに、
色々実験してみるといいでしょう。

基本的にCSSで設定できるものはすべてCSSで設定し、
HTMLの記述を極力少なめにしていくのがコツです。

■　次ページ　稼ぐためのSEO対策とユーザビリティの基本

管理人別運営サイト　リンク・免責事項・著作権について　管理人の自己紹介・連絡先

管理人メルマガ　当サイトの収入実績　更新履歴　サイト全ページ一覧