World of granshe.

Webデザインに関する情報収集中に見つけた面白いサイトです。

JavaScriptのスムーズスクロールと、
透過PNG画像を組み合わせて作られた、海外デザイナーのポートフォリオサイトです。

IE6以下では透過PNGが上手く表示されないので、サイトのデザインがかなり崩れます。
また、こちらで用いられているtinyscrolling.jsは、IE6互換モードでは上手く動かないそうです。

さっそくですが、
みなさんがWebサイトを制作するとき、「CSSを書くタイミング」はいつですか？

私が普段サイトを作るときは、
１．テキストをHTMLでマークアップする
２．DIVでテキストを囲む
３．CSSを使って装飾・レイアウト
の順番です。

しかし、
2007年出版のとある書籍でCSSに関する記事を読んでいたところ、
そこではDIVを先に書き、CSSでレイアウトを確定させてから、
テキストを流し込んでいく、というような記述がされていました。

実際に研究室の同僚４名に聞いてみると、うち３名が
１．まず、DIVとCSSを使いレイアウトを確定
２．テキストを流し込みながら、CSSを指定
の順番で制作する、と答えました。

私は、ただの無機質なテキストデータが、CSSによってきれいなデータになる、という
画面の変遷を見るのがとても好きなので、HTMLから先に書くのかもしれません。
また、デザインにあまり興味がない、という理由もあるのではと思います。

どちらが良い、悪い、という問題ではなく、
自分のやり方だけがすべてではないんだ、ということを知りました。

みなさんはどちらでしょうか？

大学のパソコンを自宅環境で使用しようと思い立ったとき、
インストールしているアドオンをすっかり忘れてしまって困ったのでメモ。

題して、Firefoxアドオンランキング。

１．Web developer

便利。CSSのソースも、JavaScriptのソースもみれるし、画像の配置や
はたまた段組情報までもあらわにしてしまうオススメツール。
日本語版もどこかにあるそうなんですが、ちょっと分からないのです・・・。
私が使っているのは英語版です。↓
https://addons.mozilla.org/ja/firefox/addon/60

２．HTML Validator

HTMLが正しい文法で書かれているかチェックしてくれる。
普通のサイトだとほとんどが×マークだからとっても気になります。
あくまでも目安としてお使いください。
文法があってればなにをしてもいい！ってわけではないので。
https://addons.mozilla.org/ja/firefox/addon/249

３．IE Tab

Web制作をするとき、Firefoxで表示チェックして完成だ！と喜んだのもつかの間、
IEでページをみると大惨事、ということを何度も繰り返してきましたが、
このアドオンがあればFirefoxでも、IEの挙動を確かめられます。
https://addons.mozilla.org/ja/firefox/addon/1419

４．JSView

インストールすると、ブラウザの一番下の部分（ステータスバー、っていうんですかね）
に、SSJSとか言う表記が出て、サイトで使われているCSSと、JavaScriptを表示することが出来ます。
https://addons.mozilla.org/ja/firefox/addon/2076

５．緑のGoo

ブラウザが緑色のナチュラルな感じに変化。右上の検索窓で検索すると、
Gooの木というポイントが溜まります。溜まったポイントに応じてGooが環境保全団体に寄付をしてくれるんだそう。
正直この背景色は使いづらいが、エコに貢献したいので使用。
ちなみに、Goo検索はGoogleと同じアルゴリズムなので、基本的に検索結果は同じです。
https://addons.mozilla.org/ja/firefox/addon/6154

次点.IE NetRenderer

アドオンサーフィンしていて気になった。
みるところによると、IE６～８まで、すべてのレンダリングを確認できるとか！？
ちょっとインストールして試してみたいと思います。
https://addons.mozilla.org/ja/firefox/addon/6455

Web制作を始めて６年以上、
CSSをさわり始めて５年は経つでしょうか。

floatを使うたびに、最後に以下のおまじないを入れなければならず、
空のdivを使わなければならない自己嫌悪と共に生きてきました。
これ↓
 <div style="clear: both"></div>

先日、研究室で2005年には発売されたであろうWeb雑誌を見ていると、
clearfixなるコードが記述されていました。

そのときは、「なんかおもしろそうだ」程度で全く気に留めていなかったんですが。
友人に話を振ってみると、現在ではもう定番になっているものだそうで…。
はい、ごめんなさい、私は今の今までずっと <div style="clear: both"></div>で過ごしてきました。

というわけで、clearfixについてのメモ。

情報元：norisfactory様

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
 * html .clearfix {height: 1%;}
 .clearfix {display: block;}
/* End hide from IE-mac */


これがclearfixなんですね！
今までずっと<div style="clear: both"></div>を使ってきた私って何なんでしょう！
仕様だと思って諦めずに、調べてみないと解らないこともあるんですね。

メモおわり。

このブログは３段組で、メインコンテンツの幅が可変のレイアウトになっています。
下記のサイトを参考にさせていただいて、このブログで用いているレイアウトの解説をしたいと思います。

参考サイト：CSS-EBLOG様

2008/6/8 追記
IE6標準モードでは表示がうまくいかない可能性があります。
詳細はこちらで。