愛猫との日々を、軽い気持ちで書き綴り中。

2011年11月
-
-
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
-
-
-
RECENT
RECENT COMMENTS
ARCHIVES
PROFILE
ミント♂

10月5日生まれ。写真は4ヶ月頃です☆小さい頃の怪我が原因で下半身は麻痺してますが、毎日元気に猫してますv   ===============

芽@管理人

2004年秋、初めて猫を飼いました。やっと扱いにも慣れてきて、今度はblogに手を出してみたいと思います♪      ===============

【web拍手について】

更新が滞っている時にポチポチっとして下さると、管理人のヤル気がUPする♪・・・かもしれませんw拍手と共にメッセージ送信も可能なので、御用の際には是非ご活躍下さい!※メッセージへのお返事は《Diary&BBS》記してみます。(下記リンク欄参照)に掲載予定です。   ===============

★現在のお礼絵

写真で4コマ♪(全5種類・ランダム表示)

LINK
CATEGORY
PR




スタイルシート〜何となく読んでみましょう編
さて今回は『軽く実践編?スタイルシートの読み方』です♪
どこまで説明したら良いものか迷いましたが、
ペログーでの具体的な操作方法や細かい記述は、ひとまず省略することにします。
他にも詳しく解説している方が大勢いらっしゃいますので、そちらを参考にして頂くか、
若しくは例によってまたコメント欄や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に挑戦しようと思っていただけたら幸いです。。
読み辛い文を長々と読んで頂きまして、ありがとうございました(^▽^;

この記事へのトラックバックURL
http://cat.pelogoo.com/kyachan/rtb.php?no=1152538196600575



この記事への返信
はじめまして☆
まきっころさんのところで お名前は拝見してましたが、初めてお伺いしました(^^)
ワタシもちょこっとだけ スタイルシートのことを書いたことがありますが、説明するってムズカシイですよねぇ!!
「なるほどーこういう説明にすれば良かった」と思いながら読ませていただきました。
ただいま仕事中なのでヾ(^^;)ォィォィ また改めて遊びに来ます☆
Posted by わらび | 2006/07/11 14:19:53
ああ・・・、『芽さん』が遠く、そして眩しく見える・・・+.∴。゜+∴。・.。+゜。・ヽ(=_=;ヽ)
Posted by nishijima0706 | 2006/07/11 16:03:25
>わらびさん

はじめまして^^
私もわらびさんのお名前、沢山拝見してました。
お仕事中なのに足跡まで残して下さるなんて・・・本当にありがとうございますw

説明するのって難しいですよね。。
何度途中で諦めそうになった事か・・・(笑)
こんなにゴチャゴチャとした文を読んでいただけただけでも感激です☆
私だったらこんなに沢山の文字、見ただけで読み流しちゃいますモン Σ(゜▽゜;;ぇ!?

説明におかしなトコロがあったら是非渇を入れてくださいね!
またお待ちしております^^
Posted by 芽@管理人 | 2006/07/11 23:02:16
>ニシジマさん

遠くも眩しくもありませんよぅ・・・いえむしろ『くすんで』おります(爆)
ニシジマさ〜〜ん、そんなキラキラしたビームを出して
一体何処へ!? L(゚□゚ L)Ξ(」゚□゚)」ぉーぃ!!

書けば書くほど解りにくくなってしまって、
かえってスタイルシートから遠ざけてしまっていたらゴメンなさいです(==;
そんな時は・・・読まずに、もし既に読んでしまった時は記憶から消しちゃって下さいね(笑)
Posted by 芽@管理人 | 2006/07/11 23:24:39
「先生」、とお呼びすればよろしいでしょうか?
nishijima0706さんと同じように芽さんが眩しいです。(うっ!直視出来ない!!)

この説明文を作るだけでとても大変そう!
結構解りやすく読ませていただけましたよ。
Posted by にゃにゃのぱぱ | 2006/07/11 23:29:56
>にゃにゃのぱぱさん

先生なんて恐れ多いです!(。_。*)))
眩しいのはきっと、夏の日差しのせいですよww
はっ、もしかして化粧が崩れてテカっている・・・?(爆

『結構解りやすく』と言うお言葉がありがたいです♪
苦労して作った甲斐がありました〜〜^▽^
文をまとめるのがとても苦手なので、案の定長くなってしまいました。
(だからいつも長ったらしくなってしまうのですf^^;)
もうコレを読んでくれた方全員に手を合わせたい気持ちで一杯ですよ。
・・・南無南無(←微妙に違っ!?)
Posted by 芽@管理人 | 2006/07/12 23:36:32


◇ 返信フォーム


名前 :   情報を保存する
メール : 
URL : 
題名 : 

内容 :