- マウスオーバーで画像を変更
- 外部リンクを別タブで開く
- ページトップへスクロールする
- Div全体をクリックできるようにする
- テーブルの偶数・奇数の行の色を変える
- リンク切れ画像を差し替える
- CSSハックを使わずブラウザーごとにCSSを変更
- 画像のプリローダー
- IE6以下ユーザーにメッセージを表示
- Divを消す
- フォーカスしているフォームのラベルにクラスをつける
- フォームにテキストを入れておき、フォーカスで消す(文字色も変更)
- 入力文字数をカウント
- ラジオボタンとチェックボックスを装飾する
- スライドパネル
- アコーディオン
- ツールチップ
- プリントダイアログを表示
- Twitter最新のTweetを表示
- 効果音を入れる
2011年1月27日木曜日
少しのコードで実装可能な20のCSS小技集
css classを2つ以上指定する書き方
サイトをコーディングしている時、classを2つ以上指定できる事を忘れがちです。
これ知っていると便利ですね。
ちなみに、idは1つしか指定できません。
設定方法は半角スペースで区切って指定します。
例えば
<p class="red blue">テキスト</p>
という風に。
同じ内容のCSSを指定していた場合、CSSの記述で後に指定した方が優先されます。
これ知っていると便利ですね。
ちなみに、idは1つしか指定できません。
設定方法は半角スペースで区切って指定します。
例えば
<p class="red blue">テキスト</p>
という風に。
同じ内容のCSSを指定していた場合、CSSの記述で後に指定した方が優先されます。
swf、z-indexをIEで効かす方法。
(1)htmlに書き込む方法
(2)jQweryで解決する方法
の2つメモ。
(1)htmlに書き込む方法
http://d.hatena.ne.jp/riricon/20100319#1268968793
flash表示のコードを書くところに、<param name="wmode" value="transparent" />を追加したら、ちゃんとz-indexどおりに表示してくれるようになった。
追加したのが、赤い部分
(2)jQweryで解決する方法
jQueryのプラグインbgiframeプラグインは簡単に実装できるらしい。
(2)jQweryで解決する方法
の2つメモ。
(1)htmlに書き込む方法
http://d.hatena.ne.jp/riricon/20100319#1268968793
flash表示のコードを書くところに、<param name="wmode" value="transparent" />を追加したら、ちゃんとz-indexどおりに表示してくれるようになった。
追加したのが、赤い部分
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="####" width="1000" height="350" scale="exactfit" align="middle" wmode="transparent">
<param name="allowScriptAccess" value="sameDomain" value="transparent" />
<param name="movie" value="####" wmode="transparent" />
<param name="wmode" value="transparent" />
<param name="quality" value="high" wmode="transparent" />
<param name="bgcolor" value="#ffffff" wmode="transparent" />
<embed src="####" quality="high" bgcolor="#ffffff" width="1000" height="350" scale="exactfit" name="####" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" />
</object>
(2)jQweryで解決する方法
jQueryのプラグインbgiframeプラグインは簡単に実装できるらしい。
2011年1月26日水曜日
swfのhtml読み込み:SWFObject
http://www.e-ssp.net/how_to_03.html
※IE6.7では下部にマージンがでる現象あり。
例)
<div id="headerFlash">
<script type="text/javascript" src="js/swfobject.js"></script>
<a href="www.adobe.com/go/getflashplayer"><img src="images/top/get_flash_player.jpg" alt="" /></a>
<script type="text/javascript">
var so = new SWFObject("index.swf", "topmovie", "900", "350", "9", "#000000");
so.write("headerFlash");
</script>
</div>
SWFObjectはMacromedia Flashのswfを埋め込むためのJavascriptです。
埋め込み方法も簡単です。検索エンジン対策(SEO対策)にもなり、HTML、XHTML 1.0に使用できます。
※ページはtext/htmlにてご利用ください。application/xhtml+xmlのページでは使えません。
1)http://blog.deconcept.com/swfobject/#download からDownload SWFObject 1.4をダウンロードしてください。
解凍してできたフォルダの中に「swfobject.js」があるかを確認しておきます。
ダウンロード ⇒ http://blog.deconcept.com/swfobject/#download
2)Webサーバーのwwwルート(トップページのindex.htmlを置いている階層)に任意のフォルダ(ここでは「js」)を作り、その中にswfobject.jsを入れます。
3)HTMLページにJavascriptを記述します。
このページを例にしたFlashムービーを埋め込む為の記述が以下です。
<div id="headerFlash">
<script type="text/javascript" src="js/swfobject.js"></script>
<img src="img/ssp_c.jpg" alt="SWFObjectを使ったFlashの埋め込み方法" />
<script type="text/javascript">
var so = new SWFObject("menu_n.swf", "ssp", "600", "120", "6", "#000000");
so.write("headerFlash");
</script>
</div>
以上が、このページで記述しているJavaScriptです。
4)それでは各コードを説明します:
<div id="content_swf">
<script type="text/javascript" src="js/swfobject.js"></script>
<img src="img/ssp_cf.jpg" alt="SWFObjectを使ったFlashの埋め込み方法" />
HTML内に、Flashムービーを入れる為の要素(ここでは任意のdivタグ)を用意します。
swfが実行されない時には、代替機能としてimg画像が表示されます(alt属性が検索エンジン対策にもなりますので、SEOに不利といわれるFlashの対策にもなります)。
var so = new SWFObject("menu_n.swf", "ssp", "600", "120", "6", "#000000");
新規にSWFObjectをつくり、必要なパラメーターを渡します。
"menu_n.swf" 埋め込むswfのファイル名をパスで指定します。
"ssp" オブジェクトやembedタグのIDとなります。任意の名前で構いません。
"600" Flashムービーの幅 (width)
"120" Flashムービーの高さ(height)
"6" 必要とするFlashPlayerのバージョン(version)。 「メジャーバージョン.マイナーバージョン.リビジョン」のようにドット区切りの数字で指定することができます。(例: "6.0.65")メジャーバージョンの数字だけを"6"のように指定することもできます。
"#000000" 背景色(background color)を指定できます(例:#FFFFFF)
so.write("content_swf");
(ユーザーの環境に条件を満たすバージョンがあった時に)ページにFlashコンテンツを表示させるスクリプトを出力するように命令します。これはHTML要素の中身を置き換えることで実行されます。
以上です。
SWFObjectは現行のの全てのブラウザに対応しています。
PC環境では、IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, Opera、MacではIE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+で動作し、以降のバージョンに対してもほぼ対応しています。
SWFObjectは上記のブラウザに対し、Flash playerのバージョン3以降の検出ができます。またユーザーに対し「activating」問題(※クリックしないといけません)に関する余計なクリックを求めることもありません。
※IE6.7では下部にマージンがでる現象あり。
例)
<div id="headerFlash">
<script type="text/javascript" src="js/swfobject.js"></script>
<a href="www.adobe.com/go/getflashplayer"><img src="images/top/get_flash_player.jpg" alt="" /></a>
<script type="text/javascript">
var so = new SWFObject("index.swf", "topmovie", "900", "350", "9", "#000000");
so.write("headerFlash");
</script>
</div>
SWFObjectはMacromedia Flashのswfを埋め込むためのJavascriptです。
埋め込み方法も簡単です。検索エンジン対策(SEO対策)にもなり、HTML、XHTML 1.0に使用できます。
※ページはtext/htmlにてご利用ください。application/xhtml+xmlのページでは使えません。
1)http://blog.deconcept.com/swfobject/#download からDownload SWFObject 1.4をダウンロードしてください。
解凍してできたフォルダの中に「swfobject.js」があるかを確認しておきます。
ダウンロード ⇒ http://blog.deconcept.com/swfobject/#download
2)Webサーバーのwwwルート(トップページのindex.htmlを置いている階層)に任意のフォルダ(ここでは「js」)を作り、その中にswfobject.jsを入れます。
3)HTMLページにJavascriptを記述します。
このページを例にしたFlashムービーを埋め込む為の記述が以下です。
<div id="headerFlash">
<script type="text/javascript" src="js/swfobject.js"></script>
<img src="img/ssp_c.jpg" alt="SWFObjectを使ったFlashの埋め込み方法" />
<script type="text/javascript">
var so = new SWFObject("menu_n.swf", "ssp", "600", "120", "6", "#000000");
so.write("headerFlash");
</script>
</div>
以上が、このページで記述しているJavaScriptです。
4)それでは各コードを説明します:
<div id="content_swf">
<script type="text/javascript" src="js/swfobject.js"></script>
<img src="img/ssp_cf.jpg" alt="SWFObjectを使ったFlashの埋め込み方法" />
HTML内に、Flashムービーを入れる為の要素(ここでは任意のdivタグ)を用意します。
swfが実行されない時には、代替機能としてimg画像が表示されます(alt属性が検索エンジン対策にもなりますので、SEOに不利といわれるFlashの対策にもなります)。
var so = new SWFObject("menu_n.swf", "ssp", "600", "120", "6", "#000000");
新規にSWFObjectをつくり、必要なパラメーターを渡します。
"menu_n.swf" 埋め込むswfのファイル名をパスで指定します。
"ssp" オブジェクトやembedタグのIDとなります。任意の名前で構いません。
"600" Flashムービーの幅 (width)
"120" Flashムービーの高さ(height)
"6" 必要とするFlashPlayerのバージョン(version)。 「メジャーバージョン.マイナーバージョン.リビジョン」のようにドット区切りの数字で指定することができます。(例: "6.0.65")メジャーバージョンの数字だけを"6"のように指定することもできます。
"#000000" 背景色(background color)を指定できます(例:#FFFFFF)
so.write("content_swf");
(ユーザーの環境に条件を満たすバージョンがあった時に)ページにFlashコンテンツを表示させるスクリプトを出力するように命令します。これはHTML要素の中身を置き換えることで実行されます。
以上です。
SWFObjectは現行のの全てのブラウザに対応しています。
PC環境では、IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, Opera、MacではIE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+で動作し、以降のバージョンに対してもほぼ対応しています。
SWFObjectは上記のブラウザに対し、Flash playerのバージョン3以降の検出ができます。またユーザーに対し「activating」問題(※クリックしないといけません)に関する余計なクリックを求めることもありません。
2011年1月24日月曜日
2011年1月21日金曜日
登録:
投稿 (Atom)