Appendix②：CSSについて…

※昨日はWEBサイトを支える「ハードコード」である”(X)HTML“についてお話ししましたが、今日は、「ソフトコード」とも言うべき”CSS“についてお話ししようと思います。【言ってみれば、”レイアウト“や”（文字）装飾“に関わるTIPSです】そのバイブル的な書物としては －

・市瀬裕哉･福島英児･望月真琴 共著：『実践 Web Standards Design ～ Web標準の基本とCSSレイアウト&Tips ～ 』〔技術評論社；2008-11-29；再刊版〕

～2005年の同名書の”再刊版”だが、それだけ支持された…ということの証拠でもある。【因みに、絶版になったのは元の出版社が倒産したため】しかしながら、豊富な実例を挙げてCSSの”裏技”的なものまで殆ど網羅しているので、興味を抱いた人には是非一読をお勧めします。【この本に書いてある通りにやれば、取敢ずはプロ”並み”のWEBサイトを作れるようにはなります】尚、やはり、著者のWEBサイトとの併読がさらに効果的でしょう!?【このサイトでは、後述するWP用の”無料”の”Vicuna“という「テーマ（スキン）」も開発していて定評があるようです】

・3Ping.org
・Vicuna【CMS】 ← コチラを読めば、”テンプレート“や”テーマ（スキン）“などの構造が理解できますよ!!

【参考：最低限知っておくべきCSSタグ】 ← 「ブログ」を書く上で…という意味です
～CSSタグは「ソフト･コード」とも言われ、他の（親）ファイルから読み込まれるため、こう呼ばれます【ある意味、”PHPもその一種と言えます…言わば、PHPは硬軟とり合わせた”両刀使い“ということですね】

・ボックス･コントロール系：［文法］《ｄｉｖ＃【”id-name”】 ｛ｄｉｓｐｌａｙ：ｂｌｏｃｋ； ｗｉｄｔｈ：【横幅の数値】ｐｘ； ｈｅｉｇｈｔ：【高さの数値】； ｍａｒｇｉｎ：【トップの数値】ｐｘ 【ライトの数値】ｐｘ 【ボトムの数値】ｐｘ 【レフトの数値】ｐｘ；｝》…という書式になります【”仮想“のボックスをサイズ指定で作り、それを上下左右の”マージン“【スペース/余白】でコントロールするイメージ】

・画像コントロール系：［文法］〔前述の(X)HTMLタグの”img“タグの末尾に挿入〕《ｓｔｙｌｅ＝”ｄｉｓｐｌａｙ：ｂｌｏｃｋ； ｗｉｄｔｈ：【画像の横幅の数値】ｐｘ； ｈｅｉｇｈｔ：【画像の高さの数値】ｐｘ； ｂｏｒｄｅｒ：０； ｍａｒｇｉｎ－ｌｅｆｔ：【レフト･スペースの数値】ｐｘ； ｍａｒｇｉｎ－ｔｏｐ：【トップ･スペースの数値】ｐｘ；”》…という書式になります

・部分装飾系：［文法］《＜ｓｐａｎ ｓｔｙｌｅ＝”【装飾系CSSのコマンド記述】”＞「装飾したい文字や文章」＜／ｓｐａｎ＞》…という書式になります

・フォント装飾系：［太字の文法］〔”p“タグの末尾に挿入〕《ｓｔｙｌｅ＝”ｆｏｎｔ－ｗｅｉｇｈｔ：ｂｏｌｄ；”》…という書式になります【例：太字の場合ですが、これは、”strong“タグで囲ったものと同じ効果になります】

・下線強調系：［下線強調の文法］〔”p“タグの末尾に挿入〕《ｓｔｙｌｅ＝”ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｕｎｄｅｒｌｉｎｅ；”》…という書式になります

・背景装飾系：［背景色/背景画像の文法］〔”div“タグの末尾に挿入〕《ｓｔｙｌｅ＝”ｂａｃｋｇｒｏｕｎｄ：【＃（六桁のカラー番号） ｕｒｌ（【背景画像のURL】） ｘ【左上の基点からのレフト･スペースの数値】ｐｘ ｙ【左上の基点からのトップ･スペースの数値】ｐｘ；”》…という書式になります

【注：CSSを外部ファイルに置いて読み込む場合】
・［文法］＃【ID名】（または）．【class名】 { ～ ～ ～ （プロパティを書き込みます） ～ ～ ～ ；}
…という書式になります
⇒”プロパティ“の書式や値については、関連書籍で確認して下さい【複数のプロパティを併記する場合は、必ず”；“”セミコロンで区切り”半角“分の”スペース“を開けるようにして下さいね。尚、（X）HTMLとの一番の違いは、値を指定する時は必ず”px”などの”単位を付けるということと、”や’は使えないことです。”英数半角文字“に限り使えますが、紛らわしいので”＿“”アンダーバー“や”～“”チルド“などは使わないほうがイイでしょう】

♪fitted BGM〔Philippe Saisse：Land of the Flying Funk performed by Philippe Saisse from “Next Voyage”, 1997
【↑ ※リンクをクリックすると、WMP：WindowsMediaPlayerが立ち上がり曲が聴けます※↑】