1byteの隙間を埋める HTML の書き方（※書きかけ）

HTML を書くときに、テキストや画像の間に予期しない隙間が発生した、なんて経験はありませんか？

「予期しない隙間」だけでは分かりにくいでしょうから、ちょっとだけ例を出してみましょう。（※閲覧例に IE 6 のスクリーンショットを出しているのは、シェアの大きさと見た目のわかりやすさを優先させた結果です。Firefox や Opera、Safari などでも、大筋で似たような結果が得られます。）

サンプル事例 1: スクリーンショット

閲覧例: 6

• ［上］HTML ソース中に改行文字やタブ文字（インデント）が入ってるテキストを IE 6 で見た時の状態。
• ［下］HTML ソースに細工を施した後で IE 6 で見た状態。

（テキストに "■" を使っているのは隙間が空いてるのを見やすくするため。なお、Firefox では "■" だと禁則処理が効いてしまって上のケースでは改行位置が不揃いに、下のケースでは横一行に表示されます。IE 6 でスクリーンショットを撮ったのはこのためです。(^_^;ゞ ）

サンプル事例 2: スクリーンショット

閲覧例: 6

• ［上］HTML ソース中に改行文字やタブ文字（インデント）が入ってる並列画像を IE 6 で見た時の状態。（※開いてる隙間がわかりやすいように、background-color を赤にしてあります。）
• ［下］HTML ソースに細工を施した後で IE 6 で見た状態。

今日はこの隙間の原因と解決策についての覚え書きです。

続きを読む "1byteの隙間を埋める HTML の書き方（※書きかけ）"

Firefox で Emacs キーバインド

誰だったかから Emacs キーバインドが使えないから Firefox は使わない、みたいな話をされたことがあったんですけど、なんとなく keyconfig でそれぽいことが出来そうだよなとは思いつつも、自分では絶対使わないだろうからという理由でずっと放置してました。なぜ使わないのかって、Emacs を触ってから Windows のアプリを触るとロクなことがないからです！特に Ctrl - w！（注：Emacs ではカット（切り取り）、Windows ではウィンドウを閉じる動作に割り当てられてます。）

ところが今日、偶然、「firefoxのキーバインドをemacs風にしてみる」なんて記事を見つけて、ふと上のような経緯を思い出したので、備忘録代わりにメモっておこうと思った次第です。それだけ。

Firefox のキーバインドを Emacs風にしてみる

http://d.hatena.ne.jp/amt/20050325/firefox

でも一方で Unix や GNU Linux ユーザーを中心に、潜在的な需要は結構あるはずだよな～とは思います。エディタに限定すれば、Emacs って、Windows や Mac 用の普通のエディタにはない、いいところがたくさんありますしね。なかなか Emacs から離れられない人の気持ちは何となく分かります。C-k （カーソル位置以降の行切り取り）や M-/ （コンプリーション＝自動補完）なんて一度覚えちゃったら、なかなか手放せませんし、S式マンセー！な人（eLisp が書ける人）ならゴリゴリ自分で拡張できちゃいますしね。 （ちなみに僕は書けません。）

CSS 3 セレクタを使わなかった場合のソース

昨日の記事（「CSS 3 セレクタ最終草案リリース」）で紹介した CSS 3 属性セレクタのサンプルですが、同様のことをクロスブラウザでアクセシブルにするにはどうすればいいかという点と、その場合の(X)HTML ソースがどれだけ冗長になるかという点が抜けてましたので以下に追記しておきます。

続きを読む "CSS 3 セレクタを使わなかった場合のソース"

CSS 3 セレクタ最終草案リリース

対応ブラウザ: （CSS Level 3）

CSS 3 セレクタ最終草案がほぼ予定の１ヶ月遅れでリリースされたようです。勧告まであと一息ですね。セレクタが充実してくると、class や id をタグ内に埋め込む割合が激減するので、何とか頑張って IE 7 にも実装してもらいたいところです。

ちょっと実例を出してみましょう。ソースをご覧いただければ一目瞭然ですが、以下のリンクには img タグはもちろんのこと、class や id も一切使わずにリンク先がサイト内外のいずれであるかや、リンク先のファイルタイプを CSS だけで判別して、適切なアイコンを付けています。（残念ながら IE や Opera では未対応。）

• サイト内へのリンク
• サイト外へのリンク
• メールアドレスへのリンク（ダミー）
• PDF ファイルへのリンク（ダミー）
• MS Word ファイルへのリンク（ダミー）
• MS Excel ファイルへのリンク（ダミー）
• テキストファイルへのリンク（ダミー）

スクリーンショット （Windows XP SP2 + Firefox 1.5）

Safari などでのスクリーンショット

続きを読む "CSS 3 セレクタ最終草案リリース"

ココログ試用感

早速、使ってて幾つか不満の点が発生。

• CSS が自分で直接編集できない。
• "続きを読む"のテキストを自由にカスタマイズできない。
• 原則、固定レイアウトで、大画面に弱い。
• 使い回し用画像へのリンクは絶対パスで指定しないとリンクが切れる。

このうち、「CSS が自分で直接編集できない」点については、任意の CSS ファイルをアップした上で、記事の冒頭に、

<style type="text/css"><!-- @import url("http://my-chunqiu.cocolog-nifty.com/css/screen.css"); --></style>

のようにパスを通して import してやることで（link 要素の外部 CSS ファイルよりも優先的に扱ってくれるので）、多少は解決できます。いささか面倒ではありますけど。(- -;)

seesaa → ココログ

→

突然ですが、以下の 3点の理由で Seesaa からココログに移転しました。

• 容量が 100MB → 2GB と画像をたっぷり保存できる
• ひとつの記事に対して複数のカテゴリーを同時に割り当てられる
• BMP（Basic Multilanguage Plane）内の Unicode文字がフルで使える

続きを読む "seesaa → ココログ"

ThinkPad X40 の HDD は 1.8 inch

そろそろ空き容量がヤバい..

メインで使ってる ThinkPad X40 の HDD の空きが 2GB を切ってしまったので、今 使ってる 40GB を 80GB に換装しようと X40 の HDD の外蓋を開けてみたら、HDD がノートPC で通常使われる 2.5 inch ではなく、その半分強くらいの大きさの 1.8 inch であることが判明。幸い、80GB の HDD は新しく買ったものではなく、父の使い古しだったので外付けHDD として転用すれば済みますけど、新たに 1.8 inch の 80GB HDD を購入する必要が出てきました。

続きを読む "ThinkPad X40 の HDD は 1.8 inch"

坂村健氏が12万字フォントを無償公開

TRON で有名な東大大学院教授 坂村健氏が 12万字規模のフォントセットを今日からはじまる TRONSHOW 2006 にて出品するそうです。この12万字フォント（T書体）は、従来の GT コードの 78,765字に加え、中国の宋・明・清朝や江戸期の文献から抽出された「宋明異体字」が 34,499字、白川静『金文通釈』中の金文を隷定（≒ 楷書化）した「金文釈文文字」661字、そして、変体仮名・濁点仮名といった非漢字 1,814字を合わせ、都合 115,739字で構成されるフォントセットになるそうです。しかもこれらを明朝体・ゴシック体・楷書体の３書体同時に無償提供するというから驚きです。

（2005-12-23補足：なお監修者は同じ東大東文研の平㔟隆郎教授。）

以下、手短にこのフォントの長所・短所・疑問点を掲げておきます。

続きを読む "坂村健氏が12万字フォントを無償公開"

CSS（:target 疑似クラス）だけでタブ効果

対応ブラウザ: （CSS Level 3）

なんか意外とページの整形に手間取ってしまいました。Seesaa って HTML ファイルのアップもできるんですね〜。これで Unicode さえ通れば文句ないんだけどな..。 さて、今回は表題にあるように CSS 3 の :target 擬似クラスだけでタブ効果を演出してみようという試みです。CSS 3 のセレクタ部分が予定では先月中に正式な勧告がリリースされるはずだったんですが、まだ出てないようですね。見切り発車気味ですけど、Firefox とか一部のブラウザが既に CSS 3 の一部を実装しつつあるので、まっ、いっかってことで。(笑) 2001年に勧告候補がすでに出ているとはいえ、IE 7 に反映してもらうためにも一日も早くリリースにこぎつけてもらいたいものですね。

続きを読む "CSS（:target 疑似クラス）だけでタブ効果"

Web 2.0 に重大な脆弱性

Web 2.0にセキュリティホール発覚 次期バージョンで改修

Web 2.0 にセキュリティホール？なんてネタが流れました。あくまでネタですが、多少リアリティがあります。（「セキュリティホール」云々はともかく、中身は半分以上事実に則してますし。こういうネタ、結構好きかも。(笑)

http://bogusnews.seesaa.net/article/10257876.html

続きを読む "Web 2.0 に重大な脆弱性"

コンテンツ カテゴリー再構築

（2005-12-23 補足：ココログ移転により、この問題は解決しました。）

続きを読む "コンテンツ カテゴリー再構築"

Firefox 1.5 リリース

少し遅くなりましたが、Firefox 1.5 がリリースされました。

http://www.mozilla-japan.org/products/firefox/

主な新機能や強化・改善機能は以下の通りです。

続きを読む "Firefox 1.5 リリース"