新しいタブを開きました

 以前からホンマ、ムカ付いてたんですけど。

 この画面のソース、見たことあります?以下に引用しますね。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="ErrorPageTemplate.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>タブ ブラウザの開始</title>
<script src="errorPageStrings.js" language="javascript" type="text/javascript">
</script>
<script src="httpErrorPagesScripts.js" language="javascript" type="text/javascript">
</script>
</head>
<body onLoad="javascript:setTabInfo('tabInfoBlockID');" class="tabInfo">
<table width="730" cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="tabIconAlign" width="60" align="left" valign="top" rowspan="2">
<img src="tab_icon.png" id="tabIcon" alt="タブ アイコン">
</td>
<td id="mainTitleAlign" valign="middle" align="left" width="*">
<h1 id="mainTitle">新しいタブを開きました</h1>
</td>
</tr>
<tr>
<td id="ErrorCodeAlign" class="errorCodeAndDivider" align="right"> 
<div class="divider"></div>
</td>
</tr>
<tr>
<td>
 
</td>
<td>
<p><h2 id="withTabs1">タブを使って次のことができます:</h2>
<ul>
<li id="withTabs2">Internet Explorer の 1 つのウィンドウですべての Web ページを表示します。</li>
<li id="withTabs3">表示中のページの後ろのタブでリンクを開きます。</li>
<li id="withTabs4">お気に入りやホーム ページ タブを使って複数の Web ページをまとめて保存したり開いたりします。</li>
</ul>
</p>
<p><h2 id="getStarted1">操作のヒント:</h2>
<ul>
<li id="getStarted2">CTRL キーを押しながらリンクをクリックしてください。(または中央のマウス ボタンを使用してください)。</li>
<li id="getStarted3">タブを閉じるには、マウスの中央のボタンでクリックしてください。</li>
<li id="getStarted4">新しいタブで結果を開くには、アドレス バーまたは検索ボックスから ALT+ENTER を押してください。</li>
</ul>
</p>
</td>
</tr>
<tr>
<td>
 
</td>
<td>
<p>
<table>
<tr>
<td valign="top">
<img src="help.gif" id="helpIcon" border="0" alt="ヘルプ アイコン" class="actionIcon">
</td>
<td valign="top">
<a href="http://go.microsoft.com/fwlink/?LinkId=62982"><ID id="learnMoreAboutTabs">タブについての詳細</ID></a>
</td>
</tr>
</table>
</p>
</td>
</tr>
<!-- tab info -->
<tr>
<td id="tabInfoBlockAlign" align="right" valign="top">
 
