さて今回は『軽く実践編?スタイルシートの読み方』です♪
どこまで説明したら良いものか迷いましたが、
ペログーでの具体的な操作方法や細かい記述は、ひとまず省略することにします。
他にも詳しく解説している方が大勢いらっしゃいますので、そちらを参考にして頂くか、
若しくは例によってまたコメント欄やBBSにてお気軽にご質問下さい(笑
それでは今回も続きを読むからスタートですv
※注意※スタイルシートを実際に書き換える時には、デフォルト(書き換える前)の内容を
メモ帳か何かにコピー&ペーストで保存しておく事をオススメします。
まずはスタイルシートを見てください。(下図orご自分のCSSをご参考下さい)
※クリックすると大きくなります。コレはデフォルトのCSSなのですが、
コレを見て「こんなアルファベットの羅列なんか解る訳ない!」と思われた方、
実はよ〜く見ると案外解りやすかったりするのですよww
まずは一つ『body 〜』の部分を抜き出して見てみましょう。
CSSでは
body{
background-color:#FFFFFF;
color:#666666;
font-family: Osaka,Verdana,"MS Pゴシック",Arial,Helvetica,sans-serif;
font-size: 12px;
}
という形、これで一塊となってます。
body以外の所も全部
××{
・・・・・・・・・
・・・・・・
} となっているのがわかりますでしょうか?
前回の記事で『Aと名前を付ける』と書きましたが、その『A』にあたる部分が『××』となります。
すなわち『××』の部分は、ペログーさんではもう定義済みで変更不可なので、
私達(ペログーユーザー)が書き換えられる部分は”{ ”から ”}”の間だけと言う事になります。
次に”{ ”から ”}”までの中身を見てみることにします。
これも全て『★★★:○○○○;』の形になっています。
勘の良い方はもうお分かりかと思いますが、
実はコレ『★★★=○○○○』という意味なのです。
『;』は「★★★に関しては『;』までで終り」と言う意味なので、
重要ではありますが、こういう記号が必要なんだ位に覚えておくだけで十分です(笑)
ちなみに色に関係する時に使われる「#△△△△△△」は色を表しています。
英語で表記する場合もあり、例えば「#FFFFFF」と「white」は同じ色です。
詳しく知りたい時には『カラーコード』などと言った言葉を検索してみてくださいね。
気をつけなくてはいけないのは、この『★★★:○○○○;』は
スタイルシートとして、使える言葉が限られていると言う事です。
自分の言葉で『moji: big;』なんて書いても通用しないのです・・・(当たり前?・苦笑)
どの言葉が使えるかは、これまた『スタイルシート タグ』などと検索すれば
ワラワラと出てくる事でしょう♪是非自分の読みやすいサイトを探してみてください( ̄▽ ̄
またOSやブラウザによっても使えるものが違ってくるので、
あまり特異なものを使うと、デザインが崩れて見える方も出てきてしまうので
『言葉選び』には注意してくださいね。
殆どが英語なので、英語がわかる方なら尚更、
ここまで来るともうスタイルシートは読めるようになっていると思います。
一つ例を挙げてみると『font-size: 12px;』・・・ってありますよね?
これは『文字のサイズ=12px』という意味になります。(pxは大きさの単位です)
最初から全て併せて解読すると
『bodyという名前のブロックにある文字のサイズは12px』と言う事になりますね^^
これと同じ形のものが沢山記述されているため、
『××と言う名前のブロックにある文字のサイズは○px』で
『△△と言う名前のブロックにある文字のサイズは●px』で・・・と個別に設定できる訳です。
但し、これらの文字や記号は間違えてしまうとコンピューターにその部分を『無視』されます(爆
特に
『 : 』と
『 ; 』を間違えたり
『 { 』や
『 } 』を消してしまったりには注意が必要です。
スペルは間違えてないのにスタイルが変わらない時は、
これらの記号に間違いはないかどうかも注目してみてくださいね。
文字も『全角』ではなく『半角英数(直接入力)』にして下さい。
以上でひとまずCSSの説明は終わりたいと思います。
細かい説明は、また長くなりそうな予感がするので
必要だと感じた部分だけ、チラホラと書いていこうかと思っています。(汗
下手な説明ではありましたが、
コレを読んでCSSに挑戦しようと思っていただけたら幸いです。。
読み辛い文を長々と読んで頂きまして、ありがとうございました(^▽^;