ネットスケープ（NN6）についていろいろその①

今回のお仕事は、NN6も対応というもので、いろいろ手こずった。
というわけで覚書です。

①フロートした場合、overflow:hiddenでclearできない。
下のような感じでコーディングした場合。
<div class="container">あああああああああああああああああああ
<div class="left">
<p>左フロート</p>
<p>あ</p>
<p>あ</p>
<p>あ</p>
</div>
<div class="right">
<p>右フロート</p>
<p>あ</p>
<p>あ</p>
</div>
</div>

.container {
width: 400px;
border: 2px solid #000000;
}
.left{
width: 200px;
background: #FF6666;
float: left;
}
.right {
width: 100px;
float: right;
background: #CCFFCC;
}
.floatclear {
clear: both;
}

まずはおさらいで、各ブラウザの表示。

子ブロックは浮遊化されるので、containerボックスは子ボックスの高さを認識しない。IEは認識してしまう。

containerボックスは子ボックスの高さを認識する方法として、containerボックスoverflow:hiddenを指定してみる。
ffは高さを認識するが、NNだとなぜか子ボックスが消える。


clearfixを使うと、ffもNNも子ボックスの高さを認識する。

Dreamweaver CS3が色々と面白い

会社でCS3を導入したので、DreamweaverCS3を色々いじくってみた。
Adobe spryが、まるでフォームの挿入操作のように気軽に使えることに感動。

こんなタブがあって、ポンポン挿入できます。
こちらに、どんな機能があるかの詳細が紹介されてます。


Spryタブパネルを試してみた。
パネルで操作可能なのは（たぶん）テキストの挿入のみなので、CSSをいじって、タブ部分を画像に変更。


SpryでXMLデータを表示することもできるそうなんで、後ほど試してみよう。


＜オマケ＞個人的に、AdobeとMacromediaの合併効果を感じたところ。

ひそやかに「PS」マーク。


illustratorの女神の眼を思い出した・・・。

ようやく、夏になりました。

ブログのデザインを夏バージョンに変更！



作ろう作ろうと思いつつ、気がつけば梅雨明けから20日も経ってしまった。
まあ、残暑厳しく暫く続くだろうと仮定して、よしとしよう！

Javascriptな6月

社長面談からまもなく1ヶ月。JavascriptとPHPを同時に勉強し始めると混乱しそうな気がしたため、今月はずっとJavascriptの勉強をしていた。

先輩に薦められて、WebクリエイティブのためのDOM Scriptingという本を購入したのだけれども、読んでビックリ。
xhtmlでJavascriptなどのスクリプトを動かすときは、DOMというWeb標準のインターフェースを使って、外部からアクセスするというのだ。
そうだよなあ、せっかくxhtml+CSSにしたのに、xhtmlにJavascriptを直接書いちゃったら意味無いなあ、といまさら気づいた。
買った本は、DOMとはどんなものでどういうふうに使っていくかということをわかりやすく教えてくれていて、私のような初心者が概要を掴むに、ちょうど良かった！

・・・とはいえ、掴んだのは概要だけで、実際どう書いていけば良いかはまったくわからない。
最近良く耳にする、jquery.jsやphototype.jsなどのライブラリの実用サンプルが掲載されていたため、ワクワクしながら取り組みはじめたのだけれども・・・まったくわからない。
コードを書いていくうちに慣れていくさと思って、辞書を見ながら1週間ほど頑張ってみたけれど、まったく身についた気がしない。

ここでようやく気づいた。この本を読むのは早すぎた。
Web標準かどうかは一旦置いといて、まずはJavascriptのリファレンス本を参考に例文をたくさん書きまくるべきなのだ。
そうして慣れたらこの本で、DOM+JavascriptでのWeb標準化、というステップに進んでいくべきなのだ。

というわけで現在は、5年前のJavascriptリファレンス本を辞書代わりに、下記サイトに掲載されているサンプルを真似している。
管理人様いわく、「Web標準化にともなってHTML, CSS, JavaScriptのコードを分離した各種サンプル」とのことで、DOMを利用したサンプルになっている。有難いなあと思う。

■JavaScriptテクニック(「OPEN SPACE」サイト内のコンテンツ)

単純なスペルミスでいちいちつまづき、牛歩のような進み具合なのだけれども（＞＜）
一通り終わるころには明るい明日が待っていると信じて、頑張るぞー。

コーディングコンテスト最優秀賞

遅くなってしまったけれども、コーディングコンテストの最優秀賞のデータが公開されたので、CSSデータをなぞってみた。

最優秀賞☆コーディングコンテストVol.1

とても丁寧で安定感のあって、作成者の方の人柄が感じられるような、素敵なコーディングだった。
利用者だけではなく、Web管理者に対しても、とても優しいのだ。
私がもし、このWebサイトの更新を頼まれたとしたら、どんな構造になっているのか容易にしることができてすごく喜ぶだろうし、この綺麗な状態を乱してなるものかと、気合が入るだろうと思う。

head要素とか隠しリンクとか、アクセシビリティ向上のためのテクニックは、今後是非使っていきたいと思う。

ああ、いつかこんな風なCSSを書ける様になりたいな～。