floatとmargin-bottomのカンケイ

本日は超個人的CSSメモです。

今日、バイト先で作ったサイトの修正をしていたんですが、
どうも、IE6とIE7で、margin-bottomが適用されていないのを発見。
（SafariとかOperaでは全く確認しなかったので、IE特有のものかはナゾ。IE8だとOKだった。）

状況としては、

• floatしてるボックスに、margin-bottomを指定していた。
• floatしてるボックスの親ボックスに対して、position: relative;を指定した。
• floatしてるボックスの中に、position: absolute; bottom: 0; right: 0;　というスタイルを持ったボックスを入れた。

ら、絶対配置したボックスが、floatボックスの一番下のコンテンツにまるかぶりだった。

とりあえず、初めは何が原因なのか分からなくて発狂しました。
最終奥義CSSハックを使おうかとも思いましたが、
原因が分からないのは気持ち悪くて嫌だったので1時間くらい残業して作業をしてたら見事判明。

Firefoxではmargin-bottomが適用されていて、
そのマージンがきちんと空いて、その下に絶対配置ボックスが配置されていて良かったのですが、
IE6、7では全然マージンがきいてなかったんです。

というわけで、floatボックスのmargin-bottomを消し、
floatボックスの親にpadding-bottomを指定してみごと解決できました。

よかった。

原因はあってるかわからないけれど、
これからfloatボックスにmargin-bottomは指定しないことにします。

メモ終わり。

ウェブデザイン見本帳 実例で学ぶWebのためのレイアウト基礎

本日は、最近買ったWebデザインに関する書籍

「ウェブデザイン見本帳 実例で学ぶWebのためのレイアウト基礎 」について。

Webデザインのセオリーやノウハウがいっぱい書かれた本は数多くあります。
例えば黄金比であるとか、配色、視線誘導の方法とか、
デザイナーにとっては必要不可欠なことですが、
でも私は一からデザインについて学びたいわけではなくて。

コーダーとしては、
「こんなサイトをコーディングしたい、このサイトをどうやってコーディングしようか」を考える方が楽しい。
そのために、このようなデザインの見本がたくさん載っている本が欲しいなとずっと思っていたのです。

Web制作会社年鑑とかのポートフォリオ的書籍にはもちろん敵いませんが、
他のデザインノウハウ本に比べると、サイトデザインもまあ豊富だし、何より載っているサイト事例がいい！
デザインノウハウ本とかに載ってるデザイン例って、
デザイナーじゃない私が言うのもなんですが、あまりパッとしないので。
（たぶん、その本用に作ったデザインで、対クライアント向けのデザインではないからだと思います。）

こんな感じのサイトを作りたい、というときに、デザインをストックしておける。
ほんとに、「見本帳」という名前がふさわしいと。

ただ、デザインのいいサイトは多かったんだけど、ほとんどFlashサイトだなと。
コーダーとしてはちょっと複雑です。（じっくり見てから買えばよかったんですが（笑）

あとは例示サイトの使いまわしが多い、かな。
同じサイトの別のページが、本のいろんな場所で紹介されている。

あと、心なしか何度も同じようなことを言っているような気がするとか、
同じようなレイアウトがいろんなところで紹介されているような気がするとか。

なんか、ほめてるんだかけなしてるんだか分かりませんが、
貸し出しの依頼はいつでもどうぞ。

---

買ったら意外と最近の本で驚きました。
とりあえず、紙質がよくて、破れにくいです。
最近InDesignも勉強しようと思っているので、この本自体のレイアウトも参考にしたいなと思ってます。

匿名日記で感じたこと

最近、立て続けにけっこう衝撃的な記事を見た。
その記事元が、はてな匿名ダイアリーというものなのですが。

１．金出さないと普通レベルの人間も集まらない

２．プログラミング知らないHTMLコーダーがダメな理由

やっぱり、匿名だからこそ言えちゃうことがあるんですよ。
１．の冒頭にも
また批判覚悟で書く。増田だから許せ。
と書いてありますが、

批判されるって分かってるんですよ。
匿名日記だから許してくれって言うのは、現実世界で、名前のある世界でこの発現をすると、
人格を疑われるとか、誰にも同意してもらえないってわかってるんですよ。
自分を批判されるのは怖くて、それでも言いたくて、きっとこういう場所で吐いているんだろうと思う。

名無しさんの世界なら、自分自身を否定されることはないから。

トラックバックしてる人に関してもけっこう煽っている人が多いので、見るに耐えませんが、
匿名の世界って、こんなにも殺伐としているんですね。

---

あと、２．について感じたことも追記。

プログラミングがちょっとわかれば、人間が手作業でやる仕事をコンピュータに丸投げできる。
HTMLコーダーはそれをしない。（中略）
HTMLは手打ちに限るね、なんて、うどん屋かっつーの。

前にも同じような記事を書いたけれど、
たとえばCSSプロパティの指定とかは、全然機械化すればいいわけですよ。
別に、コンピュータが生成したCSSがちょっと汚いくらいで、SEO上問題はないですし。

