2011年1月27日木曜日

少しのコードで実装可能な20のCSS小技集




 

  1. マウスオーバーで画像を変更
  2. 外部リンクを別タブで開く
  3. ページトップへスクロールする
  4. Div全体をクリックできるようにする
  5. テーブルの偶数・奇数の行の色を変える
  6. リンク切れ画像を差し替える
  7. CSSハックを使わずブラウザーごとにCSSを変更
  8. 画像のプリローダー
  9. IE6以下ユーザーにメッセージを表示
  10. Divを消す
  11. フォーカスしているフォームのラベルにクラスをつける
  12. フォームにテキストを入れておき、フォーカスで消す(文字色も変更)
  13. 入力文字数をカウント
  14. ラジオボタンとチェックボックスを装飾する
  15. スライドパネル
  16. アコーディオン
  17. ツールチップ
  18. プリントダイアログを表示
  19. Twitter最新のTweetを表示
  20. 効果音を入れる

css classを2つ以上指定する書き方

サイトをコーディングしている時、classを2つ以上指定できる事を忘れがちです。
これ知っていると便利ですね。
ちなみに、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どおりに表示してくれるようになった。

追加したのが、赤い部分
<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」問題(※クリックしないといけません)に関する余計なクリックを求めることもありません。