第４回 YahooにおけるCSSの基本

第４回 YahooにおけるCSSの基本

1.CSSの基本構文

CSSとはCascading Style Sheets(カスケーティング・スタイル・シート)の略で、
HTMLやXMLの要素をどのように修飾(表示)するかを指示する機能のことです。
(CSSについて詳しく知りたい方はWikiペディアを読まれることをお勧めします。)
CSSを利用することにより、柔軟にデザインの変更ができます。

Yahoo!BLOGSでは、下記のような構文で利用します。
重要ですので暗記してしまってください。

||<背景色' style='プロパティ:値; プロパティ:値: ...;' ``文字列||

2.｜｜のはたらきを確認しよう

試しに最低限の内容を試してみましょう。

||ID||ブログの名前||
||ya3||知的生産の哲学||

例.

ID	ブログの名前
ya3_aqua	知的生産の哲学

これで色つきの四角に区切られた表が現れます。
なぜ、色を指定していないのに色が現れたか説明します。

皆さん、「ブログ設定」の「背景の選択」を利用したことが
あるとおもいます。あの「背景の選択」によって、
ディフォルト(特に指定していない場合)の色が
自動的に設定されているのです。
つまり色の指定しなかった場合はYahoo!BLOGSが
適していると思っている色が自動適用されるのです。

このディフォルトの設定色は冒頭に説明した構文の
背景色の指定により変更できます。

||<#0000ff' ``知的生産の哲学||

例.

知的生産の哲学

(↑よく見えない人はマウスでなぞってください。)

背景は先ほどのディフォルトから青に変わりました。

背景の色は光の三原色(RGB)で指定します。
(光の三原色について詳しく知りたい方は[http://ja.wikipedia.org/wiki/RGB Wikiペディアを
を読まれることをお勧めします。)
RGBとは、R=Red、G=Green、B=Blueのことです。
はじめの2桁の00が赤(R)の量を示し、次の00が緑(G)の量、
さらに次のffが青(B)の量を示しています。RGBの順番通りです。
もし#ffffffだと光の三原色なので白になります。
今回の例では赤が0、緑が0、青がff(最大値)なので青い背景になりました。

RGBの数値の前の『#』は16進数で色を表すことを示しています。
fは16進数で15を示します。
16進数ではaが10、bが11、cが12、dが13、eが14、fが15を示します。
私たちが普段使っているのは10進数と呼ばれています。
10になると一桁上がるということです。
コンピュータの世界ではよく16進数をつかいます。
16になると一桁上がります。
覚えておきましょう。
(16進数について詳しく知りたい方はWikiペディアを読まれることをお勧めします。)

背景にしても次章で説明するフォントにしても
#ffffffに近いほどパステルカラーになり、
#000000に近いほど原色に近くなります。

||<#99ccff' ``ID||ブログの名前||
||ya3_aqua||<#99ccff' ``知的生産の哲学||

ID	ブログの名前
ya3_aqua	知的生産の哲学

では次の文ではどうなるでしょう？

||<#ffffff' ``||
||<#99ccff' ``IDは
||ya3_aqua
||<#99ccff' ``ブログの名前は
||知的生産の哲学

IDは	ya3_aqua	ブログの名前は	知的生産の哲学

こんな具合になります。
｜｜でつなぐことにより、一行に表示されました。
また、色の指定をしなかった部分にはディフォルトの色が
適用されていないことを覚えておいてください。

今回はCSSの基本構文と｜｜の使い方をまとめました。
｜｜のおおよその意味はご理解いただけたのではないでしょうか。
自分の一番使いやすい方法を見つけ、その方法を使い回すのが上達への早道です。

次回は今回紹介しなかったプロパティの指定のしかたをまとめようと思います。

転載元: 知的生産の哲学

[気ままなイルカ]

皆さん色々ブログには工夫をしてらっしゃるのですね。。。

クララちゃん。わかりました！やってみます

[気ままなイルカ]

久々の1番コメだ(^O^)

みんなやってるからうらやましかったのです(*^^*)v

ya３さんから転載させていただきました。

あっ１番コメだと思ったのに･･･

訊くときはya３さんにね。

私にも出来るかしら〜？

イルカさん！一番ありがとうございます。

色々教えてくださいます。

ゆっくり読んだら、クララにもわかりました。

小さなお花畑さん！

やってみましょうね。

上手く使いこなせないんですよねぇ。。。勉強になります♪

色々勉強になります。。。私にも出来るかなぁ。。。。試してみます！！

コピペーして使っていますがなかなか覚えられずにいます。クララちゃん凄い！！お分かりになりましたか・・・色々やると楽しいですものね。

いろんな方のブログスキルをコピーしているのですが、面倒でついいつものスタイルで。。。。面倒がってはいけませんね。

すごーい。色々できるんですね。もっと色々お勉強しなくては・・。ありがとう！

あ〜ん、wikiもできない・・・なんてアナログなアタシなんでしょ・・・お勉強になったとは思うんだけど、自分の理解力がついていけない〜