HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

「vs」とタイトルしましたが、そう荒々しい内容でもないのですが。

私は、プログラマとしてはいわゆる「prototype.jsを使う派」だったのですが、昨今、世の中的にはjQueryのほうが注目度が上がってきているような気がします。

prototype.js を使用する理由としては、記述方法にある程度縛りがあり、シンプルなライブラリだからです。具体的にjQueryと比較するほど深い知識はありませんが。。。なんとなくです。それゆえ、他人が書いたprototypeのコードは比較的、理解しやすいような気がします。一方でjQueryは記述方法に自由度が高いためか、同様の機能のプログラムでも、プログラマによってコードは千差万別でそれぞれの「癖」みたいなものが写っており、読み解くのに時間がかかります。

なんで世の中、いろんな技法が出るんだろう。機能はそんな変わらないのだから、一本でいいじゃないですか。目的の達成を近道するために生まれた技術のはずが、こうもいくつも生まれて、互いに犇き干渉しあって、逆に複雑になってはいないだろうか。。。
と、個人的にそう思っています。。。

そういう思いで、これまではprototype.jsに絞り、仕事を進めていたのですが、最近では圧倒的にjQuery絡みでの依頼が多いです。
prototype.js の気になる洋書が和訳されるのを待っていたのですが、そんな予定もないようで、それどころか今年に入ってからprototype.jsの書籍はほとんど出ていません。一方でjQueryに関する書籍は数多く出版され、月刊誌などでも多く特集として取り上げられています。

強いこだわりはないのです。jQueryならそれでいいんです。
というわけで、jQueryを習得すべく、本屋にでも行ってきます。

新しい技術が出ることはいいんですが、そのために古い技術を捨てるとなると。。。
いや、やっぱりいくつもやる必要はないんじゃないですか。一本でいきましょうよ。世の中シンプルなほうが幸せなはず。

コンテンツの縦・横幅をブラウザサイズに合わせたい、または、ポップアップ画面を表示するといった場合に、スクロールバーを消すことがあります。

HTML内のブロック要素に対してスクロールバーを消すにはCSSで以下のようにします。

ある任意のブロック要素の縦幅、横幅をブラウザのサイズに合わせて可変にしたい場合があります。

これを実現するためにはJavaScriptで、ブラウザサイズ変更を感知、ブラウザサイズを取得、ブラウザサイズの比率でブロック要素のサイズを変更、という流れの処理を実現しなければなりません。

例えば、縦幅を可変対応としたい場合に、まず、ブラウザサイズの検知にはイベントハンドラ「window.onresize」を利用します。
ブラウザサイズの取得には「document.documentElement.clientHeight」を用います。直感的に「window.innerHeight」を使おうと思いますが、これはIEでの動作がおかしいので標準的には使えません。

サイズ変更にはスタイル要素を追加しますが、ここでは「element.setAttribute(“style”, “height : ” + x + “px;”);」とします。これも直感的には「element.style.height」と思うかもしれませんが、IEではちゃんと動いてくれません。

ブラウザで印刷すると、モニタで見るレイアウトの通りに印刷できずに、内容が欠けたり、レイアウトが崩れることが多々あります。

原因としては、Webページの横幅のサイズなんて千差万別なので、ブラウザが対応しかねているという点があります。
そもそも、ブラウザは対応する気がないのかもしれません。Webページなんて印刷することを前提としてはいない、逆に印刷物にはないメリットがあってこそのWebコンテンツということでしょうか。

しかし、地図やクーポンなど、そこはどうしてもうまく印刷したいというコンテンツもあります。そんな時は、print cssを設置すればある程度解消できます。

先日気が付きましたが、このサイト「helog」実はIEで見れてなかったのです。
恐ろしいことですね。

普段は家ではFirefoxしか使わないのですが、たまたまIE6を起動してこのページ「helog」を表示させてみたら総崩れ。。。
具体的には、css、javascript、画像などのコンテンツへのパスが一つも繋がっていません。レイアウトも関係なく、真っ白なページにテキストがずらずら書かれているような状態でした。

原因は以前に「he-ron.jp」をサブドメインを切って、サイト再編を行ったところからです。
例えば「http://he-ron.jp/contents/index.html」から「http://he-ron.jp/image/image.jpg」にアクセスする場合の相対パスは「../image/image.jpg」が正解です。
しかし、Firefoxの場合、極端に言うと「../../../../image/image.jpg」でもアクセス可能できたりするわけです。ルートとなるディレクトリにより上には行けないからでしょうか。おそらくapacheなどサーバの設定にも依存すると思いますが、詳細は分かりません。。。

今年の初めあたりにサイト再編をやって、階層をごっそり移したときにFirefoxでしか確認していなかったのがダメでした。

いやいや、webを職業としている者としてありえない失態です。
これまでIEからアクセスしていたみなさま、どうもすみませんでした。

またまたIE6のネタです。なんだか最近、確実にIE6のおかげで作業量が何割増しになっている気がします。
IE6料金って取れないだろうか。。。

今回は、IE6では対応していないcssプロパティ「min-height」を実現する方法です。
コードから先に出すと、以下のようになります。

.sample {
	min-height: 300px;
	height: auto !important;
	height: 300px;
}

IE6で文字が欠けることがあります。
「文字が欠ける」というのは、テキスト上部と下部で1pxぐらいのラインが表示されないという現象。
例えば、私の場合はブラウザ間で見た目を統一するために、line-heightプロパティを設定したり、リストのマークの位置を揃えようとする場合によく発生します。

JavaScriptでOSを判断したい場合があります。
というのも、ブラウザなどの環境によってJavaScriptの動作が異なる場合があるからです。

最近ではprototype.jsやjQueryをベースでのプログラミングが主流で、これらライブラリによりブラウザ依存の問題をある程度クリアされますが、それでもOSやブラウザ依存問題には悩まされる場面があります。
そんな時には以下のようにして自力で回避するしかありません。

例えば、既存のサイトにJavaScriptの改修を加えると、それまで動作していたonload処理が動かなくなったりします。
まあ、その都度、調べればなんとなく原因は分かるんですけど。

そこで基本的なことではあるがonload処理のしくみを検証してみます。
一般的にはonload処理の設定には以下の3つがあります。

Monthly Archives

Search