HTML

IEでのselect/optgroupのスタイル

IEではselect要素中のoptgroupのデフォルトのスタイルがイタリックになっているが、これをcssで変更しようとしてもできないようだ。 確認したところ、IE6,7,8すべてダメ。参考URL http://hyper-text.org/archives/2007/05/optgroup_css.shtml

jQueryプラグインのPhotoSlider

jQueryを使用したスライドショーPhotoSlider。元ページは以下。 http://opiefoto.com/articles/photoslider また、設置の説明などは以下が詳しい。 http://ascii.jp/elem/000/000/187/187279/ ただし、こちらの環境では、以下の修正が必要だったのでメモ。 j…

フォントサイズ変更(代替スタイルシート変更)のjQuery plugin

http://d.hatena.ne.jp/kazuokohchi/20091109 で書いたように、fontsizeを変更するにあたってalternate stylesheetを使って変更するstyleswitcher.jsがあるがこれを元にjQuery pluginにしてみたもの。例のIEの問題も回避している。 http://www.miyagino.net/…

IEでのalternate stylesheetによるスタイル変更の不具合

http://www.alistapart.com/articles/alternate/ にあるstyleswitcher.jsというjavascriptを元にスタイルの変更を行わせていた。このstyleswitcher.jsではalternate stylesheetで指定したスタイルへの変更を行い、しかもcookieに保存してくれるので、次回表…

jQueryでのマウスオーバーによる画像入れ替え

DreamWeaverなどで吐き出されるjavascriptを用いずに、jQueryだけでマウスオーバーによる画像表示の変更を行う。 サムネイル画像(XXXX_ex.jpg)にマウスを乗せると表示部分(id: exampleimage)に(XXXX_big.jpg)が表示される。 大きい画像も最初に読み込んでお…

CSSのfont-family

IE7 on Windows XPでUTF-8が文字コードのデフォルトのfont-familyがちょっと変だと気がついた。 font-familyを指定する場合は、 body { font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif; } …

htmlで指定しているスタイルシートを修正した場合にリロードせずに読み込ませる方法

CSSファイル(スタイルシート)だけを修正した場合、基本的にはブラウザのリロードを行わないと読み込んでくれない。それを回避する方法。 <link rel="stylesheet" type="text/css" media="screen,print" href="style.css?20090311" /> 同じ理由で、javascriptにも有効かも。</link>

htmlをUTF-8にした場合の注意(IEで画面真っ白)

昔作成したhtmlをUTF-8にした場合、IE6, IE7で画面に表示されず真っ白になる場合がある。どうもtitle要素の文字列がnonASCII(日本語など)の場合、場合によっては文字コードの判定が失敗してしまうようだ。 <html lang="ja"> <head> <title>日本語テスト</title> </head></html>

CSSのsmall-caps

http://www.jp.freebsd.org/www.FreeBSD.org/releases/7.0R/relnotes.html を見ていたら、気が付いたCSS表現。こんなのがあるなんて、恥ずかしながら今まで知らなかった。 <p style="font-variant: small-caps;">FreeBSD is a registered trademark of the FreeBSD Foundation.</p> アルファベットの小…

meta refresh, Locationヘッダを使用した場合のHTTP_REFERERについて

<meta http-equiv="Refresh" content="0; URL=http://www.miyagino.net/" /> や、 print <</meta>

MODxのインストール

MODx(0.9.6.1)をhttp://modxcms.com/forums/index.php/topic,4544.0.htmlを参照にインストールしてみた。 環境 Apache 2.0.61 PHP 4.4.7 (mod_php) Mysql 4.0.27 Apacheの設定変更 index.phpが先に読まれるように、.htaccessが有効になるようにする。 <Directory "/home/foobar/public_html/modx/"> Direc</directory>…

印刷も考慮したhtml/cssのデザイン

普通の人は、ブラウザの見た目を印刷にも求めてしまう。 わたしはスタイルなしでもいいかと思うときもあるのだが、そうはいかない。 IEの詳細設定オプション(Firefoxのページ設定もかな?)では、背景と色の印刷はOFFになっている?ので背景がなくてもそれな…

Strict文書でのtarget属性

.... <a href="http://d.hatena.ne.jp/kazuokohchi/" target="_blank">こうちかずお</a> のようにStrict指定でのtarget属性は認められていない。上記のように別ウィンドウにしたければ、 Transitionalにする。 http://www.ichiro.to/note/target で書いてあるようにjavascriptで行う。 があるが、S…

IEでのhrの高さ

IE6にてhrを使う場合、いくらCSSで hr { margin: 0px; padding: 0px; height: 1px; } としたところで、1行分の高さをとってしまう。ググってみたら、 http://support.microsoft.com/kb/883631/ja にある通り、バグのようで、divで囲んであげる必要があるらし…

xhtmlでのjavascriptの書き方

<html xmlns="http://www.w3.org/1999/xhtml"> <head> .... <meta http-equiv="Content-Script-Type" content="text/javascript" /> .... <script type="text/javascript"> // </meta></head></html>

IE6でのposition: absolute;時の問題

