2007年05月23日(水曜日)

CSSがIEで反映されない [ HTML&CSS ]

普段はMac, WinともにFirefoxを使っているので気付かなかった。久しぶりにIEで自分のサイトを確認したら、CSSが上手く行っていないのでいささかショック。スタイルシートに手を入れて、マウスを文章の領域にもってきたときに、リンクに下線が表示されるように設定していたのだが。具体的には、次のようにしている。

 .content .entry-body:hover a { text-decoration: underline; }

これで Firefox では上手く行ったんだがなあ。IEが対応していない機能を使ってしまったのか、IEのバグなのか、対処する方法はあるのか。あるにしても、そんな元気ないし・・・。

投稿者 sukarabe : 09:09 | この記事の固定URI | コメント (0) | トラックバック (0)

2006年04月02日(日曜日)

マウスをかざすと・・・ [ HTML&CSS ]

kebaneco日記の「マウスオン覚えました!」に触発された、というか真似してみたくなっただけだが、画像の上にマウスをかざすと画像が切り替わるというものを試みてみた。適当な画像が無かったので、先日帰省したときのCafe Vinでの写真でも。入れ替わった写真では、きれいに陥没が出来ているのが分かる。こうじゃないと美味しいコーヒーは飲めないのだった・・・。

コーヒー注ぎ中および注ぎ終わり 2枚目のキャッシュ用
(マウスを画像の上にかざしてみて下さい。切り替われば成功ですが・・・。)

もしかしたら、最初は画像がキャッシュされてないため、表示が遅れるかもしれない。ちなみにどういうコードかと言うと・・・

<img src="http://static.flickr.com/47/121594330_7f46e85f95.jpg"
onMouseOver="this.src='http://static.flickr.com/48/121594349_b5dcd94ae7.jpg'"
onMouseOut="this.src='http://static.flickr.com/47/121594330_7f46e85f95.jpg'"
width="500" height="375" alt="コーヒー注ぎ中および注ぎ終わり" />

いろいろ調べたのだけど、JavaScriptがらみの解説がほとんどで、上のような単純なHTMLコードだけというのが案外と無い。そのあたりが不安なのだが。これで上手くいくのなら、JavaScriptは不要のはずだし。うーん、謎だ。

[追記] tsura氏のコメントを読んで、2枚目の写真をブラウザにキャッシュさせるために、height="0" width="0" として表示してみた。つまり実際には画面に表示させることなく読み込むという小技(?)、tsura氏によればセコ技(笑)を使ってみた。確かに、切り替えのタイムラグが無くなったようだ。

投稿者 sukarabe : 12:03 | この記事の固定URI | コメント (4) | トラックバック (2)

2005年08月25日(木曜日)

気分転換 [ HTML&CSS ]

気分転換というか逃避行動(?)なのか,サイトのデザインを変えてみた。といっても文書構造(HTML)の方には手を付けずに,スタイルシート(CSS)のみの変更。しばらくはこの色使いで行きます。

投稿者 sukarabe : 23:26 | この記事の固定URI | コメント (1) | トラックバック (0)

2005年01月16日(日曜日)

Flashのアナログ時計 [ HTML&CSS ]

Clocklink.comからフリーで公開されているアナログ時計(Macromedia Flashを利用するもの)をサイドバーに貼ってみた。最初,配布されているコードをそのまま貼り付けたのだが,念のためにValidatorでチェックすると,なんとInvalid XHTMLになってしまった。どうやらXHTMLでは embedタグというのが使ってはいけないらしい。時計と正しいXHTMLのどっちを取るか(笑)ということだが,幸い解決策があった。

今回お世話になったページは,ほかほかWeb研究所:マルチメディアファイルをXHTML文書に埋め込むというページ。embedタグを objectタグに変更すれば良いらしい。

元々のコードは次のようになっていた。

<embed src="http://www.clocklink.com/Clocks/0001-Orange.swf?TimeZone=JST"
width="200" height="200"
wmode="transparent"
type="application/x-shockwave-flash">

これを上記のページを参考にして次のように変更してみた。

<object height="200" width="200"
data="http://www.clocklink.com/Clocks/0001-Orange.swf?TimeZone=JST"
type="application/x-shockwave-flash">
<param name="src"
value="http://www.clocklink.com/Clocks/0001-Orange.swf?TimeZone=JST" />
<param name="wmode" value="transparent" />
</object>

これで一応XHTML1.0 TransitionalのValidatorはパスした。

投稿者 sukarabe : 19:10 | この記事の固定URI | コメント (0) | トラックバック (0)

2005年01月12日(水曜日)

サイトのデザインを変えてみた [ HTML&CSS ]

ささやかなレイアウト変更をしてみた。CSSで背景画像というものが使えるらしいので,それの実験を兼ねて。

body {
  background:url(logo.gif) top left no-repeat fixed;
  background-color: #fff8dc; /* cornsilk */
  margin-left: 33px;
}

このように body要素を指定すると,ロゴの画像が背景として写る。fixed という指定をすればページをスクロールしても背景画像は動かないようだ。

ついでに鉛筆アイコンの画像も imgタグを直接HTMLに書き込む方式から,CSSで制御する方式に変更した。この方がHTML自体もすっきりして気分が良い。

投稿者 sukarabe : 22:56 | この記事の固定URI | コメント (0) | トラックバック (0)

2005年01月10日(月曜日)

箇条書きをインライン表示で [ HTML&CSS ]

サイドバーのレイアウトを少しだけいじった。カテゴリー別と月別のアーカイブ表示が縦にだらだらと表示されるのがなんとなく嫌だったので,インライン表示(横にずらずらと表示される)にしてみた。といっても,HTMLコードを直にいじることはしたくない。HTML自体はごく普通のリスト(箇条書き)のままがよい。CSS Level2には,before属性,first-child属性など便利なものがそろっているので(これは以前,谷賢一さんから教わった),それを利用して次のようにしてみた。

.sidebar #categories  li {display: inline;}
.sidebar #categories  li:before { content: "/ ";}
.sidebar #categories  li:first-child:before { content:""; }
FirefoxでCSS2通りに表示されている画像

なんとか意図している通りに表示できたようだ(うちはFirefoxなので)。と思っていたら,なんとIE(Internet Explorer)ではダメだ・・・。なんでさ?そうかIEがCSS2に対応してないって,こういうことだったのか。IEユーザ多いからなあ・・・。

投稿者 sukarabe : 13:43 | この記事の固定URI | コメント (0) | トラックバック (0)