やさしいHTML5入門
CSSとは
書き方
HTMLへの適用法
ボックス概念
文字の色を変えよう
背景色を変えよう
背景に画像を入れよう
角丸を作る
ボックスに影を入れる
文字に影を入れる
透明
グラデーション

始める準備
Folderを準備しよう
メモ帳の使い方
TextEditの使い方

書き方
外部ファイル

HTML5.Mac:win対応のフリーエディターのリンクです。
(2011年8月現在)
aloha-editor
BlueGriffon
aptana
「mi」は一応winも対応。シンプルなエディタです。
mi

おすすめエディタ
CSS3書き方の基本知識
*HTMLファイル内でのCSSの記述例はここをクリック
CSSでHTMLに対して、効果を適応するためには、htmlの、どの要素(PタグやHタグ等)に効果を適応させるかを指定する必要があります。


 
上の例では、h1タグの例と、tableタグの複数のプロパティー(このあと説明あり)を指定する記述を参考として書いてあります。
 
プロパティ−と言うのは、CSSの効果を指定するための単語です。上の例では、colorwidthプロパティです


colorは色を指定するプロパティーです。


widthは、幅です。
 
色や幅を指定しただけでは、それが何色なのか、でれだけの幅なのか、わかりませんね。


だから、プロパティーに対してを指定します。


上の例では、#00ff99や、400pxというのがそれぞれのになります。
 
色の場合は、直接redとかblueとかpinkというように、英単語で指定する事も出来ます。


その場合は、#〜の部分を消して、英単語を入れてください。


そして400pxのpxというのはピクセルと言います。


1pxがモニターの最小の光の粒です。


モニターは光のつぶつぶで構成されています。


つまりそのモニターで表現できる最小の単位という事になります。


ということはモニターによって多少のばらつきがでる可能性があるという事にもなります。


400pxというのは、400粒分の幅という事です。


これは、物差しとかがある訳ではないので、自分で入れながらピクセルの感覚はつかむしかないです。


すぐ慣れますので心配は、いらないです
 
要素や値は必ず{}で囲ってください。


あと記述の終わりの;を入れ忘れると、上の例でいくと。h1の終わりの;}を抜くと、下のtable以降の効果は出なくなります。


cssの処理は、上から順に、読み取っていますので、逆にtableの方で}を忘れても、今回の場合は、その下にさらに記述がないので、問題は起こりません。


ただ今回のtableには、二個のプロパティーと値を設定してますから、上の方の記述で;を忘れると、 その下の記述からは無効になります。


気をつけてくださいね。
 
余談ですが、ピクセルの事がでたので、モニターは光で色を表現しています。


RGBといって赤緑青の英単語の頭文字をとっています。


光の三原色と言って、これでほぼ全ての色を、表現しています。


先ほどの#00ff99というのは、 16進数で(1 2 3 4 5 6 7 8 9 a b c d e f)2個づつで、RGBを指定しています。


今回の例だと、00がRの部分ffがGの部分99がBの部分の値になります。


そして0が一番暗くてfが一番明るくなります。


#000000とした場合は真っ暗なので黒になり#ffffffとすれば、一番明るいので白になります。
 
 
戻る(CSSとは)次へ (外部ファイル)