CSS3(中途半端にHTML5)でリニューアル

CSS, HTML

リニューアルしますた。

デザインリニューアル
Safari4だとキャプチャのように見えるはずです。
古いブラウザやCSS3に対応していないブラウザはものすごい表示になります。
IEで見ちゃいけません。ダメ絶対。
にしてもデザインの苦手なデザイナーだけあって直せそうなところがいっぱい…

明日以降からそこらへんは対応させてください…
といっても、古いブラウザなどはあえて微妙な表示にする予定ではあります。
仕事がNN4とかまでフォローしてるので、プライベートくらいはこんな感じにしたいかなぁと・・・

概要っぽいもの

  • このページ画像は1枚も使ってません。凄いですねCSS3は。
    あ、上のキャプチャとその他アイコンはさすがに画像です><
    デザインには一枚も画像を使っていないという意味です。
  • アニメーションにJavascriptは使っていません。ChromeやSafari4などでページを見れば所々動きますが、CSS3です

作業時間とか

  1. デザインは3時間くらい
  2. コーディングは2時間くらい

計5時間くらい。ですがロスタイム含めて6時間ちょいかと思います。Twitterに作業はじめの時間POSTしてるので、それを元に計算しています。
コーディングに関してはIEとかを、ブッタ切ってるので納得の時間ですね…

苦労したところ

  1. 地味にWebkit系とMozillaとで、ボックスの考え方が違いました。
    特にbox-shadowを使った場合、Mozilla系はbox-shadow分横幅が伸びて表示が崩れました(今は無理やり表示させてます)
  2. TwitterにもPostしましたが「@font-face」を「@font-fase」と書いて1時間ほどはまりました…コピペしたはずなんだけど><

明日以降直すところ

  1. 古いブラウザなどの対応
  2. HTML4の部分をHTML5に変更(ワードプレスの勉強をしないと…)
  3. デザインの微調整(微妙にデザイン通りじゃない場所が多いので、調整)

といった感じになると思います。

ちょっと夜更かししすぎたので、後は明日以降の対応で><
質問などありましたらコメントをお願いします。

Available Feeds

ブログ内検索

Profile

ずま/Zuma
Zuma
TwitterはてなブックマークTumblrFriendFeedGoogle リーダー
  • おはよござます。最近はてブの自動postがうまく動かない…ぐぬぬ

    September 10, 2010, 2:01 am
  • CSS3でのアニメーション知りたい方参考にどでしょ。「:hover」の応用なので古いブラウザでもそれなりに動きます。 Animated Sprites with CSS3 Transitions http://bit.ly/brpjRZ

    September 8, 2010, 5:54 am
  • RT @cipher: New post: CSS Nite in SENDAI, Vol.5でお会いしましょう - http://bit.ly/a8NkPr

    September 7, 2010, 5:26 am

某ポータルWebデザイナー。世間的にはマークアップな人。 html,css,javascript大好き。最近はcss3がお気に入り。phpとasも気になるお年頃。僕はどこへ向かうのか。dot3というユニットでも活動中。http://dot3.jp [tag]iPhone,music,design,wordpress

最近の活動

Dreamweaver Town Meeting in Tokyo

Dreamweaver Town Meeting in Tokyoに出演しました。