table tr のborder

単純かもしれませんが、結構手間がかかりました。

①tableのtdにborder:dashedを入れると、tdの区切りがずれる

あああああ いいいいいいいいいい ううう
あああああ いいいい ううう


②trをdisplay:blockにしてtrにborder:dashedを入れると、tdの内容が足りない時に縦に揃わずずれる
あああああ いいいいいいいいいい ううう
あああああ いいいい ううう


③tableにborder-collapse:collapseを入れ、trにborder:dashedを入れる
あああああ いいいいいいいいいい ううう
あああああ いいいい ううう


これで解決しました。

slickを動作させない

$(this).slick('unslick');

bxsliderのオプションをブラウザの画面幅で変更する

bxsliderはレスポンシブに対応していてとても便利なのですが、
ブラウザ幅によって少しオプションを変更したい場合のメモ。

var slidenum;
if(window.matchMedia('(min-width:768px)').matches){
    slidenum = 1;
} else {
    slidenum = 3;
}

var slider = $('.bxslider').bxSlider({
    minSlides: 1,
    maxSlides: slidenum,
    moveSlides: 1,
    onSlideAfter: function(){
        slider.startAuto();
    }
});

bxSliderのコントロール類をクリックするとスライドが停止してしまうので自動的に再開させる

bxSliderを自動再生にしている時、コントロール類をクリックするとスライドが停止してしまいます。
それを回避する方法として、onSlideAfter というコールバックのオプションに「startAuto」という関数(Public methods)を指定するとのこと。

var slider = $('#top_bxslider').bxSlider({
  auto:true,
  speed:500,
  pause:3500,
  onSlideAfter: function () { slider.startAuto(); }
});

==================================

こちらを参考にさせていただきました。

jQuery レスポンシブ・スライダー bxSlider

ツイートボタンがIEでエラーになる場合の対処法

文字コードがUTF-8以外の場合にエラーがでるようなのでその対処法。

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

これを以下のようにする。

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.charset="UTF-8";js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

==================================

こちらを参考にさせていただきました。

TwitterのウィジェットがIEでエラーを出す際に対処法

 

dl,dt,ddの擬似テーブルで3pxのずれを直す方法

dtとddを横並びの擬似テーブルにする場合、IE6だと3pxのずれが生じます。
その場合、zoom: 1;などでhaslayoutをtrueにすれば解決していたのですが、今回はdtとddの下にボーダーを入れたかったので、この方法は使えませんでした。。。

そこでいろいろ調べたところ、こんな方法がありました。
Clearfixすごいですね!

==================================

こちらを参考にさせていただきました。

IE6 dl,dt,ddの擬似テーブルで3pxのずれを直す方法

jQuery Lightboxで、PREV/NEXTボタンを常に表示

通常のLightboxのPREV/NEXTボタンを常に表示させるとすると、CSSでhover部分を修正すればいいので簡単です。

しかし、jQuery LightboxはCSSにhoverの記述がありませんでした。
これはjsをいじるしかないのかな・・・と思っていましたが、簡単に表示させる方法を見つけました。

27、8行目あたりの、以下の部分をfalseからtrueに変更します。

// Configuration related to navigation
fixedNavigation:        true,        // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.

これでPREV/NEXTボタンが常に表示されるようになりました。

==================================

こちらを参考にさせていただきました。

jQuery lightBoxで、PREV/NEXTボタンを常に表示する。

OperaでのLightbox 2のズレ

先日いつものようにLightbox2を導入していたのですが、Opera9でLightboxのウインドウが下にずれて表示されることが判明しました。知らなかった・・・

この現象を回避するため、lightbox.jsの231行目の下に、下記のコードを付け足しました。

if(window.opera){var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 30);}

これでばっちり回避できました!

==================================

こちらを参考にさせていただきました。

OperaでのLightbox 2のズレ

横並びにしたリストを中央揃えにする

リストをfloatやdisplayで横並びにしたものを、ナビゲーション等でよく使用します。
display: inlineでも横並びになるのですが、li要素間の改行が入ると隙間があいてしまうのがいやなので自分は通常floatを使用しています。

floatを使用した場合

css
li {
  float: left;
  padding-right: 10px;
}
li a {
   background-color: #fff2cc;
}


表示サンプル


displayを使用した場合

css
li {
  display:inline;
  padding-right: 10px;
}
li a {
   background-color: #fff2cc;
}


表示サンプル


