ヴォルフロッシュ

Blog

Published on

RSS

ヴォルフロッシュ v4 -デザイン

[サイトロゴ]

私としては、今回のリニューアルの一番の目玉は、全ページをXHTML1.0 StrictからHTML5に書き換えたことです。残念ながら外から見れば何も変わらないのですが、同時にストリクタンとしては気合いが入るところ。それにPHPと違ってソースを見れば見られるのでそれなりにやりがいがあります(いや、普通は見ねぇよ、ってのは置いておいて

ってことで、今日はおおいにHTML/CSS、ついでにちょっとJavaScriptのコーディングの話をします。


HTML5

まず、全部書き換えました。大枠のレイアウト部分だけではなく中のコンテンツもHTML5仕様になっています。全コンテンツ見直してfigureが妥当なところはfigureに、日付はtime、注釈はsmallなど。

アーキテクチャにも載せたのですが、大枠のマークアップ図を作ったんで再掲します。

ヴォルフロッシュv4のマークアップ

別にね、反divではないつもりなのですが、気付いたら上記のbody直下にあるdiv以外、現在当サイトには一切のdivが使われていません。正確に言えばjavascriptで生成されるようなパーツでは使っているのですが、本文中には一切出てきません。まぁ、セマンティックなマークアップを心がけたら実際そうなるわな。いやまぁ別に使ったからダメなもんでもないし、使うべきところでは使えばいいんだけど結果論として。まさかこんな日が来るとは思いませんでした。全部のパーツにそれに適した意味が与えられるって興奮します(HTML好きっぽい思考だなぁ

あともう1つ自分のこのコーディングで我ながらキモイと思うのが、テンプレート部分では1つもid/classも使っていないところです。全部文脈セレクタで対応しています。もちろん本文中は使ってるけどね。[role=hoge]とか+>をうまいこと使えば、特にCSSのためにはidを振らなくても対応できます。

おかげで、HTML5の元々の簡潔さも相まってものすごくHTMLソースがシンプルになりました。

そもそも私は、HTMLソースが美しく表示されることに情熱をかけるド変態なので(ためしにこのページのソースでも見て頂ければ言っている意味がなんとなくわかると思います)そういうところばっかり凝ってたり。タブの出力回数合わせるためにテンプレエンジンでif文使ったりしてますからね。いや、あれは機械が読むものであって人間が読むものではないことはわかっているのですが...。

こんなに綺麗なソースのBlogもなかなかないのでは、と思っております。

デザインとCSS

一方、コード大改造に反して見た目はほとんど変わってないです。少しだけ画像パーツを書き直したりして、スッキリするようにはしました。でもおそらく気付かない程度だと思います。

時点のTOPページのスクリーンショット (60%)

そもそも見た目やレイアウトについてはかなり気に入ってるので変える必要がないのである。5年以上これなんで、慣れたのもあるしもともと良くできているのだ、自分で言うのもなんだが。今となってはちょっと古くさいデザインな気もしますが、愛着もあるしね。なので見た目は本当にブラッシュアップするくらい。けれども実は中のCSSソースはかなり書き換えています。見た目は同じだけどコードが違う。以前はCSSハックで無理矢理やったりラッパ—噛ませていたようなのを抜かして簡潔にしています。とくに以前はまだ本格的には使えなかったcontentプロパティは大活躍してます。

CSS3が十分使えるようになったらこれまた新しいこと色々できて楽しいんだろうけど、今はまだ難しいしね。border-radius辺りは丸くならなかったところで大して困らないのでじゃんじゃん使ってますが。CSS3導入に関しては、導入そのものよりUAの実装具合を調べてそれぞれの回避・対応策を考える方がめんどかったりします。

CSSのみで描画したボタン
送信ボタン

ただ、ためしにフォームまわりとtooltipなんかではかなりガンガンCSS3のプロパティを使ってみています。現状ではまだ-moz--webkit-を併用しないといけないのでかなり長ったらしいコードになってしまいますが、画像を用意することなくCSSだけでここまでできるようになったのは楽しいです。ボタンの数だけ画像を用意する必要がないのも良い。

ボタンHTML
<button>post</button>
ボタン用CSS
button {
    background-color:#777; color:#eee; border:1px solid #555;
    -webkit-box-shadow:inset 0 1px 0 rgba(100%,100%,100%,0.4), 1px 2px 2px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(0,0,0,0.15);
       -moz-box-shadow:inset 0 1px 0 rgba(100%,100%,100%,0.4), 1px 2px 2px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(0,0,0,0.15);
            box-shadow:inset 0 1px 0 rgba(100%,100%,100%,0.4), 1px 2px 2px rgba(0,0,0,0.25), inset 0 -1px 0 rgba(0,0,0,0.15);
    height:20px; padding:2px 0.7em 1px; border-radius:11px; -moz-border-radius:11px;
    font-size:11px; font-weight:bold; line-height:1.0; letter-spacing:0.1em; text-transform:uppercase
}

最後に、しいて言えばカエルの絵は新しく描いたのでここはルックス面ではv3.xとv4の大きな違いかな。この絵のためにわざわざ動物園まで参考写真撮りにいったのでここはそこそこ。前のもオモチャっぽくて(というか本当にオモチャですが)かわいかったのですが気分転換に。

本物のカエルベースになりました
アイゾメヤドクガエル v3 → v4

jQuery

またAjaxライブラリとして一世を風靡しているjQueryも今回取り込んでみました。

あんまりAjaxは興味ないんですよね。「JavaScriptは悪、JavaScriptを切ってみられるサイトを」で育った世代なので。とはいえ、ユーザ・エクスペリエンスをちょっと上げてくれるような便利な機能は揃っているので。HTML/CSSでできないことができるしね。

今のところはLightboxのオルタナティブであるslimbox2と、あとは小さなスクリプトをいくつか書いてみました。ひとまず

  • ツールチップ
  • ページ下のトップへ戻るボタンでのスクロール
  • グローバルナビゲーションでのアンカーぴよぴよ
  • Blogサイドバーと検索オプションの折りたたみ
  • Photograph用のメニュー画面を滑らかに

くらいに使っています。せっかくjQuery使うなら使うで、これも自分で書いていきたいです。Lightboxは、ちょっと大掛かりそうなんで人のを使ってるけれど。でもjQueryが面白いのは実感しています。

まぁ、javascript切った環境でも問題なく見られるサイトデザインを、はゆずれないので、お遊び程度かな。ちょっとリッチになるといいな、と。流行モノだし。

時代と技術と個人サイト制作

今回ソースコードをHTML5に書き直すにあたり、HTML5の仕様を改めてしみじみと読んでみたのですが、まさにBlogとwebアプリケーションのための仕様であって、正直少々愕然としました。

そもそも、昨今こういったタイプのページとコンテンツが振ってあるような個人趣味サイトを見かける機会が少なくなってきました。手軽なはてなダイアリーやアメブロなどのレンタルブログにせよ、WordPressやP_BLOGのようなインストール型ブログにせよ、もしくはPikiWikiなどのWikiシステムにせよ、システムに丸投げ、と言った感じです。以前から見ているサイトも、多くは気付けばリニューアルをしてBlog主体になっています。下手したら、mixiやFacebook、twitterなどの外部SNSをメインに使い、自分の場所を持たないケースも多いことでしょう。

まぁもちろん企業サイトやアプリケーションやアーティストの公式サイトなんかはその限りではなく、いまでもしっかりしたサイトが多いのですが、個人レベルではどうなの?と。私みたいにふにゃふにゃと趣味で「サイトやってまーす」みたいなの少なくなってきてません?

このサイトは、新しいweb技術を具現化する実験の場所でもあり、正直このサイト自体を自分の作品と考えている節があるので、今後も意地になって緑力外部システムを使わずに自分の手でコーディングとシステム構築をしていきたいと考えています。つまりそれは新しい武器を手にしながらの時代の逆行でもあるのですが、まだ大丈夫、まだいけます。

ということで、今回のリニューアルはweb技術の進化速度に振り落とされないように半ば強引に行ったところがあります。

次のリニューアル、つまり "v5" は、おそらくCSS3を躊躇なく使える環境が来た時でしょう。その頃はAjaxとかのインタラクティブな技術もより進化しているんだろうなぁ。画像も解像度非依存のベクターベース(SVGか)が普通に使えるようになっていたらいいな。何年後になるのか、早くそのときが欲しいものですね。HTML5もCSS3も非常に楽しいのでよろしい。

2 Comments

urunao

リニューアルおめでとうございます。

思えばこのサイトでWeb標準という概念を知りその後のWebデザインの方向性を決定づけられた身としては感慨深いものがあります。

去年辺りから私もHTML5を勉強し始めていたので、こちらがいつHTML5対応するか期待して待っていた感もあります。
さっそく参考にさせていただこうと思っています。とくにsectionやarticleあたりを。

1024jp @webmaster

> urunaoさん
ありがとうございます、お久しぶりです!
いやはやウチのサイトがweb標準の入り口とは大変光栄でございます。
私もHTML5はつい2ヶ月くらい前に初めて細かい内容を知ったので、
試行錯誤中です。
articleはなかなか使いどころに迷いますよね。
Blog以外のページだと1ページが1 articleなのかな、と思うページもあるので多分今後テンプレに手を入れると思います。

この記事へのコメント受付は終了しました。