WordPressに関するスライド

WordPressのお仕事をすることになりそうだけど、
最近さわってないのです…

すごく勉強になりそうなスライドを、
自分が後で読むために貼っておきます！

WordPressを使ったWeb制作効率化のためのTips&Tools from kenji goto

ブログの枠を超える？ためのWordPressカスタマイズ入門 from muracchi

CSS3ジェネレータ＆ブラウザ対応状況

やっぱりこの頃スマホの案件が多いですね。
…と言うより、対応するのが当然になってきてるんですね。

なので、HTML5＋CSS3を使う機会が断然増えました。

ブラウザ上で動くCSS3ジェネレータは色々ありますが、
私はこちらが使いやすくてお気に入り。
CSS3 Generator

対応しているプロパティ：

• Border Radius
• Box Shadow
• Text Shadow
• RGBA
• @Font Face
• Multiple Columns
• Box Resize
• Box Sizing
• Outline
• Transitions
• Transform
• Selectors

※GradientはUltimate CSS Gradient Generatorにリンクされてます


あと便利だったのが、
When can I use...
というサイト。

HTML5, CSS3などに
現在、どのブラウザが対応しているかを
一覧で見ることができます。

対象ブラウザに
iOS Safari、Opera Mini、Android Browserが
含まれているところが貴重です。

Graceful DegradationとPolyfill

新しい言葉を覚えたのでメモ。

• Progressive Enhancement
  プログレッシブ エンハンスメント
  →旧ブラウザメインだけど、モダンブラウザで見るとちょっといい感じになってる。
• Graceful Degradation
  グレイスフル デグラデーション
  →モダンブラウザがメイン。旧ブラウザでも見られないことはない。
• Polyfill
  ポリフィル
  →モダンブラウザがメインだけど、JSライブラリなどを使って旧ブラウザでも同じように見せる。

こんな感じで合ってるかな？

お仕事で商用サイト（しかもEC）作ってると
HTML5やCSS3の使い方は悩みますもんね…

IE8以下もまだ当分捨てられないけど、
リニューアルとかのタイミングで
対応しとかないと後で困りそう。

Polyfillは活用する価値ありそうだけど、
重くなりそうなところが
大規模サイトだと厳しいかなぁ。


参照：
HTML5&CSS3入門 第6回 Graceful DegradationとPolyfill

Firefoxのアドオン「User Agent Switcher」

最近スマートフォン対応のお仕事が増えてきたので、
こちらのアドオンを入れました。
便利！
User Agent Switcher

ユーザエージェントを偽装して、
Firefoxでスマホ用のページを見ることができます。

機種ごとのユーザエージェントは検索するといっぱい出てきますので、
それをコピーしてきて自分で追加することもできます。

FireMobileSimulatorでもいいんですが、
たまに表示が崩れることがあったり、
横幅が固定されちゃうのが不便な時があって、
User Agent Switcherの方が気に入ってます。

SassとCompass

最近ついに仕事でもスマートフォン対応がはじまったりして、
HTML5とCSS3を使うようになりました。
（一応勉強しておいてよかった！）

でも、もっと効率的にやりたいなぁと思って、
ずっと気になってたモノを
ついにインストールしてみました。

CSSを拡張するメタ言語の「Sass」
http://sass-lang.com/
と、Sassをさらに便利に使えるフレームワーク「Compass」
http://compass-style.org/
です。

Macのターミナルを開いて、Rubyアップデートしていろいろ打ち込んで、
なんとかインストールできたみたいです。

一応メモ。

$ sudo gem update --system
$ sudo gem install compass

$ compass create --sass-dir "sass" 

--css-dir "css" --javascripts-dir "js" --images-dir "img"

がんばって使ってみたいと思います！

あとは、やっぱり黒い画面はちょっと苦手なので
Compass.appがすごく気になるなぁ…
http://compass.handlino.com/

便利なエクステンション「GuideGuide」

「GuideGuide」はPhotoshop用の便利なエクステンションです。
GuideGuide
※OSX Lionの場合はエラーが出てしまうので、
Extension Managerのパッチを先のインストールします。

ボタンひとつで、お好みのガイドをひいてくれます！

例えば、
・画面を3分割
・周囲のマージンは30px
・ボックスどうしのマージンは20px
などと設定して、「GG」というボタンを押せば、
一瞬でその通りのガイドが作成されます。

設定をセットとして保存しておくこともできます。

Webページのレイアウトをデザインをしている時などに、
とっても便利です！


家のMacではかなり古いバージョンの
PhotoshopとIllustratorで粘っていたのですが、
先日さすがにCS5.5にアップグレードし、
最近はエクステンションが充実してる！
ということに（今頃）気づいたのでした。
いろいろあるのでまた探してみようっと。

「エル・ブリの秘密」

『エル・ブリの秘密　世界一予約のとれないレストラン』
という映画を観てきました。

ドキュメンタリーなんだけどナレーションとか全然なくて、
現代アートのインスタレーションみたいな映画でした。
（一緒に観に行った人、ちょっと寝てた…）

もうなんか、お料理なのに美味しそうとかじゃなくなってるところがすごい。
（実際はすごく美味しいんだと思うのですが…）
シェフっていうより厳しいアートディレクターみたいでした。

こういう仕事を十何年も続けるのってほんとに大変そうだな〜。
でももしできるなら、1年くらい参加してみたいかも。




エル・ブリの一日―アイデア、創作メソッド、創造性の秘密


エル・ブジ 至極のレシピ集―世界を席巻するスペイン料理界の至宝 (世界最高のレストラン―スペイン編)