段組み -- 2004-04-06, 09, 19
table要素をレイアウト目的に使っちゃダメ ! … そんな発言を耳にしたことはないだろーか。 「table」ってくらいなんだから, (名前の通り)ソレは表を作るためのものであって, 文章を縦や横に配置する目的のブツじゃないってことだね。
ほかに blockquote要素だとか, fieldset要素だとか, それらは名前と一致しない用途に使われやすいかもだけど, そんなことばっかしだと, セマンティック・ウェブを考え出したとたん破綻してしまうカモよ, みたいな。
(table要素を「表」とみなす とか, そこまではしないかもだけど, 意味を合わせておいた方が後々便利かも)
参考: 「正しい HTML 」 = 「正しい日本語」 … outsider reflexより
てことで, ページの右側 あるいは左側に, メニューやらいろんな情報を表示したりする段組についてだお。
比較的簡単な方法は, position プロパティーを使う方法かも。
ここで必要なことは, ブロック("block-level")要素であることと, だから, その幅(=width)と高さ(=height)が決まっていること, カナ。
つっても, 他のプロパティーを元に算出できたりするから, そんなときはソレで構わないんだけどね。
◇
もう一つの方法は, floatを使うもの。 画像をページ内の(どこかの)端に配置して, その周りにテキストを流し込むような, そんなアレだね。 船とか茶わんを浮かべるとその体積分を水が避けるよーな感じ。 で, 実際には画像の替わりにテキストを使ったりするんだけど。 でも, コレが少しやっかいだったりする。
画像の周りにテキストを流し込むばーいは, 画像のサイズは決まってるから比較的単純で, あとは マージンを取ることで調整できるってくらいカナ。
「浮かべる」のがテキストだと, 幅(=width)とかマージンが問題になったりして。
つーのも, 文字列だと (そしてソレが折り返さないばーい)何ピクセル分だ, みたいに固定できる訳じゃないし, 文字数で計算するにも更新が大変だから。
width: auto てことで, 自動的に計算してくれるとありがたいんだけどね。
で, 幅とかマージンの計算 [w3.org] によると, "shrink-to-fit" みたいなんだけど, ソレは CSS 2.1での話。 2.0にはそんな記述無くって, 互換性をアレするばーい悩みのタネかも。
他にも Floats には, 流し込まれるコンテント(=content) の overflowプロパティーによって, マージンが変化したりだとか (そしてソレも CSS2と CSS21で違ったり)するにょ。 使いこなせば便利だけど, 思ったよーにレイアウトできない可能性が高いカモね。あはは。
CSSの続き -- 2004-03-22, 23
では, 簡単にスタイルシートを試してみよー。 たとえば, こんな記述で。
<style type="text/css"><!--
body { background-color: yellow; color: navy; }
--></style>
コレを head Element(=要素)の中に入れれば OK。
{ 〜 }
の前の部分(今回のコレでは body)は Selector(=選択子) てゆー部分。
上記のばーい, body要素に対しての指定なんだけど, たとえば div要素の中(に含まれる分)の em要素に対しての指定とか, そーゆーのも いろんなパターン で指定できたりする。 んで, ここで使われている用語は HTMLでも一般的なアレだけど, その意味を合わせてないと何にもならないかも。(意味が通じないかもだし)
で, ちょっとしたアレだけど … CSS2の構文では 見やすさのためどこで改行しても構わないかも。
もちろん ひとつのトークンを二つに分割してしまうよーなのはダメだけど。 たとえば, (↓)こんなのもダメ。
(つーか, このばーいShorthand properties(=簡略記述プロパティー)がよいかもネ)
body {
background-
color: yellow;
color: navy;
}
◇
さて, 色やフォントをアレする以外に, もっと劇的にレイアウトを変更できたりする。
そんなときに(そうでなくても) 重要なのが, Box model (=ボックス・モデル) ってヤツかも (kanzaki.comでのボックスモデル)。
border (=ボーダー: 枠)に線を引くことができて, その内側を padding (=パディング: 詰め物), 外側を margin (=マージン: ふち, へり, 周辺)なんて表現したりするだよ。
んで, コレは XULでも同じ (だけど, もっと Boxしてる)かも。
んで, そのために 知っておかなければダメなのかも, ってのがあったりする。 すべての Element(=要素)は大きく分けて 2つ, ブロックレベル要素とインライン要素 に分類できるカモってこと。 コレさえ理解してればボックスモデルは完ぺきかも。 … たぶん。
そして もうひとつ, 視覚フォーマットモデル。 HTMLでの (body要素の中の) 2種類の要素, "block-level" (=ブロックレベル) 要素と, それから "inline"(あるいは "text level") (=インライン, 行内) 要素, その特徴を押さえておいて 位置決めとか指定すると, なんかもー 思う存分, 自由自在に修飾できるって感じカモ。
てことで劇的なサイトかも。
まずは Style Sheets -- 2004-03-09
Warpとは直接には関係ないんだけど, Webについて, かな。 ってゆーか Style Sheets (スタイルシート), Document Object Model (DOM), JavaScriptなどについてまとめてみよーかと思うのら。
まずは参考になるところから …
- ごく簡単なHTMLの説明 [kanzaki.com] (「スタイルシート」の項目)
- 初心者向けに書かれているのかも。そんな感じなんだけど, キッチリ・カッチリしていて 間違いがないっつーか。 それに, その技術の根本的な考え方とか, そーゆーのも書いてあって, 初心者でなくとも一度は目を通してみるとよいかも。 HTML以外にも CSS, XHTMLも記されてたりするし。
- using CSS1 with HTML [Ks Resource!]
- 「スタイルシートWebデザイン」とゆー本(ISBN4-7741-0622-4 C3055)の元データらしいだよ。 すべてを読み通すのは大変かもだけど, ある程度ソレを把握してる人なら大丈夫かも。そーでない人だったら ぐっすり眠れるかも。
- 段階スタイルシート水準2
- W3Cの Cascading Style Sheets (CSS)の, Cascading Style Sheets, level 2 (CSS2)の邦訳ページだお。 仕様のページって訳だね。 CSS2.1とか CSS3ってのも (まだだとは思うけど)そのうちアレするかもなので, ソレを踏まえておくのもよいかも。
- CSSブラウザー対応表
- Style Sheetsを覚えて使いこなそうにも, ブラウザーによってはサポートされていないこともあるかも。 てなことで, どんな項目がサポートされているか, とかそんな一覧表。(googleでアレした)
- 他に, 参考になるとこ
- Mozilla あるいは Web標準普及プロジェクト から
- Web標準化Tips
- 効率的 CSS の書き方 (XULとか Mozillaそのもののことだけど 参考になるかも)
- Mozilla のカスタマイズ (Mozillaそのものの見栄えについてだけど 参考になるかも)
- 他の情報
- 「HTML 4.01仕様書」スタイルシート
The Quick Color Table (日本語), The Quick Color Table (英語)
◇
んで, 立ち読みした程度だけど, 本はやめた方がよいかも, とか思ったりして。 小手先の技術(？)に終始していて, 本質について書かれてるのが見当たらなかったりするから。ま, 中にはよい本もあるのかもだけど。
- のけぞる本！ … HTML鳩丸倶楽部 ☆ 水無月ばけらのHTML蘊蓄サイトより
- あやしい本 (内容は古いらしいけど) … Ks Resource! より
紹介されてる本, あるいは Webサイトは, 参考にしない方がよいってゆーもの。 何がどーダメなのか, 知っておいて損はないかも。
てゆーのも, 本にしろ Webサイトにしろ, 間違ってる情報を元にしてソレらを覚えてしまうと, 結局, 正しい結果を得るために 遠回りになっちゃうかもだから。 一度 勘違いしたまま覚えてしまうと, (変な)先入観が抜けないかもだし。あはは。
たとえば, 検索してみると「とほほ」のサイトも上位にあったりするけど, いろいろ問題アリみたいな感じだし, 参照するのなら他のサイトの情報と照らし合わせるのがよいかも。
バックナンバー
最新