</td>
<td id="tabInfoAlign" align="left" valign="middle">
<h4>
<table>
<tr>
<td valign="top">
<a href="#" onclick="javascript:expandCollapse('tabInfoBlockID', false); setTabInfo('tabInfoBlockID'); return false;">
<span id="tabImageContainer"></span>
<noscript>
<img src="down.png" id="tabInfoBlockIDImage" border="0" class="actionIcon" alt="その他のタブのショートカットを表示">
</noscript>
</a>
</td>
<td valign="top">
<span id="tabInfoContainer"></span>
<noscript><ID id="hideTabHotkeys">その他のタブのショートカットを表示</ID></noscript>
</td>
</tr>
</table>
</h4>
<div id="tabInfoBlockID" class="infoBlock" style="display: none">
<p>
<b><ID id="tabHotKey1">キーボードのショートカット</b>
<table width="100%">
<tr>
<td width="45%" valign="top">
<ID id="hotkeyInfo1">後ろに新しいタブを作成してリンクを開く</ID>
</td>
<td width="55%" valign="top">
<ID id="hotkeyInfo1a">CTRL+クリック</ID>
</td>
</tr>
<tr>
<td valign="top">
<ID id="hotkeyInfo2">前面に新しいタブを作成してリンクを開く</ID>
</td>
<td valign="top">
<ID id="hotkeyInfo2a">CTRL+SHIFT+クリック</ID>
</td>
</tr>
<tr>
<td valign="top">
<ID id="hotkeyInfo3">前面に新しいタブを開く</ID>
</td>
<td valign="top">
<ID id="hotkeyInfo3a">CTRL+T</ID>
</td>
</tr>
<tr>
<td valign="top">
<ID id="hotkeyInfo4">アドレス バーから新しいタブを開く</ID>
</td>
<td valign="top">
<ID id="hotkeyInfo4a">ALT+ENTER</ID>
</td>
</tr>
<tr>
<td valign="top">
<ID id="hotkeyInfo5">検索ボックスから新しいタブを開く</ID>
</td>
<td valign="top">
<ID id="hotkeyInfo5a">ALT+ENTER</ID>
</td>
</tr>
<tr>
<td valign="top">
<ID id="hotkeyInfo6">クイック タブを開く (縮小表示)</ID>
</td>
<td valign="top">
<ID id="hotkeyInfo6a">CTRL+Q</ID>
</td>
</tr>
<tr>
<td valign="top">
<ID id="hotkeyInfo7">タブを切り替える</ID>
</td>
<td valign="top">
<ID id="hotkeyInfo7a">CTRL+TAB/CTRL+SHIFT+TAB</ID>
</td>
</tr>
<tr>
<td valign="top">
<ID id="hotkeyInfo8">指定のタブ番号に切り替える</ID>
</td>
<td valign="top">
<ID id="hotkeyInfo8a">CTRL+<i>n</i> (<i>n</i> は 1 から 8)</ID>
</td>
</tr>
<tr>
<td valign="top">
<ID id="hotkeyInfo9">最後のタブに切り替える</ID>
</td>
<td valign="top">
<ID id="hotkeyInfo9a">CTRL+9</ID>
</td>
</tr>
<tr>
<td valign="top">
<ID id="hotkeyInfo10">現在のタブを閉じる</ID>
</td>
<td valign="top">
<ID id="hotkeyInfo10a">CTRL+W</ID>
</td>
</tr>
<tr>
<td valign="top">
<ID id="hotkeyInfo11">タブをすべて閉じる</ID>
</td>
<td valign="top">
<ID id="hotkeyInfo11a">ALT+F4</ID>
</td>
</tr>
<tr>
<td valign="top">
<ID id="hotkeyInfo12">ほかのタブを閉じる</ID>
</td>
<td valign="top">
<ID id="hotkeyInfo12a">CTRL+ALT+F4</ID>
</td>
</tr>
</table>
</p>
<p>
<b><ID id="tabHotKey2">マウス ショートカット</b>
<table width="100%">
<tr>
<td width="45%" valign="top">
<ID id="hotkeyInfo13">リンクを後ろのタブで開く</ID>
</td>
<td width="55%" valign="top">
<ID id="hotkeyInfo13a">リンクで中央のマウス ボタンをクリック</ID>
</td>
</tr>
<tr>
<td valign="top">
<ID id="hotkeyInfo14">新しいタブを開く</ID>
</td>
<td valign="top">
<ID id="hotkeyInfo14a">最後のタブの右側で空の場所をダブル クリック</ID>
</td>
</tr>
<tr>
<td valign="top">
<ID id="hotkeyInfo15">タブを閉じる</ID>
</td>
<td valign="top">
<ID id="hotkeyInfo15a">タブの真ん中のマウス ボタンをクリック</ID>
</td>
</tr>
</table>
</p>
</div>
</td>
</tr>
<tr>
<td>
 
</td>
<td>
<div class="divider"></div>
</tr>
</tr>
<tr>
<td>
 
</td>
<td>
<p>
<table width="100%">
<tr>
<form name="skipTabFrom" onSubmit="javascript:skipTabCheck(document.skipTabFrom);" action="javascript:window.location.replace('about:blank')">
<td>
<input type="checkbox" name="skipTabCheckbox" id="dontShowPage">
<label for="dontShowPage" id="dontShowPageText">今後、このページを表示しない</label>
</td>
<td align="right">
<button id="closeButtonStyle" type="submit" style="width: 6.5em;"><ID id="closeButtonText">閉じる</ID></button>
</td>
</form>
</tr>
</table>
</p>
</td>
</tr>
</table>
</body>
</html>

 お前、もうコーディングせんでええよ……。何やねん、<ID>って。色々呆れすぎて、もう、突っ込み入れる気にもならんわ。

