Moral Hazard!!

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

Dreamweaverがクソ重い場合にチェックする項目

No Comment html,css,php

確認・・・Dreamweaver cs4以降

■Dreamweaverのプレビューがクソ重い。■

原因1・・・cssのid,class名に「-(ハイフン)」を使っている。

id,class名に記号の上では「マイナス」と同じハイフンを使うと、Dreamweaverがこれをマイナス要素かどうかいちいちチェックするので遅くなる。
(ソース)

対処法・・・id,class名にハイフンを使わない。
ソースには「ハイフン」を「_(アンダーバー)」に差し替えるなどの対処法が書いてあるが、かなり古いブラウザの場合はアンダースコアさえ認識しない場合があるので、一応心に留めておく。

ちなみに僕はセレクタ名が長くなる場合はキャメルケースで書いてます。
wrapperLeftContainer
みたいな。
ただcssではIE5以下は大文字を解さないので、同じクラスタ名で大文字小文字の使い分けはできない。

原因2・・・背景にpng画像を繰り返し使用

よくbody背景にpng画像を繰り返し使用するが、これが透過だったりする場合、クソ重くなる。

対処法・・・デザインタイムスタイルシートを使う。
Dreamweaverのデザインタイムスタイルシートでbody背景を表示させない。
もちろんプレビューで背景は表示されないけど。
ちなみにデザインタイムスタイルシートは基本的にこちらが設定したcssより先に読み込まれるので、
!importantを使って強制的にデザインタイムスタイルシートを優先させる。

リスト要素で隙間が出来る

No Comment html,css,php

liを使ってリストを作り、その中にリンクを貼ってdisplay:blockした場合、IE6ではバグで隙間が出来る。

これはmargin,paddingを指定しようが消えないので、

a要素にzoom: 1;を指定すると解決する。

あとSafariでは、リストのulタグにmargin,paddingを指定していなかった場合、たとえユニバーサルセレクタ(*を使ってcss全部に適用させるセレクタ)でmargin,paddingを0pxに指定してても変な隙間が出来る。

そのため、その都度ulにmargin,paddingを0で指定しておく。

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の順番でないと正確に動作しない。