Moral Hazard!!

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

スマホサイトでtableを使わないといけない場合

No Comment html,css,php,

wordpressでPCとスマホでデザイン分けしてる時に、一番困るのがtable。
要素が一杯のtableはPCでは見やすいけど、スマホで地獄。
少なくとも横幅をはみ出させずに表示させるためのcss設定をメモ。

  width:auto;
  table-layout:fixed;
  word-break:break-all;
  word-wrap:break-word;

参考リンク。

http://www.understandard.net/css/css009.html

bxsliderで一瞬二枚目以降の画像が表示されてしまい恥ずかしい思いをする時には

1 Comment html,css,php,

画像をスライドさせるjQueryスライダー「bxslider」。画面サイズに合わせて拡大縮小機能もついているので、非常に便利で私もよく使っております。

ただ横幅一杯に使う場合はどうしても画像が大きくなりがちで、その場合ページの読み込みに時間がかかり、一瞬2枚目以降の画像が表示されてしまうことがあります。

これを簡単に解決するためは、jQueryで2枚目以降の画像を表示する時間を遅らせます。

html

<ul class="bxslider">
	<li><img id="img1" src="http://test.com/test1.jpg" /></li>
	<li><img id="img2" src="http://test.com/test2.jpg" /></li>
	<li><img id="img3" src="http://test.com/test3.jpg" /></li>
</ul>

css

#img2, #img3 {
display:none;
}

jQuery

$(document).ready(function(){
  $('.bxslider').bxSlider({
	  auto: true,
	  controls: false,
	  autoHover: true,
	  pager: false,
	  speed: 1200,
	  pause: 6000,
	  mode: 'fade'
  });
$('#img2,#img3').delay(3000).css('display','block');
});

要は
「最初2枚目以降の画像を非表示にして、サイトが読み込まれるまで待ってから表示」
するって形。
具体的には

1, 指定画像(ここでは#img2,#img3)を最初display:noneで非表示にしておく
2, delayで数秒後(ここでは3000=3秒)に表示させる

※wordpressの場合はカプセル化するか、$をjQueryに変更。

エラーログにnone, refererが出る。

No Comment html,css,php,,

サーバーのエラーログに

File does not exist: folder/none, referer:http://domain.jp/

とやたら出力される。
気になって当該サイトのFirebugのエラーを見たところ、cssファイルからのリンクエラーが出ていた。
そのcssには

#container {
background-image: url(none);
}

と背景色は白、画像は「無し」を指定してある。

実はこれが問題で、背景を無しと正しく指定するには

#container {
background-image: none;
}

としないとサーバーが404エラーを返してしまう。
こちらに詳しい事が書いてあります。素敵。

何がダメって、Dreamweaverで背景無しを指定しようとcssスタイルをいじくったら、平気で上のソースを吐く事。
もうそろそろエディタ変えないとやばいな。

デザインビューでDreamweaverがフリーズする件

No Comment html,css,php

困ったこと↓

特定のmarginを指定している時だけ、なぜか100%Dreamweaverがフリーズする。
phpのインクルード先に該当コードがある時に、require_onceをコメントアウトしてもフリーズする。
(コメントにしていても読みに行ってしまうのか?)

原因↓

Dreamweaver CS5の現在、そのままではclearfixがデザインビューに反映されない。
clearfixを使用してデザインビューを見ると、親Boxのheightが効いていないのに加え、CSSスタイルパネルが延々と表示の更新が繰り返されたり、上記のような特定のcssでフリーズする。

対処↓

clearfixにoverflow: hidden;を追加する。

clearfix分の表示も整い、フリーズも消えた。

IE7以下で、背景が消える

No Comment html,css,php

cssでショートハンドを使って背景を指定した場合、背景が消えることがある。

その場合はリセット用CSSに{background: transparent;}が指定されてないか確認。

IE6ではこのリセットのあとにショートハンドで背景色を指定すると、反映されないバグがある。

対策・該当箇所をショートハンドで背景を指定しない。