あるサイトで div#foo { position: relative; .... } div#foo img { position: absolute; .... } のようなことをやって画像を表示させていたのだが、このページで、ブラウザのフォントサイズを大きくしたら、IE6だけ表示されない現象に悩まされていた。そも…

divレイアウトカラムの高さを揃える

http://coliss.com/articles/build-websites/operation/css/558.html の記事から。揃えたいそれぞれのカラムに、 padding-bottom: 32768px; margin-bottom: -32768px; という2**(16-1)の値(signed shortの値)を指定するとのことだが、 それらを囲んでいるdiv…

IE6でul/liをCSSにてレイアウトしているときの余白

ul/liを使用して、cssで高さなんぞ指定しているのにもかかわらずIE6では下のほうに余白ができる。 http://b.hatena.ne.jp/entry/3572522 にある、行の高さを正しく算出しない:Internet Explorer (Windows) CSSバグリストに書いてあるとおり、 li { font-siz…

floatの親ボックスをoverflowで伸ばす

http://d.hatena.ne.jp/kazuokohchi/20071016 に書いたように、親に高さを反映させる方法があるが、こちらもそう。 http://redline.hippy.jp/lab/css/floatoverflow.php タイトルの通り、overflowで親ボックスを伸ばすんだそうだ。こちらのほうがすっきりし…

float直後に高さが親要素に反映されない件

<style type="text/css"> #left { float: left; } </style> .... <div id="wrap"> <div id="left"> <p>....</p> </div> <div id="content"> <p>....</p> </div> </div> みたいなことをしていると#wrapに#leftの高さが反映されない。これを解決するために、 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl…

IE6における、html中での改行とかスペースとか

<style type="text/css"> .... img { margin: 0px; padding: 0px; border-width: 0px; } div.mainline { margin: 0px; padding: 0px; width: 458px; height: 5px; } .... </style> .... <div class="mainline"> <img src="line.gif" alt="ライン" title="ライン" width="458" height="5" /> </div> .... ってしてるのに、IE6だと画像の上部があいてしま…

xhtml、css/スタイルシートでの中央寄せ(左右対称)について

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

firefoxで「証明されていない内容が含まれています」

firefox2.0で、httpsのあるページにアクセスすると、鍵に斜線がついた状態になり、それにマウスを乗っけると、 証明されていない内容が含まれています となるページがあることに気がついた。リロードすると直ったり(「....による証明」と表示)するので、なん…

Flashオブジェクトの書き方

http://validator.w3.org/ にてValidなFlashオブジェクトの書き方。 Netscape系のために、embedを記述していたが、それがinvalidになってしまう。invalidになった時に表示される文章中のFAQを読むと以下の方法が書いてあった。 <object type="application/x-shockwave-flash" data="foobar-flash.swf" width="XXX" height="YYY"> <param name="movie" value="foobar-flash.swf"> </object> IE6/IE7やFi…

IE6でのdl,ddでの改行した場合のずれ

<div id="foo"> <dl> <dt>その1</dt><dd>その1データ</dd> <dt>その2</dt><dd>その2データ<br>その3データ</dd> </dl> </div> のようなhtmlがあり、スタイルシートにて、dt,ddが水平になるように、 #foo { clear: both; } #foo dt { float: left; clear: left; } #foo dd { padding-left: 4em; } のようなことをしているとIE6のみ、…

IE7での印刷ずれ

<h3>テスト</h3> <div id="foo"> <dl> <dt>その1</dt><dd>その1データ</dd> <dt>その1</dt><dd>その1データ</dd> </dl> </div> のようなhtmlがあり、スタイルシートにて、dt,ddが水平になるように、 #foo { clear: both; } #foo dt { float: left; clear: left; } #foo dd { padding-left: 4em; } h3 { .... float: left; clear: both; }…

IEのイメージツールバーの非表示

IEにて、200px以上の画像を表示すると、イメージツールバーという4つのボタンが表示される。これをオフにするには、インターネットオプションの詳細設定でしかできないと思っていたが、html側でも制御が可能なようだ。以下をヘッダ中に記述する。 <meta http-equiv="Imagetoolbar" content="no"> 元記事は</meta>…

CGIとJavascript

CGIで出力したhtml中のJavascriptにて、window.onloadを行いたい場合。 .... <script type="text/javascript"> <!-- window.onload = function() { .... } // --> </script> </body> </html> と書く位置(終了body要素の前)に書いておく必要があるみたい。

safariでのcssデバッグ

CSSを編集していてsafariだけ上手くいかないってことがあるとき、 #foo { border-width: 1px; border-style: solid; border-color: #ff0000; } #bar { border-width: 1px; border-style: solid; border-color: #00ff00; } という感じであやしい部分にボーダ…

hrでFirefoxをだます

入れ子の領域がちゃんとFirefoxで認識されない場合の解決方法。 <div id="main"> <div id="left"> .... </div> <div id="right"> .... </div> </div> とある場合、mainの領域はleftとrightを包含したものを期待しているのだが、Firefoxではそうなってくれない。 <style type="text/css"> hr { clear: left; visibility: hidden; height: 0px; margin: …