しかし、横並びにしたリストを中央揃えにしたい場合、floatのleftやrightでは実現できません。float: centerがあればいいのにな・・・

という時に、display: inline-blockを使用します。
しかし、inline-blockはIE7以下とFirefox2に対応していないため、プロパティを追加します。


display: inline-blockを使用した場合

css
ul {
   text-align: center;
}
li {
  display: -moz-inline-box;
  display: inline-block;
  /display: inline;
  /zoom: 1;
  padding-right: 10px;
}
li a {
  background-color: #fff2cc;
}


表示サンプル


/display: inline;と/zoom: 1;はIE7以下用、display: -moz-inline-box;はFirefox2用の記述になります。
※上記の表示サンプルは、ココログで投稿するとソースが自動的に書き換わってしまうため、IE7以下とFirefox2では横並びになっていません。しかしソースをそのまま使用すればきちんと横並び中央揃えに表示されると思います。

==================================

こちらを参考にさせていただきました。

横並びリストを中央寄せにする

floatを指定した際に親要素の高さが算出されない場合

floatを指定した際に親要素の高さが算出されない場合clearfixを使用したりしますが、
自分はなんとなくclearfixを使用しないで作成したいので、
そういう場合はfloat、display、overflowプロパティあたりで対応しています。

このプロパティを使用してもあっちのブラウザはOKだけどこっちのブラウザはダメだった・・・
ということが多々ありましたが、こちらにいろいろまとめてありました。
ありがとうございます!忘れないようにメモ。

==================================

こちらを参考にさせていただきました。

clearfixを使わないでやるには。

IE6での透過png

IE6で透過pngを使用すると透過した部分がグレーになってしまうので、IE6でも使用できるものを探してみたところ「DD_belatedPNG.js」が設置も簡単でよさそうでしたので早速使ってみました。

設置は、head内に

<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('img, .png_img,#png_img');
</script>
<![endif]-->

と記載するだけです。

2行目にDD_belatedPNG.jsへのパスを入れます。

