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

ネットで稼ぐためのCSSの基本
<ネットでお金を稼ぐ方法・上級マニュアル6>


バームクーヘン


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

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


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

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


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

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

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


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

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


CSSの基本


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

このとき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オススメの要素主な用途
.半角英数字・classspan文字の装飾など
#半角英数字・iddivページのレイアウトなど

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的に非常に有効です。


CSSで多用するプロパティ


(1)font-style・font-size・font-family

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

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

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

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


(2)line-height

行と行の間の余白(行間)を設定します。

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

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


(3)color・background

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

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

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

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

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


(4)text-align

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


(5)width・height

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

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


(6)border

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

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

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


(7)padding・margin

余白を作ります。

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


(8)list-style-type

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

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

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


(9)float

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

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

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


(10)clear

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

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

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


もっと深くCSSを知ろう


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

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

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

● CSSレイアウト実践講座

● CSS入門


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


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

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


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


<期間限定・当サイトからの無料プレゼント>

*メールアドレス
*名前
12月31日まで限定で、当フォームから当サイトの無料メルマガに登録してくださった方に、プレゼント「成功するためには苦痛を快楽にせよ」を無料配布中です。

<素早く1万円~10万円を無料で稼ぐ方法>

モッピーで稼ぐ
モッピー登録無料)は、サービスの無料登録、カード・口座作成やゲーム、メール受信、広告クリックといったデータ入力作業で、すぐにお金を稼ぐことができます。
Copyright(c) 2012-2017 ネットでお金を稼ぐ方法大百科