WEB デザイン

スクロール位置を維持しつつ web ページ全体のスクロールをできないようにする方法 (web ページのスクロール位置固定)

最近は Ajax などによって web ページを動的に変更するという手法も一般的になって、ページの中にさらにサブページのようなものをポップアップする、ということがしばしば行われます。 例えば Facebook の Theater mode のようなものです。さて、「ページの…

CSS の position: fixed により描画領域全体を覆う要素を IE 6 でエミュレーションする

Lightbox のように、ブラウザの描画領域全体に何らかの要素を表示したいような場合、おそらくは CSS で position: fixed を指定すると思います。しかしながら、Internet Explorer 6 は position: fixed をサポートしていないので、IE6 で同じ事をするには別…

スマートフォンでも見やすい web ページを作るために media queries を使うという選択

最近スマートフォンを使って web ブラウジングしていて気になることがあります。 それは、幅固定の web ページや複数カラムの web ページが非常にみにくい ということ。 当然ながらスマートフォンの画面の横幅は狭いため、PC 用に作られた幅固定や複数カラム…

CSS の display: table-cell を使って画面中央に要素を配置する

なんらかの要素を画面の中央に配置したい、ということはしばしばあります。 水平方向 (横方向) の中央揃えは CSS の text-align: center を使ったり、ブロック要素ならば margin: auto を使ったりして簡単に実現できますが、垂直方向 (縦方向) の中央揃えは…

XHTML における空要素の扱い

HTML 4.01 では内容モデルが EMPTY の要素 (hr 要素や meta 要素など) は以下のように表現していました。<hr>XML で言うところの閉じタグを省略した形であり、省略 「できる」 のではなく省略 「しなければならない」 のでした。では、XHTML ではどのようにすれ</hr>…

HTML5 では空要素 (void elements) の開始タグを閉じても良い

最近ちょこちょこと HTML5 の草案 を見ているわけですが、ふと気になって HTML 要素の Syntax を見てみたら Start tags must have the following format: The first character of a start tag must be a U+003C LESS-THAN SIGN ( The next few characters of…

本当の意味での XHTML は世の中に多くないという話

Understanding HTML, XML and XHTML (灯台下暗し -カッターナイフで恐竜を腑分けした記録-) より。XHTML と HTML がどんな関係にあるのか、それは誤解ばかりが広まっています。WebKit (Safari や S60 Browser のレンダリングエンジン)開発者の Blog で、この…

コンテントネゴシエーションと Vary レスポンスヘッダ

うちのサイト (vivid code) は XHTML の MIME タイプを "application/xhtml+xml" で配信しています。 ただ、IE ではそれを閲覧できないという問題があります。 そこでうちのサイトでは HTTP リクエストヘッダを見て、Accept フィールドに "application/xhtml…

Firefox で画像の下に隙間が出来てしまう問題

以下のような HTML コードを考えます。<div style="border: solid 1px #666666;"><img alt="sample" src="XXX.png" /></div>普通は画像と div 要素の border の間に隙間が出来ないと思いますよね? 実際 MIME タイプを "text/html" として Firefox で表示したときには隙間はできません。しかし、何故か MIME タイプを "application/xhtml+xml" …