フォントのサイズ変更

 CSSでフォントサイズを指定する時に、ブラウザ側でフォントサイズを変えられるようにしたい(見る人の都合に合わせてフォントサイズを変えられる余地を残したい)というのは、比較的よく要求されること。で、昔作ったCSSがいかんせん古いものなので+そのCSSを適用したHTMLをFirefoxで見るとやたらフォントサイズが小さいのがずっと気になっていたので、ちと新しいテンプレでも作っておくか、と思って少し調べてみたのだけど。
 ブラウザ側でフォントサイズを変える余地を残す、というのは、これまで「font-sizeの指定を数値ではなくsmall, medium, largeなどの形で行う」っていうやり方をしてきた。数値で指定すると、ブラウザ側のフォントサイズ変更機能が無視されてきたからだ。
 で、今、実際どうなってるのかを一通りブラウザを確認して回ったら、数値指定でガチガチに決まってしまうのはWindows+IEの場合だけ、ってことが分かった。その他の環境(Win+NC7、Win+Firefox、Win+Opera、Mac+Safari、Mac+IE、Mac+Firefox、Mac+NC7、Mac+Operaを確認した)では、CSSがフォントサイズを数値で指定していても、ブラウザ側から文字サイズの変更が可能だったのだ。
 ってことは、昔環境ごとに「初期サイズがx-small/small/medium…」とかの切り分けをしたことの利便性って今は殆どなくて、単にWindows+IE環境だけ数値指定しないことにすればええやん、って話なのだった。なーんだ。じゃあそうしちゃおっかな。
 あ、そうそう。Windows版Firefoxがインストール直後、そのままの設定にしていると、初期フォントサイズが9ptってのはホント、どうかしてると思う。正直、読めないよ。しかもフォント、明朝になってるし。明朝の9ptってあり得んやろー。で、この設定値、CSSの「font-size:medium」とかを丸々無視してくれる。おかげで初期状態、むちゃくちゃ見辛くなってた、というわけ。ここはやはり「font-size:12pt;」とか数値で指定してしまって、拡大縮小は好みに合わせてやってくれ、っていうのが見る側的にはいいんじゃないかなぁ、と思うわけです。同理由により、Firefoxで某氏のはてなダイアリーを見るのは避けている僕だったり。

法律とか条令とかテンプレ

 ふと思ったわけです。ってか結構前から思ってたのだけど。法律の書面。これをXHTMLで組むとなると、どのようにマークアップしたものか、と。これ様式ってほぼ共通のものだし、1つ「これぞ決定版!」っていうフォーマットを用意しておけば、後は流し込むだけでいけるはず。まして、大半が文字。そりゃ何とかしてベストを作っておきたいなぁと思うのです。
 が。
 なかなかどうして、うまいこと決められないのです。

 例えば「第1条」と本文。条文の数字は<dt>、本文を<dd>…といきたいのだが、いや、いくべきなのだろうけど、floatかけないとこんな風に横並びにできないんよね。float激面倒くさーい、とか思うけど、致し方ないんかなぁ。で、この<dd>ん中に色々入ってくるわけやけども。
 更に、条文ったら、第2項からは数字が付くんだよね。<dd>の頭に数字を入れるとか考えてみたけど、ここでこの数字もfloatかけないといけなくなっちゃう。で、この数字が更に中のカッコ付き数字とは別モノなんよね。
 なんでこんなに面倒な話になるかというと、項の数字も、カッコ付き数字も、リストにできないんよね。だって、そういう表記になるtypeが今んトコ、ないんやもん。
 何かこの辺、鮮やかに解決できひんかなぁ、と、ずっと考えてみてるわけです。

ボックスモデル

 ボックスモデルの新しい解決法として、CSS3のWorkingDraftに入っているbox-sizingを使うものが出てきているようだ。

html * {
 box-sizing:border-box;
 -moz-box-sizing:border-box;
}

 前者は、box-sizingを実装しているブラウザ向け設定、後者はMozilla・Netscapeの独自拡張CSS。
 後者はBugzilla-jpで結構叩かれている。その意味するところを理解せずに、IEと表示を統一する決まり文句的に使われることに対しての危惧なのだろうと思う。まったくその通りだ。
 何より、これに基づいて指定することになるwidth・heightは、本来の想定と異なった解釈で全て指定することになる。どうにも気持ち悪い。
 …いい加減、こういうことで頭を悩ませることが嫌になってきた。Hackなしで作れるビジュアルにできればいいんやけど、ズルズル安易に使ってしまいそうな自分が、怖い。

