Notes :: 2004年05月

最新版

最近書かれた記事5件分を表示します。

更新情報RDF

更新状況をRSS 1.0形式でご覧になれます。

overflowの振る舞い

URI
http://rhongomyniad.org/notes/2004/05.html#d20t2132
カテゴリ
CSS
ブラウザ全般
投稿日時
2004-05-20 21:32

CSSには、ボックスに収まり切らない内容の扱い方を指定するoverflowというプロパティがあります。これは表示領域の右端で折り返さない、例えばpre要素などによく用いられます。overflow: auto;またはoverflow: scroll;とすると、指定した要素内にスクロールバーが表示され、収まり切らない内容を見られるようになります。この時、ページ全体の横スクロールバーは出現しません。

meta要素による指定とHTTPレスポンスヘッダの関係のようにpre要素を多用する場合は重宝するプロパティですが、実装されているブラウザとそうでないブラウザがあります。一般的なブラウザの実装状況は次の通りです。

Opera 7.50
正常に動作する。
Mozilla 1.6、Netscape7
正常に動作する。
WinIE6
一緒にwidth(auto以外)を指定するとスクロールバーが出る。
MacIE5
指定した要素全体が表示されない。

MacIE5には、overflowにvisible以外の値を指定すると要素全体が表示されなくなるバグが存在します。このバグの存在は知っていましたが、実際に確認してみるまで案外気づかないものですね。pre要素に指定しているoverflow: auto;をMacIEに適用しないように修正しました。

meta要素による指定とHTTPレスポンスヘッダの関係

URI
http://rhongomyniad.org/notes/2004/05.html#d18t2205
カテゴリ
XHTML
PHP
Webサイト制作
投稿日時
2004-05-18 22:05

HTTPレスポンスヘッダ(HTTP Response Header)とは、リクエストしたデータについてサーバから返される情報です。MIME typeやcharset(文字コード体系)といった情報がその一例です。HTML文書内に記述するmeta要素によってこれらの情報をコントロールできますが、多くの場合、この指定はHTTPレスポンスヘッダには影響せずUAに対してのみ効果を持つようです。(HTTPレスポンスヘッダにmeta要素の指定を反映させられるサーバもあるそうです。)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="/foo.css" />
    <title></title>
</head>

このようなhead要素を有するHTML文書のHTTPレスポンスヘッダは次のようになります。

HTTP Status Code: HTTP/1.1 200 OK
Date: Tue, 18 May 2004 11:51:23 GMT
Server: Apache/1.3.29 (Unix) PHP/4.2.4-dev
Last-Modified: Tue, 18 May 2004 10:29:58 GMT
Accept-Ranges: bytes
Content-Length: 3601
Connection: close
Content-Type: text/html
      

最終行のContent-Typeには、meta要素で指定したcharset=UTF-8が含まれていないことが分かります。Content-Style-Typeに関しては、それ自体が含まれていません。

meta要素はUAが解釈してくれるので問題がないように見えますが、言い換えれば、UAが解釈できなければ問題が発生することになります。一般的なWWWブラウザでは問題ありませんが、Netscape Communicator 4.xなどの一部のUAでは稀に文字化けすることがあります。

これを解決するには、.htaccessを利用します。次のように記述することで、拡張子htmlを持つファイルのContent-Typeに文字コードを指定することができます。HTTPレスポンスヘッダにも反映されます。

AddType "text/html; charset=UTF-8" html

Content-Style-Type、Content-Script-Typeについても、.htaccessで指定することができます。ただし、モジュールmod_headersが利用できる場合に限られます。

Header set Content-Style-Type: "text/css"
Header set Content-Script-Type: "text/javascript"

これらの設定を行った後のHTTPレスポンスヘッダは次のようになります。(HTML文書には手を加えていません。)

HTTP Status Code: HTTP/1.1 200 OK
Date: Tue, 18 May 2004 12:21:13 GMT
Server: Apache/1.3.29 (Unix) PHP/4.2.4-dev
Content-Style-Type: text/css
Content-Script-Type: text/javascript
Last-Modified: Tue, 18 May 2004 10:29:58 GMT
Accept-Ranges: bytes
Content-Length: 3601
Connection: close
Content-Type: text/html; charset=utf-8
      

Content-Style-Type、Content-Script-Type、charsetの指定が反映されています。従って、.htaccessを用いてこれらの設定を行う場合、HTML文書内のmeta要素におけるContent-Type、Content-Style-Type、Content-Script-Typeの指定は、必ずしも必要ではありません。

拡張子.phpを持つファイルについて

拡張子.phpを持つファイルに対しては、.htaccessによるAddTypeの指定が無効になります。文字コードを設定するには、ファイルの先頭でheaderを指定します。

<?php
    header ("content-type: text/html; charset=UTF-8");
?>

Opera 7.50正式リリース

URI
http://rhongomyniad.org/notes/2004/05.html#d15t0237
カテゴリ
Opera
投稿日時
2004-05-15 02:37

半年のベータテストを経てOpera 7.50が正式にリリースされました。現在は英語版のみ利用可能です。

7.50ではRSSのリーダが実装されており、Everything You Need Onlineというキャッチコピーにも頷けるところです。

文書情報

桐沢 辰