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が立ち上がり曲が聴けます※↑】

Appendix①：（X）HTMLについて…

※先週一週間、WP：WordPress（ワードプレス）という”オンライン･ブログ“について、集中的に解説してきました。あまり面白くなかったかもしれませんが、WEB用の言語である”(X)HTML“や”CSS“などに興味を持たれた方もいるかと思います。なので、今日は、”(X)HTML“のバイブルとも言われている参考書を紹介しますね。

・益子 貴寛：『Web標準の教科書 － XHTMLとCSSでつくる”正しい”Webサイト』〔秀和システム；2005-09〕

～2005年頃から「Web標準」（”Web Standard“）という言葉が使われ始めたが、【あの”WEB2.0“という言葉も同じ頃】この確たる”基準“のないIT-WEB業界での《スタンダード化》への試みでもある。この本は本当に分厚いけれども、”事典“代わりに使うには好適な”バイブル書“とは言える。加えて、著者である益子氏自身のWEBサイトと併用すると、より理解が深まると思います。

・CYBER＠GARDEN

【参考：最低限知っておくべき(X)HTMLタグ】 ← 「ブログ」を書く上で…という意味です
～(X)HTMLタグは「ハード･コード」とも言われ、文章の中に直接”コマンドを埋め込むため、こう呼ばれます【ある意味、”PHPもその一種と言えます】

・画像挿入系：［文法］《＜ｉｍｇ ｓｒｃ＝”【画像のURL】” ｂｏｒｄｅｒ＝”0″ ａｌｔ＝”【代替テキスト】” ｗｉｄｔｈ＝”【横幅の数値】” ｈｅｉｇｈｔ＝”【高さの数値】” ／＞》…という書式になります【※コードは敢て大文字で表記してありますが、実際に使う場合は”半角文字“で使って下さいね】

・リンク貼付系：［文法］《＜ａ ｈｒｅｆ＝”【リンク先のURL】” ｔｉｔｌｅ＝”【リンク先への誘導文】”＞「リンク名」または「画像名」＜／ａ＞》…という書式になります【※コードは敢て大文字で表記してありますが、実際に使う場合は”半角文字“で使って下さいね】

・部分強調系：［文法］《＜ｓｔｒｏｎｇ＞「強調したい文字や文章」＜／ｓｔｒｏｎｇ＞》…という書式になります【※コードは敢て大文字で表記してありますが、実際に使う場合は”半角文字“で使って下さいね】

～”文字装飾“に関わることは、明日解説する”CSS“でコントロールするようにしたほうがベターです

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