3行目にpngを使用している要素名(img等)、id名(#png_img等)、クラス名(.png_img)を入れます。
複数指定する場合はコンマで区切ります。

==================================

こちらを参考にさせていただきました。

IE6用透過png対応策、DD_belatedPNGの使用法と注意点

 

IE6でのmin-height

使う機会がたびたびあるのでメモ。

IE6ではmin-heightがきかないため、少々ハックする必要があります。

.sample {
  min-height: 100px;
  height: auto !important;
  height: 100px;
}


IE6では、
  • min-heightは無視される
  • 同一ブロック内の!importantは無視される
  • ボックスサイズが内容物に合わせた大きさへ強制的に調整される

というバグがあるため、コンテンツが100px以下の時は100pxで、100px以上の時はコンテンツにあわせて高さを拡張します。

==================================

こちらを参考にさせていただきました。

IE6のmin-width、min-heightハックに関して

GBrowserIsCompatibleを使用した際のIEでの「オブジェクトを指定してください」エラー

Google Map APIを使用する際、GBrowserIsCompatible() の行でIE6と7で以下のエラーが発生しました。

ライン: 00
文字 : 00
エラー: オブジェクトを指定してください.
コード: 0
URL  : http://xxxxxxxx.com

このエラーの場合、Googleのスクリプトを読んでいるscriptタグに「charset="utf-8"」を追加することでIE6、7で正常に動作しました。

<script type="text/javascript" charset="utf-8" 
src="http://maps.google.com/maps?file=api&v=2&key="></script>

==================================

こちらを参考にさせていただきました。

GBrowserIsCompatible で 「オブジェクトを指定してください」エラー@IE

 

wordpressでページ毎にデザインを変える

wordpressでサイト構築をする際、どうしてもデザイン的に例外のページが発生してしまったので以下の方法でテンプレートを作成しました。

使用しているThemeディレクトリの中に、任意の名前.php のテンプレートを作成します。

テンプレートには

<?php
/*
Template Name: About
*/
?>

と入力します。「About」の部分は任意で、ページ投稿画面の属性に「テンプレート選択のドロップダウン」が追加され、選択が出来るようになります。
今回設定した「About」はドロップダウン部分に表示される名前です。

==================================

こちらを参考にさせていただきました。

WordPress ページ毎にデザインを変える


3キャリア共通のサイトを作成する場合のDOCTYPE宣言

携帯サイトを作成する場合、キャリア別に作成する場合はそれぞれDOCTYPE宣言が異なります。
しかし、3キャリア共通のサイトを作成する場合には以下のように記述します。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">

この場合、拡張子は.htmlで保存します。
しかし、docomoのみ拡張子が.xhtmlでないと動作しませんので、.htaccessに以下を記述しサーバへアップします。

AddType "application/xhtml+xml; charset=Shift_JIS" .html

==================================

こちらを参考にさせていただきました。

モバイル機器向けXHTML仕様

携帯サイトの作り方

 

auで画像に文字を回り込ませる場合

携帯サイトで画像を左に配置し、文章を右に回り込ませたい場合、以下のように記述するかと思います。

<img src="img.jpg" style="float:left;" align="left" />
<div style="color:#ff0000;">回り込む文章</div>

auではfloat指定ができないので、同時にalign="left"を指定します。

これでうまくいくかな?と思ったのですが、文章が回りこまず。。。
調べてみたところ、auでは回り込む文章にdivなどのブロック要素を使うと、画像のalignがクリアされてしまい回り込まないのだとか。

そのため、以下のように記述したところうまく文章が回りこみました。

<img src="img.jpg" style="float:left;" align="left" />
<span style="color:#ff0000;">回り込む文章</span>

これを知らずtableでレイアウトしていた頃がありました。。。

 

IEでjpgにfilter:alpha(opacity)を使用した場合のドット抜け

javascriptでスライドショーを使用するのに、xfade2.js というのを使用していたんですが、jpg画像でIEのみ、白くドット抜けのような現象が起こりました。

jpgだから透過になっているわけでもないし、元画像を確認しても何もないし。。。IEのみなのでjsのfilterかな?と調べていた所、どうやら特定色(#02050a)のみドット抜けするという記述を見つけました。

IE6/7でjpgにfilter:alpha(opacity)をあてたときに出るバグ?

これ、ほんとにそのとおりで、jpgの#02050a部分が透過jpgになってるんです!
IE6~8でこのバグを確認しました。

背景色に#02050aを指定することで、とりあえず回避しました。

解決法としては、

  1. #02050aをなくす
  2. pngにする

等があげられるそうです。

==================================

他にもこちらを参考にさせていただきました。

続・IEの「White Noise」バグ

LightBoxのバグ

高さの異なるカラムを揃えるスタイルシート

2カラムや3カラムで背景色などが入っている場合、
片方が短かったりすると背景色が途中で途切れたりしてしまいます。

今まではjsで揃えていたのですが、あるシステムへ組み込みしなければならず、jsを使うのが大変そうだったので調べたところ、それを解決できる、高さの異なるカラムを揃えるCSSがありました!



[CSS]高さの異なるカラムを揃えるスタイルシート



それぞれのカラムに、同じ数値で、プラス値のpadding-bottomと、マイナス値のmargin-bottomを指定し、そのカラムを囲っているdivへ「overflow: hidden;」を指定するだけ。

これでばっちりできました!
IE、Firefox、Safari、Opera等で動作確認できました!

iframeのcss

iframeを使用する際、frameborder="0",scrolling="no"としたい場合、

<iframe src="xxx.html" frameborder="0",scrolling="no"></iframe>

とします。

これをcssで実現したい場合、

<iframe src="xxx.html"></iframe>


iframe {
border: 0;
overflow: hidden;
}

でFirefoxではうまく表示されました。

でもIEではだめなんですね。
おもいっきりボーダーやスクロールバーが表示されてました。
cssで実現できないタグがあるなんて…と驚きました。

Mozilla Thunderbirdのアドオン

私は通常メールソフトにMozilla Thunderbirdを使用しているのですが、常々こんな機能があったらな…と思うことがありました。

それを解決してくれるアドオンがありましたのでメモ。

●Quicktext

Thunderbirdの定型文の入力をサポートしてくれるアドオンです。毎回「お世話になっております~」と同じ文章を書くことが多く、これが簡単に入れられたらな、と思っていたんです。

こちらを参考にさせていただきました。

マイコミジャーナル-Thunderbirdの定型文の入力をサポートしてくれるアドオン「Quicktext」

●Quote Colors

メール/ニュースメッセージ中のテキスト色と背景色を、引用レベルごとに設定します。
引用の装飾を無効にすることで、従来の ' > ' を使用した引用表示にすることができます。

いままで返信の引用が見づらくて見づらくて仕方なかったので、これで見やすくなりました!

==================================

こちらを参考にさせていただきました。

Quote Colors Japanese Translations

«PHPからパラメータをJSへ渡しPHPへ表示する