Home > Archives > 2006-05

2006-05

Timeflex:シールみたいな腕時計

timeflex.jpg

Timeflex:Designer: Igor Solovyov & Maria Solovyova

紙のように薄く、シールみたいにどこにでも貼れる腕時計。プールとか海、ゲレンデなどいろんなシチュエーションでの需要はありそう。どうやらまだコンセプトモデルで実際に動きはしないみたいですが、近い将来こんな腕時計も実現しそうですね。極薄の液晶は既に技術的には可能だし、あとは電源とかインターフェースをどう実現するかっていうところでしょうか。コンセプト自体はありがちかもしれないけど、デザインが素晴らしいすね。

羊と女性

mary.jpg

丸っこい羊。もう夏が間近ですねぇ。

mary.jpg

XHTMLのMIMEタイプ

  • 2006-05-13 (土)
  • CSS

XHTMLのMIMEタイプと文字コードをhead要素に設定する場合、title要素の前に入れるのが一般的らしい。
具体的にはmeta要素に「http-equiv」、「content」で設定する。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XHTMLのMIMEタイプ</title>
</head>

まず『http-equiv=”Content-Type”』はHTMLとXHTML共通。

次に『content=”●●●; charset=◆◆◆”』でMIMEタイプと文字コードを指定する。
通常の記述なら、文頭のXML宣言で既に文字コードの指定をしているが、ここでも念のため指定しておく。

●●●に入れるMIMEタイプの指定はHTMLでは「text/html」を指定。
XHTMLでは「application/xhtml+xml」を指定するのが推奨されている。「application/xml」、「text/xml」も使用可。だがInternet Explorer(ここでもMicrosoftが足を引っ張っている)やNetscape4.*では対応していないため、現状では「text/html」としておくのが無難である。
※現在公開されているInternet Explorer 7 beta 2でやっと「application/xhtml+xml」に対応している模様。

Continue reading

XHTMLの文書型宣言(DTD宣言)

  • 2006-05-05 (金)
  • CSS

XHTMLは1行目にXML宣言が必要なのだが、

<?xml version=”1.0″ encoding=”UTF-8″?>

この部分は文字コードが「UTF-8」「UTF-16」の場合省略できる。他の文字コードを使う場合は必須。
ただ実はこれを入れてしまうと、WIN IE6では「過去互換モード」が採用されてしまい、スタイルシートの適用が意図したとおりに行かないことがある。他のモダンブラウザでは問題ないのにね。他の異常な挙動も含めて、WEBにおけるMicrosoftの罪は重いです(もちろん貢献度も大きいのだが)。

で次に文書型宣言。現在XHMLでは以下の三つのどれかを指定できる。

【XHTML 1.0 Strict】
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
【XHTML 1.0 Transitional】
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
【XHTML 1.0 Frameset】
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
【XHTML 1.1】
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

XHTML 1.1はXHTML1.0と微妙に書式が違う部分もあるので要注意。
すぐ次のhtml要素の名前空間と言語コードの指定部分は以下の通り。

【XHTML 1.0】
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja” lang=”ja”>
【XHTML 1.1】
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja”>

XHTML 1.1ではlang属性が認められてないため、「xml:lang」を使わなくてはいけない。
とりあえずこれで、あとはhead要素とbody要素をつけてやればXHTML文書の出来上がり。

<?xml version=”1.0″ encoding=UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja”>
<head>
<title>XHTML1.1</title>
</head>
<body>
<p>XHTML1.1文書です</p>
</body>
</html>

<body>タグの直下にはブロックレベル要素しか置いてはいけない

  • 2006-05-04 (木)
  • CSS

(X)HTML+CSSの基本である、「インライン要素」と「ブロックレベル要素」について忘れがちなことをメモ。

7.5.3 ブロックレベル要素と行内要素
HTMLの要素のうち、BODY要素に出現し得る要素のあるものは「ブロックレベル」と呼ばれ、他のものは「行内」 (これは「テキストレベル」としても知られている)と呼ばれる。

つまり『<body>タグの直下にはブロックレベル要素しか置いてはいけない』ということ。

これは基本過ぎて忘れがち。パーツごとにブロックレベル要素(div、pなど)で囲ってから作るのが普通だけど、一応心に留めておきたい。インライン要素をCSSで{display:block}とし、表示上ブロック要素にはできるが、文法的にはインライン要素のままなので注意が必要。

あと紛らわしいのがインラインブロック要素と呼ばれるもの(applet、button、del、iframe、ins、map、object、scriptなど)。幅と高さを指定できブロック要素のように扱えるが、これも文法上はインライン要素なのでブロックレベル要素で囲っておくべきらしい。iframe、objectなどは特に気をつけなければ。

参考:ブロックレベル要素とインライン要素 – Web標準普及プロジェクト

Home > Archives > 2006-05

Search
Feeds
Meta

Return to page top