remoon.net

友人、亮さんのサイトを作った。
内容は実際見てもらったほうが早いので、是非訪問してみよう!
写真やイラストのサイトで、個人的にオススメなのは「月とうさぎ」。
他のもコンセプトやメッセージを持っている作品ばかりで質が高い。
ちなみにサイトデザインも亮さんなので、僕は裏方。

というわけで、コーディング周りのつれづれ。

HTMLを打ち始めて早9年になろうかという今日この頃・・。
(と言っても本格的にはここ1~2年だけど)

ようやくだいぶマシなHTMLが打てるになってきた。
とりあえず、W3CのXHTML1.0には概ねValid。
構造的にも極力無駄を省いたつもり。

その代わりCSSはレイアウト的に
position: absolute;
が多用されているので、位置指定がしつこいような感じで、
かなり大きなファイルになってしまったけど、
どうなのかなぁ・・

主なSEOとして、テキストの上に画像を置くようなことをやってる。
参考:CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない

スパムとみなされそうだが、全く無関係の文字列ではなく、
画像の文字をそのままテキストにしているのだから、
常識的に許されるだろうという希望的観測。

視覚効果では、lightbox2をベースに使ってみた。
写真やイラストのサイトなので、これは便利。
ページの特定の場所に埋め込むタイプのは直接スクリプト書いた。

あと、トップとかにある、
「画像に白ワク付けて三角コーナー付ける効果」もJavascriptで実装した。

とするだけでこの効果を得られる。

HTML=文書の意味づけ、という性質を考えると
HTML構造が乱れるような大掛かりな装飾はJavascriptでやるほうが良い気がする。
(汎用的にする必要がなければそのまま画像、でもいいけど)

Javascriptが切ってある、もしくは使えない環境もあるだろうが、
Javascriptが動かないような環境では、おそらく
装飾より内容が重要なんだろうから気にする必要はないと思う。

三角部分は画像。三角でなくピンなどでも面白いだろう。
実際このサイトでは、三角のほか、テープ仕様のもある。

FirefoxやIE7は画像でなくても三角が作れるのだが・・
border-color: transparent;
がIE6で使えないという痛恨の仕様(バグとも言う)により断念(;ω;
参考:border-colorにtransparentを指定すると前景色で表示される

あとDiaryはWordPress
何かしたいとき、PHPをちょいと書けるのが大きなメリット。

なお表示確認したブラウザは
Windows(XP):IE6、IE7、Opera9.2、Firefox1.5、Firefox2、Netscape8.1
Macintosh(OS X):Safari2、Firefox2、Camino
など。
OS9とかはダメでしょう(ごめん!)

という感じの作り。
製作期間は約3週間。
こういうのはパーツ切りも結構大変だからなぁ・・亮さん、お疲れ様です。

仕事では凝った作りのサイトは少ないので、結構面白かった。
左右のインデックスのような一見複雑なものも
意外とValidにできるなぁ、と思ったり。

# もっと凄いのはこちらから・・
# css Zen Garden