Windows の IE6 に CSS で float を指定した際、その float 指定した要素の親要素に指定された左右の border が消えるバグがあるようです。

私が上記のバグに気が付いたのは ul 要素内の li 要素を並列させる為に、li 要素に float:left; と指定しボタンを作成した時に気が付きました。
以下、その時のサンプルソースです。（※ボタンは３つを並列させているとお考えください。）

ul {
	width : 99%;/* IE6 の為に指定 */
	text-align : center;
	list-style-position : inside;
	border-left : solid 1px #ccc;
	overflow : auto;
}

ul li {
	float : left;
	width : 33%;
	height : 30px;
	line-height : 30px;
	list-style-type : none;
	border-top : solid 1px #ccc;
	border-bottom : solid 1px #ccc;
	border-right : solid 1px #ccc;
}

上のソースの赤い部分のように、親要素に width を指定すると border が表示されます。

ちなみに IE7 では親要素に width を指定しなくても border は表示されていました。

●結論
IE6 の親は子供が浮かれると甘くなりがち。

あなたはご存知でしょうか？

私はつい先日迄知りませんでした。

アップルの人気ソフト iTunes にライブラリを複数作成し、切り替え（換え※同義語）つつ使用できるショートカットが用意されていたことを。

フリーソフトの類いを使わずにライブラリを複数作成できることを。

方法はとても簡単で Mac なら option キーを押しながら、Windows なら shift キーを押しながら iTunes を起動するだけです。

音素材なども iTunes で管理している方や、とんでもない量の音楽を iTunes で管理している方にお薦めのショートカットでした。

そう言えば去年の暮れあたりから Yahoo!JAPAN の Web サイトのデザインが一新されました。

私などは『新しくなって少し使いやすくなったなぁ』ぐらいの感想しか湧かずに、青っぱなを膝下くらいまで垂らし過ごしてしまっていたのですが・・・

人気ブログ「ホームページを作る人のネタ帳」さんの記事「3カラム化。理由はYahooを利用しているユーザーの特殊な行動を見て」を読み、今更ですが、インターネットユーザーに与えている影響力を考えさせられました。

確かに、私の回りでもブラウザを開いた時の「スタートページ」に Yahoo を設定している人は多く、私自身もオークションにハマっていた時などは「スタートページ」に設定していました。

その多くの人達の「スタートページ」である Yahoo!JAPAN の Web サイトのデザインが変わったと言うことは、現実社会で例えるところの・・・・・・・・ほら、そうそう・・・・・・・

分かりますか？

上手い事を書こうとして失敗した好例です。

それはともかく、「ホームページを作る人のネタ帳」さんの記事によると、インターネットユーザー、少なくとも Yahoo! ユーザーに、現時点で意識改革をもたらしているようです。

私はこの記事を読み、もっともっと色々な事を洞察しつつ制作に役立てて行かなければ、いつまでたっても青っぱなが膝上にいくことは無いだろうと思った次第です。

ちなみに現在（2008.01.28）の Yahoo!JAPAN の Web サイトの width は 950px でした。

また、現在もっとも多いモニターの解像度は 1024x768 と言われています。当ブログや私の制作してきたサイトでもそれを実感していますので、多くの Web サイトでも参考に値する数値だと思います。

サイドバーなどの心配も解消されつつあるとするなら

800x600 の解像度をターゲットに制作するのが無難とされてきた時代は、マウスイヤーと言われる現代の子年（ねずみどし）に終わりを迎えつつあるのかも知れません・・・

分かりますか？

上手い事を書こうとして失敗したおっさんが、必死に穴埋めしようとしているのが。

それにしても、私も最近はじめて３カラムのテンプレートを制作したのですが、何も考えていないくせに実にタイムリーだな〜と関心してしまいました。

今日はページ内のリンクをスムーズにスクロールさせる JavaScript のご紹介です。

多くの Web ページの下の方に「ページのトップに戻る」なんてリンクがあります。通常はクリックするとページの先頭に「ドン！」と一瞬にして戻りますが、今回の JavaScript を使用することで「シュルルルルル〜♪」とページの先頭に戻ると言うアクションに視覚効果を与えられます。

ユーザビリティの向上にも繋がりますし、簡単に導入できるので試してみてはいかがでしょうか？

それでは早速どのような代物か JavaScript のサンプルページで実際の動きをご確認ください。

いかがでしたでしょうか？

この Smooth scrolling を導入してみよう！と言う方は続きをどうぞ。

続きを読む ≫

当ブログで配布中のテンプレート「h007-3middle」をご使用中の方から、下記のご質問を頂きましたのでカスタマイズ方法を解説させて頂きます。

記事内を５００までサイドバーを１８０までに変更したいのですが、どのようにすれば良いのでしょうか？

カスタマイズには HTML の編集を行えるエディタを用意されると、後述するカスタマイズ方法を実践されやすいと思います。ソースの行番号が分かり「EUC-JP」にエンコーディングされたソースコードを扱えるエディタならなんでも OK です。

※当ブログで配布中のデザインテンプレートがカスタマイズの対象となっています。
※テンプレートをカスタマイズする前にバックアップ（複製）しておくと安心です。

●２００８年２月４日修正
他のサイズへ変更されたい方にも今回の記事が参考になるよう図解を使った解説に修正しました。

世間一般人様、お待たせしました。多少は他のサイズへカスタマイズする際に分かりやすくなったと思いますのでご覧ください＾＾

続きを読む ≫