Dreamweaver

 Dreamweaver 大嫌い派の僕だが、いくつかいいところがあることを知った。学んでみようと思う。

  • まとめて validator がかけられる。結果は見づらいけど…。慣れかな?
  • HTML とか、CSS とか、各種仕様リファレンスが入っている。これ、意外と便利。

 取り敢えず、これと置換だけでもマスターしとくと便利そうだ。
 ただ、こいつのおかげで、今日危うくバックアップしていた HTML ファイルを削除してしまいそうになった。サイトの一覧に含めたくないファイルを選べないのか?何ともなしに backspace キー押したら、そのまま HD 上からファイル削除しやがるし。焦った…。

CSSを使うとはどういうことなのか。

 昨日、先輩に言われてハッとさせられたことだ。
 結局、XHTML で組もうが、CSS 使いこなそうが、それでアクセシビリティがどうこう、仕様に準拠してどうこう、しかもビジュアルはちゃんとしててどうこうなろうが、本来の「文書定義」という枠組みを見失ったものでしかない、ということだ。
 Hack 使って validator 満点取って、んで、どうなん?と。
 そんなための XHTML 仕様ちゃうやろ、と。CSS 仕様ちゃうやろ、と。
 本来ならばそれらは、ブラウザ側にちゃんと実装されているべきものであって、それが実装されていないのを回避する故に Hack やらなんやらするのはおかしいんちゃうんか、と。
 確かに、そう。
 例えば、表組みの罫線をスタイルの border で出すと、見た目は確かにきれいにできる。けど、border の辻褄を合わそうとすると一番右端の col だけ別のスタイルを適用しなくてはいけなかったりする。それって見てくれのためだけのスタイルやったりするわけで。col ごとの意味づけみたいなんに大きな差があるならまだ許容できるかもしれんけど、そうでない限り、そんなクラス作らなくていいはずだし、そんなクラス作ること自体がおかしい、と。
 うーん、確かに、その通り。
 とりあえず、XHTML やら CSS やらをちゃんと学んでみよう、と思ったのはこの blog のテンプレートを作るときで。まだ学び始めて半年も経ってないので何とも言えないが、結局、見えたらええやん/ほんまただの文書定義、どっちかに辿り着くことになるんかなーという感じはする。
 仕事では別やけど、自分が好きで作るもんやったら、そういうことを思いっきり突き詰めてええんかも、しれへん。

width

 恐るべし CSS 2.0。
 width には数値・パーセント指定が可能だけれど、その際、前に「+」「―」を付加することで、親に対する相対値としての記述が可能である、となっていた。実際に

.test {
 width: ―2px;
}

 とかすると、ちゃんと通る(IE 5.5 SP2、Nestcape 7.1、Firefox 1.0 いずれも Windows XP SP1 で確認)。ちなみに、悪戯心で

.test {
 width: 50% ― 2px;
}

 とかやってみたら、これもちゃんと通りやがるのですよ。びっくり。もっとも、この記述は仕様書から外れたものだけれども。
 で、これがどんだけすごい発見かというと、互換モード時に Box Model Hack をある程度使わずに各環境で width 指定していけるということ。
 互換モード時の Box Model Hack の使用回避方法として、

  • div で width 指定。この時、padding・margin を使わない。
  • div 内の記述(例えば p)に padding・margin を使う。

 という方法を使ってきたのだけれど、これはこれで一部無理があって。

  • div について、左右に border を入れたい、となった時。左右 border の分(left 1px、right 1px だったら合計 2px)幅が延びてしまう。
  • しかもその div の width がパーセント指定になってたり。そもそも Box Model Hack 自体使えないよ!(…とこれに気付くまで思ってたけど、使えるってことなんよね)

 という時に対応できない。で、

  • div の外に 100% のボックスを作っておく。
  • div は width: ―2px;(左右 border の分ね)という width 指定を与える。

 という方法で逃れることが可能、というわけ。言っても僕も今日ざーっと読んだだけなので、使おうって人は自分の責任で調べてから使ってください。
 しっかし苦し紛れな指定の仕方やなぁ…。

セレクタ

 意味をよく知らずに使うのは良くない。反省。
 なので、おさらい。セレクタについて。
 「 」と「>」と「+」の違い。即ち、「子孫」「子」「直結」。
 「子孫」は、ツリー上の子孫関係にあるということ。「子」は、その名の通り、子であること。一親等みたいなもん。「直結」は限定された親に対して適用される。
 あれ、言いながらちょっと意味分からなくなってきた…。親はセレクタ記述してる時点で限定してるんちゃうんか。んー、昨日見てた時は分かった気になってたんやけど…どうやったやろか。要再確認。