CSS
・ホムペのデザインをプチ修正 2014年03月23日
・元ダンスアカデミーのサイト 2014年03月21日
・スタイルシートで細かい化学式を作成 2012年08月19日
・2カラム左固定右リキッド 2012年06月29日
・2カラム左固定右リキッド 2012年06月28日
・3カラムサイド固定中央可変ができた 2012年05月11日
・このブログをリキッドタイプに 2012年04月25日
・見出しの文字部分に下線 2012年01月26日
・ナビゲーションバーをプチ改変 2011年05月27日
・テスト 2011年01月24日
・画像置換時のリンク点線の処理 2009年11月01日
・clearfix 2009年10月01日
・ロールオーバー 2009年08月28日
・IE6でチェックをしたら 2009年08月06日
・Enough is enough! No more IE6! 2009年08月06日
・画像の表示をOFFにしたら 2009年08月05日
・ああ、勘違い 2009年03月27日
・ホームページの修正 2009年03月22日
・IE8で微妙にやばいことが 2009年03月21日
・IE7での表示が微妙に 2008年10月12日
・IEで隙間が出る問題 2008年09月29日
・clearfix 2008年09月29日
・画像のロールオーバー 2008年05月11日
・IE-7の問題を解決 2008年05月11日
・IE-7でひと苦労 2008年05月10日
・clearfix 2008年05月10日
・このブログのデザインを変更 2008年05月09日
・親boxの高さがでない 2008年05月07日
・CSSで天地左右を中央揃えに 2008年04月20日
・動画をobjectで 2007年10月30日
・元ダンスアカデミーのサイト 2014年03月21日
・スタイルシートで細かい化学式を作成 2012年08月19日
・2カラム左固定右リキッド 2012年06月29日
・2カラム左固定右リキッド 2012年06月28日
・3カラムサイド固定中央可変ができた 2012年05月11日
・このブログをリキッドタイプに 2012年04月25日
・見出しの文字部分に下線 2012年01月26日
・ナビゲーションバーをプチ改変 2011年05月27日
・テスト 2011年01月24日
・画像置換時のリンク点線の処理 2009年11月01日
・clearfix 2009年10月01日
・ロールオーバー 2009年08月28日
・IE6でチェックをしたら 2009年08月06日
・Enough is enough! No more IE6! 2009年08月06日
・画像の表示をOFFにしたら 2009年08月05日
・ああ、勘違い 2009年03月27日
・ホームページの修正 2009年03月22日
・IE8で微妙にやばいことが 2009年03月21日
・IE7での表示が微妙に 2008年10月12日
・IEで隙間が出る問題 2008年09月29日
・clearfix 2008年09月29日
・画像のロールオーバー 2008年05月11日
・IE-7の問題を解決 2008年05月11日
・IE-7でひと苦労 2008年05月10日
・clearfix 2008年05月10日
・このブログのデザインを変更 2008年05月09日
・親boxの高さがでない 2008年05月07日
・CSSで天地左右を中央揃えに 2008年04月20日
・動画をobjectで 2007年10月30日
2014年03月23日
ホムペのデザインをプチ修正
昨日のことですが、
久しぶりにHTMLとCSSを使ってデザインを修正しました。
動機は元大分ダンスアカデミーのトップページの画像がモバイルで崩れることに気づいたこと。
PCで見るぶんには全く支障がなかったがモバイルでは大変なことに。
それはとりあえず修正できたようだけど、ついでにというわけで。
ドクター江部の著作本の紹介欄に件数を増やした。
当然スクロールバーが表示されるわけだが、、、
すぐ下にある更新履歴にバーがあるからそれを流用。
サイズの数値を修正してうまくいきました。
ついでにプロフの100の質問の答えを修正しました。
HTMLはともかくCSSをいじるのは楽しいです。
久しぶりにHTMLとCSSを使ってデザインを修正しました。
動機は元大分ダンスアカデミーのトップページの画像がモバイルで崩れることに気づいたこと。
PCで見るぶんには全く支障がなかったがモバイルでは大変なことに。
それはとりあえず修正できたようだけど、ついでにというわけで。
ドクター江部の著作本の紹介欄に件数を増やした。
当然スクロールバーが表示されるわけだが、、、
すぐ下にある更新履歴にバーがあるからそれを流用。
サイズの数値を修正してうまくいきました。
ついでにプロフの100の質問の答えを修正しました。
HTMLはともかくCSSをいじるのは楽しいです。
2014年03月21日
元ダンスアカデミーのサイト
元ダンスアカデミーのサイトはリキッドレイアウトにしているが、
今日初めてスマホやiPadでトップページを見たら画像がゆがんでいる。
自分はPCしか検証できないので確かではないがとりあえず修正した。
HTMLファイルのimgはwidthとheightをそれぞれ100%にしていたが、それを削除。
CSSファイルで#bsoita img { width: 100%; height: auto;}に変更した。
#dance imgも同様。
これでPCの画面は正常に表示されている。
W3C VALIDATOR でチェックしたらOKだった。
W3C CSS でチェックしたらケアレスミスが2箇所あったので修正した。
まりさんにメールして明日チェックしてもらおう。
今日初めてスマホやiPadでトップページを見たら画像がゆがんでいる。
自分はPCしか検証できないので確かではないがとりあえず修正した。
HTMLファイルのimgはwidthとheightをそれぞれ100%にしていたが、それを削除。
CSSファイルで#bsoita img { width: 100%; height: auto;}に変更した。
#dance imgも同様。
これでPCの画面は正常に表示されている。
W3C VALIDATOR でチェックしたらOKだった。
W3C CSS でチェックしたらケアレスミスが2箇所あったので修正した。
まりさんにメールして明日チェックしてもらおう。
2012年08月19日
スタイルシートで細かい化学式を作成
今朝のがっちりマンデーで化学式を取り上げていた。
化学式をWebで表示するにはどうしたらいいのだろうと思い、
ググってみたらありました。
http://www.w-frontier.com/stylesheet/subsup.html
化学式をWebで表示するにはどうしたらいいのだろうと思い、
ググってみたらありました。
http://www.w-frontier.com/stylesheet/subsup.html
2012年06月29日
2カラム左固定右リキッド
HTML
<div id="container">
<div id="header">
<p>ヘッダー</p>
</div>
<div id="main">
<div id="menu">
<p>左</p>
</div>
<div id="kiji">
<p>右</p>
</div>
</div>
<div id="footer">
<p>フッター</p>
</div>
</div>
css
* {
margin: 0;
padding: 0;
}
#container {
margin: 0;
width: 100%;
}
#header {
width: 100%;
height: 150px;
}
#main {
width: 100%;
}
#menu {
width: 200px;
height: 300px;
float: left;
}
#kiji {
height: 300px;
}
#footer {
clear: both;
width: 100%;
height: 150px;
}
右側にくるkijiのwidth指定をしないのがポイント。
でもこのブログで幅指定を削除したら――、カラム落ちしました (;^_^A
2012年06月28日
2カラム左固定右リキッド
ダンスアカデミーのサイトのスライドショーの右側に更新履歴を置いた。
スライドショーは固定サイズだが更新履歴はリキッドにしたい。
要するに2カラムで左固定右リキッドスタイルだ。
これはこのブログもそうだけどすべてCSSで指定している。
問題は右のリキッドの部分の幅指定なのだ。
左はピクセルで指定して右は100%にしたけどカラム落ちする。
最後に分かったけどリキッド部分は幅指定をしなければいいみたいだ。
更新履歴の高さの部分だが、上に一文字分の空白を作る場合、
paddingを指定すると高さが下に伸びてしまう。
paddingはpxで指定してheightをその分減らすほうが確実だった。
スライドショーは固定サイズだが更新履歴はリキッドにしたい。
要するに2カラムで左固定右リキッドスタイルだ。
これはこのブログもそうだけどすべてCSSで指定している。
問題は右のリキッドの部分の幅指定なのだ。
左はピクセルで指定して右は100%にしたけどカラム落ちする。
最後に分かったけどリキッド部分は幅指定をしなければいいみたいだ。
更新履歴の高さの部分だが、上に一文字分の空白を作る場合、
paddingを指定すると高さが下に伸びてしまう。
paddingはpxで指定してheightをその分減らすほうが確実だった。
2012年05月11日
3カラムサイド固定中央可変ができた
ホムペのダンスのところのCSSがなかなか思うようにいかなかったが、やっと完成した。
予め雛形を作ってうまくいくのを確かめてからそこにコンテンツを流しこむ。
それでうまくいくはずなのだが――、思わぬカラム落ちが発生。
ここにメモで残しておきます。
<div id="content">
<div id="maincontent">
<p>メインコンテンツは横幅がリキッドです。</p></div></div>
<div id="side1"><p>サイド1は横幅が固定です。</p></div>
<div id="sidebar2"><p>サイド2は横幅が固定です。</p></div>
#content {
float: left;
width: 100%;
}
#maincontent {
margin: 0 240px 0 260px;
}
#side1 {
float: left;
width: 260px;
margin-left: -100%;
}
#side2 {
float: right;
width: 240px;
margin-left: -240px;
}
予め雛形を作ってうまくいくのを確かめてからそこにコンテンツを流しこむ。
それでうまくいくはずなのだが――、思わぬカラム落ちが発生。
ここにメモで残しておきます。
<div id="content">
<div id="maincontent">
<p>メインコンテンツは横幅がリキッドです。</p></div></div>
<div id="side1"><p>サイド1は横幅が固定です。</p></div>
<div id="sidebar2"><p>サイド2は横幅が固定です。</p></div>
#content {
float: left;
width: 100%;
}
#maincontent {
margin: 0 240px 0 260px;
}
#side1 {
float: left;
width: 260px;
margin-left: -100%;
}
#side2 {
float: right;
width: 240px;
margin-left: -240px;
}
2012年04月25日
このブログをリキッドタイプに
このブログをリキッドタイプにに変更した。
CSSで横幅をパーセント表示に変えただけだけど、まあまあうまくいった。
今まではなんとなく横幅を720ピクセルにこだわっていたが、
今はそういう時代でもないからね。
ブラウザを画面いっぱいに開いたらブログもそれに連れて拡大するわけです。
技術的にはまだ不満もあるがとりあえずは良しとしましょう。
p.s.
「ライブドアブログ」「リキッドタイプ」で検索したらこの記事がヒット。
こんな方法でのチェンジは良くないので参考にしないでください。
理想は、左カラムを固定、右記事はそのままでうまくいくはずなのだが、
はじめの記事の下に来る広告が何やらおかしい。
そして2番目の記事は左カラムの下に飛ばされる。
なぜそうなるかがわからない。
分かる人がいたら教えてください。
CSSで横幅をパーセント表示に変えただけだけど、まあまあうまくいった。
今まではなんとなく横幅を720ピクセルにこだわっていたが、
今はそういう時代でもないからね。
ブラウザを画面いっぱいに開いたらブログもそれに連れて拡大するわけです。
技術的にはまだ不満もあるがとりあえずは良しとしましょう。
p.s.
「ライブドアブログ」「リキッドタイプ」で検索したらこの記事がヒット。
こんな方法でのチェンジは良くないので参考にしないでください。
理想は、左カラムを固定、右記事はそのままでうまくいくはずなのだが、
はじめの記事の下に来る広告が何やらおかしい。
そして2番目の記事は左カラムの下に飛ばされる。
なぜそうなるかがわからない。
分かる人がいたら教えてください。
2012年01月26日
2011年05月27日
ナビゲーションバーをプチ改変
大分ダンスアカデミーのホムペのトップページにあるナビゲーションバーですが、
以前、可変タイプに変更したときに少し変えてそのままにしていました。
今日、ふと思いついて改良版に変更しました。
今までは「display:inline」で対応していたのを
aタグを「display:block」に変えて個々の枠を表示するように戻した。
可変ナビバーなので外枠とリストの枠が完全には一致しないけど、
何とか見苦しくない程度にはできた。
ブラウザの幅を読み取りそこから計算して個々の幅を決められればいいのだが、
そんな方法は知らないし、検索しても見つからない。
JavaScriptで何かできるのではと思うけど――。
最近はブラウザが進歩したからJavaScriptを停止させることは少ないと思うけどね。
たまには頭を働かせないととやってみた。
以前、可変タイプに変更したときに少し変えてそのままにしていました。
今日、ふと思いついて改良版に変更しました。
今までは「display:inline」で対応していたのを
aタグを「display:block」に変えて個々の枠を表示するように戻した。
可変ナビバーなので外枠とリストの枠が完全には一致しないけど、
何とか見苦しくない程度にはできた。
ブラウザの幅を読み取りそこから計算して個々の幅を決められればいいのだが、
そんな方法は知らないし、検索しても見つからない。
JavaScriptで何かできるのではと思うけど――。
最近はブラウザが進歩したからJavaScriptを停止させることは少ないと思うけどね。
たまには頭を働かせないととやってみた。
2011年01月24日
2009年11月01日
2009年10月01日
2009年08月28日
ロールオーバー
<p id="ban1"><a href="#"><img src="画像" width="88" height="31" alt="banner" /></a></p>
p#ban1 {
width: 88px;
height: 31px;
background-image: url(背景画像pass);
background-repeat: no-repeat;
}
p#ban1 a {
display: block;
width: 88px;
height: 31px;
}
p a:hover {
background-color: transparent;
}
p a:hover img {
visibility: hidden;
}
2009年08月06日
Enough is enough! No more IE6!
IT media News
埋め込みコードは以下の通り(14日に修正されたものです)
<!--[if lt IE 7]>
<div style='border: 1px solid #000000; background: #FFFFFF; text-align: center; clear: both; height: 108px; position: relative;'>
<div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'>
<a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
<div style='width: 923px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
<div style='width: 108px; float: left;'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/warning_ie6.jpg' alt='Warning!'/></div>
<div style='width: 275px; float: left; font-family: Arial, sans-serif;'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>あなたは旧式のブラウザをご利用中です</div>
<div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>このウェブサイトを快適に閲覧なさる場合には、最新のブラウザにアップグレードしてください。</div>
</div>
<div style='width: 108px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>
<div style='width: 108px; float: left;'><a href='http://www.microsoft.com/windows/internet-explorer/default.aspx' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/ie.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>
<div style='width: 108px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>
<div style='width: 108px; float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/google_chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>
<div style='float: left;'><a href='http://www.opera.com/' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/opera.jpg' style='border: none;' alt='Get Opera'/></a></div>
</div>
</div><![endif]-->
「IE6はもういらない」――Web企業が撲滅キャンペーン
Internet Explorer(IE)6を撲滅せよ――Web企業が反IE6キャンペーン「IE6 No More」を立ち上げた。
このキャンペーンを立ち上げたのは、WebサイトホスティングサービスのWeebly。同社は撲滅運動に乗り出した理由について、同ブラウザへの対応がWeb企業にとって負担になっているためと説明している。
IE6は2001年にリリースされ、Microsoftから後継バージョンのIE7、IE8がリリースされているにもかかわらず、今なおかなりのシェアを占めている。NetApplicationsの調査によると、7月のIE6のシェアは27%に上った。
このためWeb企業はIE6に対応せざるを得ないが、「IE6対応は難しく、いら立たしい作業で、過度に時間を取られる。さらにIE6は最近のWeb標準をサポートしていないため、開発者ができることに制約がある」状況に苦労しているという。
IE6 No Moreは、IE6ユーザーにブラウザのアップグレードを呼び掛けることで、できるだけ早急にIE6ユーザーをなくすことを目指している。そのための手段として、Webサイトに埋め込むHTMLコードを配布している。このコードをサイトに埋め込むと、IE6ユーザーがサイトにアクセスしたときに、ブラウザのアップグレードを促すメッセージが表示される。
埋め込みコードは以下の通り(14日に修正されたものです)
<!--[if lt IE 7]>
<div style='border: 1px solid #000000; background: #FFFFFF; text-align: center; clear: both; height: 108px; position: relative;'>
<div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'>
<a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
<div style='width: 923px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
<div style='width: 108px; float: left;'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/warning_ie6.jpg' alt='Warning!'/></div>
<div style='width: 275px; float: left; font-family: Arial, sans-serif;'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>あなたは旧式のブラウザをご利用中です</div>
<div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>このウェブサイトを快適に閲覧なさる場合には、最新のブラウザにアップグレードしてください。</div>
</div>
<div style='width: 108px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>
<div style='width: 108px; float: left;'><a href='http://www.microsoft.com/windows/internet-explorer/default.aspx' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/ie.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>
<div style='width: 108px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>
<div style='width: 108px; float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/google_chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>
<div style='float: left;'><a href='http://www.opera.com/' target='_blank'><img src='http://www.bizzymicbizness.com/ie6nomore/files/theme/opera.jpg' style='border: none;' alt='Get Opera'/></a></div>
</div>
</div><![endif]-->
2009年08月05日
画像の表示をOFFにしたら
ちょっと前まではインターネットは電話線だった。
だからデータのやりとりに時間がかかった。
Webのページはできるだけテキスト表示を心がけた。
観る方はブラウザで画像表示をOFFにすることもあった。
今はブロードバンドが普及し、
光ケーブルの時代だからデータの大きさは気にしなくなった。
とはいえ画像をOFFにすることもある。
CSSでテキストを飛ばして背景画像を表示することが流行った。
これだと画像をOFFにしたら何も表示されない。
それにリンクが貼ってあったら悲惨なことになる。
だからテキスト飛ばしはしないで画像は表示する。
画像のaltとリンクのtitleで画像OFF時のテキストの代替とする。
オンマウス(a:hover)時は上の画像を非表示にすると、
背景画像が表示される。
<p class="back"><a href="#" title="hogehoge"><img
src="hoge.png" width="88" height="31" alt="hogehoge" /></a></p>
p.back {
background-image: url(./hoge2.png);
background-repeat: no-repeat;
}
p.back a {
display: block;
width: 88px;
height: 31px;
}
p.back a:hover {
background-color: transparent;
}
p.back a:hover img {
visibility: hidden;
}
だからデータのやりとりに時間がかかった。
Webのページはできるだけテキスト表示を心がけた。
観る方はブラウザで画像表示をOFFにすることもあった。
今はブロードバンドが普及し、
光ケーブルの時代だからデータの大きさは気にしなくなった。
とはいえ画像をOFFにすることもある。
CSSでテキストを飛ばして背景画像を表示することが流行った。
これだと画像をOFFにしたら何も表示されない。
それにリンクが貼ってあったら悲惨なことになる。
だからテキスト飛ばしはしないで画像は表示する。
画像のaltとリンクのtitleで画像OFF時のテキストの代替とする。
オンマウス(a:hover)時は上の画像を非表示にすると、
背景画像が表示される。
<p class="back"><a href="#" title="hogehoge"><img
src="hoge.png" width="88" height="31" alt="hogehoge" /></a></p>
p.back {
background-image: url(./hoge2.png);
background-repeat: no-repeat;
}
p.back a {
display: block;
width: 88px;
height: 31px;
}
p.back a:hover {
background-color: transparent;
}
p.back a:hover img {
visibility: hidden;
}
2009年03月27日
2009年03月22日
2009年03月21日
2008年10月12日
IE7での表示が微妙に
IE7で自分が管理しているサイトを巡回してみた。
微妙に表示がおかしいところがある。
別窓のリンクが開かない。
で、こんなサイトを見つけた。
http://journal.mycom.co.jp/special/2007/ie7/
微妙に表示がおかしいところがある。
別窓のリンクが開かない。
で、こんなサイトを見つけた。
http://journal.mycom.co.jp/special/2007/ie7/
2008年09月29日
2008年05月11日
画像のロールオーバー
テキスト飛ばしをしない画像のロールオーバーの方法。
<li id="gazo"><a href="#" title=""><img src="./gazo01.jpg" width="300" height="150" alt="" /></a></li>
li#gazo {
width: 300px;
background-image: url(./gazo02.jpg);
background-repeat: no-repeat;
}
li#gazo a {
display: block;
width: 300px;
height: 150px;
}
li#gazo a:hover {
background-color: transparent;
}
li#gazo a:hover img {
visibility: hidden;
}
<li id="gazo"><a href="#" title=""><img src="./gazo01.jpg" width="300" height="150" alt="" /></a></li>
li#gazo {
width: 300px;
background-image: url(./gazo02.jpg);
background-repeat: no-repeat;
}
li#gazo a {
display: block;
width: 300px;
height: 150px;
}
li#gazo a:hover {
background-color: transparent;
}
li#gazo a:hover img {
visibility: hidden;
}
2008年05月10日
clearfix
今まで使っていたclearfix
/*----- clearfix ----- */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}
/*----- /clearfix ----- */
新しいIE7対策のclearfix
/*----- clearfix ----- */
.clearfix {
zoom: 1; /* for IE5.5 - IE7 */
}
.clearfix:after { /* for modern browser */
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.clearfix {
/*display: inline-block;*//* IE7対策 */
}
/*----- /clearfix ----- */
/*----- clearfix ----- */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}
/*----- /clearfix ----- */
新しいIE7対策のclearfix
/*----- clearfix ----- */
.clearfix {
zoom: 1; /* for IE5.5 - IE7 */
}
.clearfix:after { /* for modern browser */
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.clearfix {
/*display: inline-block;*//* IE7対策 */
}
/*----- /clearfix ----- */
2008年05月09日
2008年05月07日
2008年04月20日
2007年10月30日
動画をobjectで
<h1></h1>
<p class="memo1">動画が始まらない場合はスタートボタンを押してください</p>
<p class="memo2">動画が表示されない場合は下記のリンクをクリックしてください</p>
<p><object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256">
<param name="src" value="URL" />
<param name="autostart" value="false" />
<param name="controller" value="true" />
<a href="URL" target="NewWindow">動画</a>
</object></p>
p.memo1 {
visibility: hidden;
}
/* ----- ob_win_ie6.css ----- */
p.memo1 {
visibility: visible;
}
p.memo2 {
display: none;
}