PrePANというサイトのお手伝いをしました。private.SubscribedunsubscribeSubscribeSubscribeくらげだらけ2011-10-10PrePANというサイトのお手伝いをしました。さんに頼まれてantipopさんが作っているPrePAN(http://prepan.org/)というサイトのデザインをしました。オープンしましたPrePANはモジュールをつくったけど、「既に似たようなものがあるのでは?」「実装について不安が......。」「CPANizeするに際しての名前やファイル構成の慣習がわからない」「誰かにちょっとチェックしてもらいたい」というような悩みがある人の問題を解決するためのサイトです。デザインについて仕事のときも含めてデザインをお願いされるときはこう言われることが多いです。今回もantipopさんにそうお願いされたのですが、それだけでいい感じのものが作れる才能もセンスも私はもっていません。ヒントをもらって、「青系の配色」「外人っぽい」というキーワードで作りました。基本的には自由にやらせてもらったので、気晴らしのように楽しんでできました。CSSについてエンジニア向けのサイトということもあって古いブラウザのことは気にせずに、新しいスタイルプロパティを使って構築しました。モダンなブラウザであればほぼ再現された状態で見ることができると思います。UIボタンっぽいUIのほとんどをCSSのスタイルで表現しています。あたりを利用することでボタン風な見た目を表現しています。gradientはあまり強くかけすぎると野暮ったくなってしまうので軽くかけるのですが、今回は外人っぽい感じということなので若干強調した感じにしています(勝手なイメージですが)。rgb(0,30,46));それからbox-shadowですが、私の場合box-shadowを何度も重ねて細かい表現をすることが多いです。ボタンをベベル風にみせるためのボタン自体のtopのハイライト・bottomのshadow、ボタンが埋めこまれているように見えるようにするボタンの上のshadow・下のハイライトなどです。box-shadowプロパティは「,」でつなげて書くことで何度も重ねてかけることができます。その場合、最初に書いてある値ほど一番上に重ねられて描画されます。rgba(255,255,255,0.4);さらにtext-shadowをつけてボタンに文字が刻印されているようにすると、もっとそれっぽくなります。rgba(0,0,0,0.7);疑似クラスの:hoverや:activeも細かく設定してあげると、よりボタンっぽい振る舞いを表現できるように思います。実際はこういう感じで書いています。Viewにも対応させています。Viewに対応させるに当たって、コンテンツの幅やフォントサイズだけでなく、ボタンの大きさやレイアウト、場合によっては不要な要素をなくすといったことをしています。例:ヘッダーのボタン例:フッターのナビゲーションスクロールバーのカスタマイズChromeやSafariなどのwebkitブラウザの場合はスクロールバーもカスタマイズしています。それぞれのカラーに合うように3箇所でカスタマイズしたスクロールバーを使用しています。rgb(0,30,46));}さいごに簡単ではありますがPrePANというサイトの紹介でした。一部ではありますが紹介したスタイルなども参考にしていただければと思います。14:46PrePANというサイトのお手伝いをしました。Blog|ブログを報告する。