ただ、文章のマークアップっていうのは、機械じゃできないんですよ。
テキストをマークアップする、つまり意味をつけるという行為は、機械ではできないんです。

別にちゃんとマークアップされてなくなって、Webサイトはきちんと表示されます。
でも、「見た目がきちんとしてればそれでよい」って言う資格があるのは、
私はクライアントだけだと思っていて、制作者側、技術者側にそんなことを言う資格はないと思っています。

「クライアントに分からないし、適当でいいよね」なんて思ってる人間はマークアップをする資格なんてない。
と、思います。
（なんて言うのが、若気の至りというか、まだ社会に出ていない甘ちゃんの考えかもしれませんが。）

私の場合は、正直コードを手で書くのが楽しいんですよ。苦にならないんです。
生産効率がどうなんだといわれれば、なんとも答えようがないです。正直。
少なくとも私は手で打ったほうが早いです。でもそれは機械の扱い方を知らないからだ、という指摘もごもっともです。
私は、「HTMLは手打ちがいいよね」。じゃなくて、手打ちがしたいんです。
手打ちうどんが作りたいんですよ。

手をかけた分、成長できる。自分に返ってくるんです。
だから手打ち。

---

HTMLコーダーはなぜかプライドだけはいっちょまえ。
俺の書いたコードを勝手に変えるな、とか、俺のCSSに手を出すな、て具合。

これ読んでて思ったのが、
あれ、デザイナーと一緒じゃん。ってこと。

私も、デザイナーさんのデザインをコーディングするにあたって勝手に独自の改変を加え、
怒らせてしまったり、何度も細かい修正を言われたりしました。

別にそれで、「デザイナーってプライドだけはいっちょまえだよな！」とはもちろん思いませんし、
自分自身、深く反省しています。

つまり言いたいのは、これって、別にコーダーに限った話じゃないんですよ。ということ。

ただ、コーダーの場合、「俺の書いたコードを勝手に変えるな」という考え方はまずいなと。

いつも同じ人間がサイトを更新するとは限りませんし、
誰が見ても分かりやすいコード、
せめて、引継ぎをする人には分かりやすいコードを書く必要があるでしょうから、
あんまり自分のスタイルに固執はしたくないですね。

情報デザインという面では、マークアップだってデザインと一緒。
ある程度セオリーはあるけど、正解はない。

おこがましいかもしれないけれど、
この記事を読んで私はそう感じました。

直感的なアイコン販売サイト IconDock

楽しげなアイコン販売サイトがあったのでメモ。

Icon Dock

アイコンがかわいいのはさることながら、
注目すべきはインターフェース。

たとえば、
http://icondock.com/icons/higloss
このページではたくさんのアイコンが売られていますが、
右上にある＋マークをクリックすることで買い物かごに追加することもできますし、
アイコンをドラッグして左側の「買い物かご」バーにドロップしても、アイコンが追加されるという。

気持ちのよい販売インターフェースです。

ちなみに、この効果はJavaScriptで実装されています。
さらに言うと、JavaScriptOFF環境ではお買い物できません。

やっぱりこれはアイコン販売サイトという、ある程度購入層が限られているからできることであって、
楽天とか、Yahoo!Shoppingとかのサイトではきっと採用できないだろうと思います。

ただ、このインタフェースは魅力的だし、何度も言いますがアイコンがかわいい。
サイトデザインもすっきりしていて素敵。
これがWordPressで作られているというんだから、なおすばらしいです。

ついにIE6が20％割れ

マイコミジャーナルより、ブラウザシェアに関する記事。
IE6シェア10%台へ、Firefox全体とシェア逆転
http://journal.mycom.co.jp/news/2009/02/03/057/index.html

ということで、IE6はついに20％以下のシェアになってしまったわけなのですね。
よく考えれば、今販売されているWindowsVistaのデフォルトブラウザがIE7なんだから、
IE7が増えるのは自明のことだとはわかっていましたが、
ついにこのときがやってきたのですね。

と思って、つい先日IE8をインストールしました。

この20％というのを聞いて、少なくなったなぁ、と感じると同時に、
それでもまだFirefoxと同じレベルなのか、という複雑な気持ちもあります。

このデータを収集しているのは海外なので、
このデータが日本でも通用するものなのか、世界平均なのかは分かりませんでしたが、
おおよその目安にはなると思います。

IEのレンダリングがすさまじい、ということは業界では知られていることですが、
それでも一般の人がIEを普段使っていけるということは、
それだけしっかりコーディングされているサイトが多いということでもあり。

みんなWindows→みんなIE→IEで見えるサイトを作る→IEが使われ続ける
という流れですね。

正直に言うと、ブラウザチェックの瞬間というのは本当に怖くて、
ちゃんと見えていないと、いまだに本気で絶望します。私は。

今年はブラウザを敵視せず、仲良く暮らしていきたいです。