★クララ★バラ色広場(*・(ｴ)・)/

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

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

転載元: 知的生産の哲学

母さんのシフォンケーキ

♪☆■◎♬△♡母さんのシフォンケーキ♡△♫◎■☆♪

クララのアップルケーキが焦げたので急いで作ってくれました

お土産用にのアップルパイを焦がしてしまったので

母さんに応援を頼みました

充分のふくらみで、焼きあがりました

訪問先でも大好評！

アップルパイはわけを言って焦げていない部分一切れだけ届けました

昨日、ほぷしーさんに４００００ＨＩＴを刻んでいただきました

ほぷしーさん！みなさん！ありがとうございます

ほぷしーさん♣http://blogs.yahoo.co.jp/shun_masa0501/MYBLOG/yblog.html

♪☆■◎♬△♡★♡△♫◎■☆♪

((o(゜▽゜○)o(*^ー ^*)o(○゜▽゜)o))

(*´T｀*)♡♡♡♡♡♡♡♡♡♡(*´T｀*)

焦がしたアップルパイの記事♣http://blogs.yahoo.co.jp/miisyuu/29802237.html