February 10, 2006
CSSでレイアウトデザイン（4）
ご無沙汰しています、パンダ藤井です。
かなり間が空いてしまいましたが、今回はレイアウトを調整しているCSSの解説を行いたいと思います。
■第四回 （サンプルCSSの解説）
続きを読む "CSSでレイアウトデザイン（4）"November 08, 2005
CSSでレイアウトデザイン（3）
こんばんは、パンダ藤井です。
パンダの名を冠するアーティストのCDを購入して、ウハウハな気分です。
さて今回はCSSの中身をのぞいてみましょう。
■第三回 （セレクタの使い分け）
続きを読む "CSSでレイアウトデザイン（3）"November 01, 2005
CSSでレイアウトデザイン（2）
こんばんは、パンダ藤井です。
先日の健康診断で行った採血で倒れてしまい、ちょっとおセンチ（古？）な気分です。
今回からCSSを使用したレイアウトデザインに実際に取り掛かっていきます。
■第二回 （＜table＞タグから＜div＞タグへの移行）
続きを読む "CSSでレイアウトデザイン（2）"October 28, 2005
CSSでレイアウトデザイン（1）
ご無沙汰しておりました、パンダ＝藤井です。
「書いている人」の項目にフルネームが載っているので、ペンネームの意味があまりないですね。
それはさておき・・・。
今回から数回に分けて、CSSを使用してのレイアウト組みというものを取り上げていきたいと思います。
CSSによるデザインはWeb標準化には欠かせないものですので、一緒に勉強していきましょう！
■第一回 （なぜCSSデザインなのか？）
現在＜table＞タグでレイアウトを行っている方にとっては、
「CSSでデザインと言っても、ピンとこない」と思う方も少なからずいるかと思います。
そこで第一回目は、CSSデザインを行うことで得られるメリットをいくつか挙げてみましょう。
続きを読む "CSSでレイアウトデザイン（1）"June 24, 2005
CSSとDWテンプレートの使い分け
アンニョンハセヨ。
テコンドーの練習で、あばら骨にヒビいったかも！なパンダです。
今日はDWのテンプレートとCSSの使い分けについて考えてみたいと思います。
DWのテンプレートは非常に便利な反面、うまくCSSと使い分けないと無駄タグ数が増えてしまいます。
例えば、テンプレート内に
<body bgcolor="#000000" background="background.jpg">
（そもそも bgcolor が非推奨タグだったりするのですが・・・。）
というタグあったとします。
そうすると、テンプレートを使用してページを作成する度にbgcolor～の部分が
各ページの無駄タグとして蓄積されていきます。
June 23, 2005
CSSの構造を確認する
◎もっと勉強時間がいると思いつつ朝からてんやわんや。
こんにちは、度々のHikkyです。
FireFoxの拡張機能でも、HPの構造を確認する便利なツールが色々ありますが（WebDeveloperなど）、CSSのレイアウトを構築していて、何がどうなってるのかわからなくなった！という時、とてもお世話になったページをご紹介します。
http://www.shoshinsha.com/hp/tools/css_tec.htm
こちらのページに書かれているソースを追加すると、そのページ内において、タグづけした要素に枠線がつくので、どんな構造になっているのかがとてもわかりやすかったです。
（ほとんど自分用メモのままおわる）
DOCTYPE（ドックタイプ）
nakauです。
サッカー日本代表、グループリーグ突破ならず。
あーあ。あーあ。あーーーあ！！
今日のTipsはDOCTYPE（ドックタイプ）です。
DOCTYPEは記述するHTMLのバージョンとその仕様を宣言します。
宣言したからには文書使用にしたがってHTMLを記述しなくてはいけません。
HTML4.01 推奨仕様ではDOCTYPEの記述は必須とされていますが、
ソースとちぐはぐなDOCTYPEを宣言するといろいろ不都合がありますのでご注意を。
HTML4.0のDOCTYPEの書き方は下記の3種類です。HTML開始ダグの前に記述します。
（最後のURLを省く書き方も有りますので実際には6通りの書き方があります。）
折り返されていますが、改行無しで記述してください。
Strict DTD・・・ 最もSEO効果が高い。厳密な定義で非推奨要素や、フレームを使用することができない。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Transitional DTD・・・非推奨要素可。要素配置の制限もやや緩い。フレームは使えない。普通のサイトはこれ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Frameset DTD・・・Transitional DTDをフレーム可にしたもの。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
June 17, 2005
CSS：IDとCLASSの使い分け
◎IDもCLASSもわかりやすい名前をつけよう
こんにちは、Hikkyです。このところ江坂ブログばかり更新していました。あはは、あはは。
CSSを書くとき、IDとCLASSをどう使い分けるのか分からなくなったことがあるのでメモしておきます。
【ID】
（CSSに記述する時、名前の前に＃をつけます）
対象に名前を付ける目的で使う
結果として、ページ内に1つだけの要素に使われることが多い
例：ヘッダー、フッター、タイトル
【CLASS】
（CSSに記述する時、名前の前に．をつけます）
対象を分類する目的で使う
結果として、ページ内で複数ある要素に使われることが多い
例：フォント、リスト、フォーム
※Piroさん、ご指摘ありがとうございました！
今日はここまでー。
P-0045 class と id の違いとは？を熟読中・・・
June 08, 2005
CSSはじめよう
◎Let's早起き＆CSS。
おはようございます、Hikkyです。
10時になると眠くなり朝の5時、6時には目が覚めます・・・
こんな私も5、6年前は大学生でした。
あの頃は何時間でも寝れた！
大学を卒業した当時、住んでいた愛知県にはWEBスクールなるものがなく、唯一見つけたマルチメディア学科／[新設]WEB関連コースに体験入学したところ、ついてくれた先生に「このコースは今年からできるので、ボクも1からなんです。一緒に勉強しましょう！」といわれ、コースの中身もキタイしていたものとちがったので撃沈。
足を延ばし大阪に引っ越して、仕事をしつつ、1番お値打ち価格（当時）だったWEBスクールを選んで通っていたものです。
毎日眠かったなぁ。
その頃はCSSについての講義は特になかったのですが、授業中、
「将来は、XHTML（HTMLから移行）で構造をかいて、CSSで見た目を調整するようになる」
「単独タグの＜ｂｒ＞は＜ｂｒ／＞のように、「／」をつけてかいておくといいよ」
とよく聞きました。
今は、CSSを用いて見た目を調整しているサイトは普通に見かけるようになりましたね。
・テーブルで見た目を調整しているけれど、フォント・背景色など一部をCSSで調整
（ハイブリットデザインとかいいます）
これは、とっつきやすく割と簡単に導入できます。
余分なタグがHTMLから消えるので読み込みが早くなるのと、スタイルシート1つで複数のHTMLのフォントカラーなどを変えられるのがメリット。
構造と見た目をHTML,CSSで分離してるのと違って、ブラウザで見え方が違う、なんていうこともあんまりないですね。
・テーブルで見た目を調整せずに、HTMLやXHTMLで情報を記述して、CSSで見た目を調整する
こっちはブラウザによって見え方が違ってきたりしますが、前述のハイブリットデザインよりも軽いし、CSS1枚で全部のページの構造をガラっと変えたりできます。
http://www.csszengarden.com/tr/japanese/
ブラウザの表示→スタイルシート→スタイルシートを使用しない、を選択してこのページをみてみると、CSSをはずしたときのページをみることができますよ。
