<ul id="navi">にするか、<div id="navi"><ul>にするか

今まで、グローバルナビゲーションや、サブナビゲーションなど、
画像置換を使ってリンクを制作する際、

<div id="navi">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="intro.html">はじめに</a></li>
</ul>
</div>

と、

<ul id="navi">
<li><a href="index.html">HOME</a></li>
<li><a href="intro.html">はじめに</a></li>
</ul>

のどちらにするか迷い、どっちつかずで使用を続けていたのですが、
本日やっと区別がつきました。

きっかけはclearfixでした。
最近はめっきり「最後の選択」として使われているclearfixですが、
これをulタグに使おうとしたとき、全く反応してくれませんでした。

原因は、「ulタグにfloatが適用されていた」ことでした。
フロートしているボックスには、clearfixが効かないことに、本日初めて気付きました。

よって、
ulボックスをフロートさせる場合には、divタグで囲んでclearfixをつけること。
ulボックスをフロートさせない場合は、divタグがなくてもいい。
ということです。

長年の葛藤が解消されました。

CSSフレームワーク

MDNの最新号に、CSSフレームワークという記事が書いてあった。

私自身、最近Webサイトを作る機会が多く、
HTMLとCSSのテンプレートを作ろうと思っていたのですが、それそのままといった感じですね。

フレームワークというとすごくプログラミングな感じがします。
CSSテンプレート、という言い方のほうが砕けた感じで好きなのですが、
語弊があるといけないのでCSSフレームワークという言葉を使いたいと思います。

このCSSフレームワークの役割としては、レイアウト別にCSSがいくつか用意してあって、
そのCSSをHTMLに組み込み、idを指定するだけでサイトの大まかな段組が完成する、
という仕組みです。

自分でCSSが書ける身としては、ブラウザ同士の互換性チェックが
悩みの種であると同時に楽しみでもあるのですが、
楽しんでる暇がないときも大いにあります。

そんなときにこれを利用して作ったら楽なのではないかと思います。

自分でもテンプレート作りをしてみたいと思います。

ヘッダとフッタがある２カラムのサイトでheightを100%にする

コンテンツの量が少ないサイトでも、メインカラムをブラウザウィンドウ最大に表示する方法
（技術的に言うと、ボックスのheightを常に100%表示にする方法）
は色々と紹介されていたのですが、
私のPCではなかなかうまくいかなかったので、色々と考えました。

結果、以下のような方法にたどり着いたのでご紹介。

対応ブラウザ

• IE5、6、7
• Firefox
• Opera
• Safari
• Netscape(9.0)
• Google Chrome

様々なブラウザで検証してみたのですが、
IE8のベータ版だけうまくいきませんでした。（あきらめました。）

IEは互換モード・標準モード問わずきちんと表示されます。

実装例はこちら。

それでは詳しい解説は以下でどうぞ。

ソースを見ずにコードを表示

色々とWebのデザインについて考えていたとき、
ソースコードを見なくても、サイトで使われているタグが表示されたら面白いんじゃないか、
という考えに至ったので、作ってみました。

適用するとこんな感じ。

このCSSをみる

-----------------------------------------------------------
自社広告

卒業研究アンケート
をしております。

ぜひご協力いただだければと思います。
宜しくお願い致します。

CSSのブラウザ別対応状況とかプロパティ一覧

CSSは、現在もまだブラウザによって対応の差異があります。
CSSをずっと使ってはきましたが、
私はすべてのCSSプロパティを把握しているわけではないし、
ブラウザによるプロパティの対応状況すらあまり知らない状態です。

これじゃあ、コーダーとしてやっていきたいと願う人間としてやばいんじゃなかろうか？

と思って、色々と検索をかけてみますと、
見やすくCSSプロパティについて紹介してくださっているサイトを発見いたしました。

CSSプロパティと対応レベルを一覧にしているサイト
CSS Properties Index（英語）

CSSのブラウザごとの対応状況を掲載しているサイト
SitePoint CSS Reference（英語）

両方とも英語のサイトですが、
プロパティの対応状況は良くわかると思います。
特にCSS Properties Indexのほうはかなり見やすい解説図になっていますので、ぜひぜひご覧下さい。

それぞれのプロパティが具体的にどのような動作をするのか、
というところまでは自分で解釈するにはいたっていませんが、
これからちょっとずつ学んでいきたいと思います。