Moral Hazard!!

ドラマーが音楽やホームページやガラクタを作るよ。

docomo用サイトでcssを使う場合(php)

No Comment html,css,php

FOMAで中途半端に対応している"i-css"
携帯サイトをdocomoに対応させるには、以下が大前提。

■cssをbody内に書かないといけない(外部css非対応)

<h1 style="color:#808080">SITE TITLE</h1>

こんな感じで一個一個書く。めんどくさい。

■cssをヘッダに書かない(a要素だけは例外に対応している)

<style type="text/css">
<![CDATA[
a:link{color:色コード;}
a:visited{color:色コード;}
a:focus{color:色コード;
}
]]>
</style>

上記をヘッダに入れるとリンク時の色を変えられる。(CDATAにしないと、携帯では文字として出力されてしまうっぽい。xhtmlの場合、通常のhtmlコメントでは内部が完全に無視されるのでNG)

■拡張子がxhtmlでないといけない。(htmlではダメ)

htmlの場合は、.htaccessに

AddType application/xhtml+xml .html

を入れると対応する。
拡張子がphpの場合は、該当ファイルのド頭に

header("Content-type: application/xhtml+xml");

を挿入。
一応参考までに今作ってる携帯サイトのヘッダを記載。(間違ってたら申し訳ない)

<?php header("Content-type: application/xhtml+xml"); ?>
<?php echo '<?xml version="1.0" encoding="Shift_JIS"?>'; ?>
<!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" lang="ja" xml:lang="ja">
<head>
<title>Studio Cooper</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="content-Style-Type" content="text/css" />
<meta name="keywords" content="キーワードを挿入" />
<meta name="description" content="説明を挿入" />
<link rel="index" title="サイトタイトルを挿入" href="http://<?= $_SERVER["SERVER_NAME"]; ?>" />
<link rel="canonical" href="http://<?= $_SERVER["SERVER_NAME"]; ?>" />
</head>

fancyboxがIEで表示されない

5 Comments html,css,php

画像をシンプルに拡大表示してくれるスクリプト、fancybox
MITライセンス(スクリプト内の著作権表示を消さなければ商用サイトにも使える)で重宝するのだが、導入時にIEで表示されずに少し詰まったのでメモ。

導入はこちらのサイトを参考に。

jquery.fancybox.cssを開くと、後半のIE用の画像を指定する部分がずれている。
僕はサイトルートから/js/fancybox/の中にファイルを入れていたので、

fancybox/fancy_loading.png以下IE用の画像指定を全部
js/fancybox/fancy_loading.pngに変更する事で解決した。

a要素やobject要素の点線を消す

No Comment html,css,php

■Firefoxでa要素やobject要素をクリックすると表示される点線を消す方法。

Firefoxなどでリンクボタンなどをクリックした時に出る、あのうっとおしい点線が精神衛生上良くないという貴方に。

a:link,a:visited,a:hover,a:active {
outline: none;
}

※a要素はこのlink→visited→hover→activeの順番でないと正確に動作しない。

スクロールバーを常時表示してデザイン崩れを防ぐ

No Comment html,css,php

■Firefoxなどでスクロールバーを常時表示して、デザインを崩さない方法

html {
margin-bottom:1px;
height:100%;
}

※overflow-y:scrollはcss2では策定されていないため、OperaやNNでは表示されない。
(CSS検証サービスなんかでエラーが出て気分が悪い)

ソース:http://neo.s21.xrea.com/web/006.html

ポップアップウインドウがIEで表示されない

No Comment html,css,php

とあるサイトでポップアップウインドウが突然効かなくなった!たっけて!と言われて、当該サイトをチェック。

元のhtml。

<a href="#" onclick="MM_openBrWindow('example.html','ポップアップしたいHPのアドレス','scrollbars=yes,resizable=yes,width=800,height=600')">

最初Firefoxで確認したところ、特に不具合は無い。
でもIEでチェックすると「引数が無効です。」と表示される。

なんでだろ?と調べて見たところ、

「IEではサイトの詐称を防ぐ意味か何かで、第二引数で使用できる文字を制限している(という噂)
らしい。
簡単に言うと、ポップアップしたいページのタイトルは簡単なものにしろってことでしょうか?

問題のページでは、ポップアップページに
「シェフの気まぐれハンバーグ定食~きのこの恵み~」
みたいなひらがな漢字記号てんこ盛りのタイトルになっていたので、これを

<a href="javascript:void(0);" onclick="window.open('example.html','<span style="color: #ff6600;">popup</span>','scrollbars=yes,resizable=yes,width=800,height=600');return false;">

シンプルなもの(上の例ではpopupというタイトル)に変更することで、トラブルは解消された。
もちろんポップアップするページのタイトルも同じものに変更しないと駄目。

ちなみにこの動作をさせるだけなら、特にタイトル指定をせずにnullを指定

<span style="font-size: x-small;">(null=空)</span>
<a href="javascript:void(0);" onclick="window.open('example.html','<span style="color: #ff6600;">null</span>','scrollbars=yes,resizable=yes,width=800,height=600');return false;>

するだけですむ。