いろんなサイトの css を見ていたら "_width: 350px;" って、アンダースコアがついてる。
今更ながらメモ。
プロパティの前にアンダースコアをつけるとIE6では誤って読み込まれてしまうと言うハック。
#sample {
width: 300px;
_width: 350px; ←IE6用
}
IE6だけにcssを適用させたいときに便利です。
==アイコン素材PR==
喫茶店,看板 スケボー,スケートボード ナンバープレート ポップコーン,屋台 サンドイッチ,サンドウィッチ 写真機,カメラ 手紙 板チョコ,チョコレート 3Dメガネ,眼鏡 テレビ,ブラウン管
チェックボックスとテキストをキレイに揃える方法をメモ。
参考にしたサイト
http://phpspot.org/blog/archives/2009/03/css_79.html
http://www.xinotes.org/notes/topic/437/
まずは xhtml の記述
<form> <div style="width:350px"> <input type="checkbox" id="cb" /><label for="cb">らべる1</label><br/> <input type="checkbox" id="cb2" /> <label for="cb2">サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル </label><br/> <input type="checkbox" id="cb3" /> <label for="cb3">サンプルサンプルサンプルサンプルサンプルサンプル サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</label><br/> </div> </form>
次に css の記述
input {
display: block;
float: left;
clear: left;
height: 12px;
padding: 0;
margin: 0;
}
label {
display: block;
clear: none;
width: 300px;
font-size: 12px;
font-family: sans-serif;
margin-left: 20px;
}
ポイントは clear の使い方ですね。 勉強になります。
==アイコン素材PR==
注目！,スタンプ,ハンコ,はんこ,印鑑 新商品,スタンプ,ハンコ,はんこ,印鑑 新企画！,スタンプ,ハンコ,はんこ,印鑑 新感覚！,スタンプ,ハンコ,はんこ,印鑑 新食感！,スタンプ,ハンコ,はんこ,印鑑 ポイント２倍！,スタンプ,ハンコ,はんこ,印鑑 ポイント還元,スタンプ,ハンコ,はんこ,印鑑 結果発表！,スタンプ,ハンコ,はんこ,印鑑 新着情報！,スタンプ,ハンコ,はんこ,印鑑 リニューアル中,スタンプ,ハンコ,はんこ,印鑑
a タグの href に javascript:void(0) ってよくみかけるがこれは
<a href="javascript:void(0);">
「void」とは空とか無とかいう意味で、「#」って記述するのと同じでリンクを無効にすること。
とある案件で、input タグや img タグではなく、a タグにCSSを適用させたボタンで javascript のエラーチェックをし、submit させる場合があったのでメモ。
◆HTML
<a href="javascript:void(0)" onclick="CheckCheckBox(); return false;" class="btn fLeft">次へ進む</a>
◆JS
function CheckCheckBox() {
//エラーチェック処理
if (〜) {
//あああああああああああ
} else {
document.form.submit(); //サブミット
}
}
肝は関数呼出し後の return false; で、クロスブラウザ(WEBブラウザの仕様の違いなど)による挙動を合わせる場合に、onclick に関しても、処理が無効となるよう return false; する必要がある。
==PR==
汽車 工具,金槌,ハンマー 絨毯,マット リボン,ラッピング,クリスマス,オーナメント 足ひれ,フィン 色見本,カラーパネル 宝石 ちょうちょ,蝶 めがね,サングラス 柊,植物,クリスマス クーラーボックス 踏み台,椅子 ドア 箱,ギフト,ギフトBOX,プレゼント 剣,刀 ハウス,家 ハット パソコン,PC 手裏剣 めがね
これまでajaxでLightboxを使用していましたが、画像の表示のみでした。
弊社サイトの携帯FLASHゲームの実績紹介ページ用にLightbox風にswfを表示できないかと検索してみました。
世の中便利ですね。
ありました。
「shadowbox.js」
最新バージョンは3.0。
「shadowbox.js」はPrototype、jQueryなど、複数のJavaScriptのライブラリに対応した、swfや動画などを拡大表示できるスクリプトです。
使い方は至って簡単。
バージョン3.0になって更に簡単に使えるようになった感じです。
shadowbox.js と shadowbox.css を参照して
Aタグに rel=”shadowbox” を追記するだけ。
携帯用画面もshadowboxで見せようとhtmlの表示を試みるがうまくいかない。
よくオプションの解説を見てみると
players: [“html”]
ではなく
players: [“iframe”]
でした！。うっかりうっかり。
◆併用できるJavaScriptのライブラリ
◆対応ブラウザ
◆対応メディア
◆オプション変更
etc…
詳しくは「shadowbox.js」のサイトで。
==PR==
印鑑,STOP 地図,世界地図 ペン ハウス,家,レンガ 工具,クレーン ビリヤード ボウリング,ピン ゴルフ,ゴルフクラブ アメリカンフットボール,ヘルメット 爆弾,時限爆弾 ジクソーパズル,ピース ゴルフカート 絞首台,死刑台 男子用便器,トイレ 黒板,ボード カジノダイス テニスコート 音符 リボン,ラッピング 椅子,チェアー
フロート方向と同じ側にマージンを適用すると、マージンが2倍になる。
このバグは、フロートの行の先頭のフロートだけに影響するんだって。
例：
float: right;
margin-right: 10px;
対象 : IE6
可能性 : 可能性がかなり高い
メモメモ。