DTPしか知らない僕がCSSを書いてみた。1回目
仕事でCSSを書いてみた…けど
以前、仕事で簡単なCSSをいじることがあり、
簡単とはいえDTPしか経験がない僕にはなかなかハードルが高く
本を読んだり人に聞いたりしながらなんとか作業をしていました。
それから数ヶ月後再びCSSを書く仕事が回ってきたのですが、
さぁ書こうとしたものの、前回やったことをほとんど覚えてない（汗）
前回学んだことを忘れているというより、
そもそも覚えるに至らないまま仕事として完了していたんだと思います。
うーん、これではいかん！
と思い、マジメにCSSを身につけようと思ったのです。
やる気と根気
身に付けるといっても、本を読んだり解説サイトを見てるだけじゃ
なんとなく分かったような気にしかならず、全然覚えられてないというパターン。
まぁよくありますよね。
とにかく実際に書くこと。書いてみなきゃ始まらないってことで
まず手をつけたのが自分のフォトブログです。
うにかめ
Tumblerをブログがわりに使ってるんですが、
これはテンプレート一覧から好きなのを選んで自分でHTMLやらCSSを編集できるようになってます。
フォトブログなので写真を大きく載せたいものの、CSSの書き方がわからずずっと諦めていました。
とはいえ基本のテンプレをいじる程度なので少し調べればそんなに難しいこともなく、
2日ほどかかりましたがおおむね自分の思い通りの形にすることができました。
書きだすと止まらなくなって、つい寝る時間を削ってまでやってましたが全然苦にならない。
やっぱり、自分のものを作るとなると俄然やる気が湧いてきますね（笑）
続けることが大事
いったん満足したもののこれで終わってしまってはまた忘れてしまう。
それに、だんだんCSSを理解できてきて気持ちよくなってきたこともあり
次は、はてなブログも調整することにしました。（このブログです）
はてなブログもテンプレートを選んでCSSを調整できる仕様なのですが
今度は何も無い状態から書いてみようかな、と。
まずこのCSSをオフにした画面を見て「うっ…」という気分になりましたが（笑）
大枠を考える
どっから手をつけていいものかという迷いもありつつ、とはいえまずは枠取りからだろう、と。
DTPでもまず紙サイズを決めて、マージン決めてガイド作成しますもんね。
基本は紙もWEBも同じだ。
もっといえば最初にデザインラフを書くべきですが、そこまでの気合がなくとりあえずアドリブで。
（こういうところがいけませんね…）
最近、バニデザノートさんを見て良いなと思ったのでパｋ…参考にさせてもらうことに。
バニデザノート
話はそれますが、@vanillateさんはフリーのデザイナーさんなのですがデザインがすごく綺麗！
名刺のデザインをTLで見かけた時に勝手に一目惚れしてしまいました。
これは機会があったら別で書きたいんですけど、紙のデザインが上手なひとのwebデザインって
やっぱ他のデザインと少し違うんです。
何が違うかというと「文字組み」のうまさが違う。
僕も偉そうに言える立場ではないのですが、紙媒体のデザインって文字組抜きには語れない。
例えばカナと漢字が並べばカナをツメるし、100円って書く時は円を小さくする。
何気ない部分へのこだわりがすごいというより、調整することが癖づいてるんです。
町を歩いてて文字組の荒い広告を見たら、直したくなってムズムズするぐらいに（笑）
webという性質上、環境によって見え方も変わる中で文字組を整えるのは大変なことだろうし
どこかで諦めをつけざるをえないんだろなぁというのはなんとなく理解してます。
でもそれでもこれだけ綺麗に文字を並べられるのはすごいなと。
ホワイトスペースについて書かれているエントリがあるのですが、この記事自体がすごく読みやすい。
ホワイトスペースを使ったウェブデザインの考え方
これを見てまた勝手に一目（二目？）惚れしてしまいました（笑）
たしかに、ブログのデザインなので大前提として読みやすくないとダメだなと。
読みやすく、シンプルに。そしてちょっと上品（笑）な感じにしようと決めました。
そして実際にCSSを書いていくわけですが、
前置きでダラダラと書きすぎてしまったので
続きは2回目へ…。
Eye-Fiで快適カメライフ。
とうとう買っちゃいましたEye-Fiカード。
撮影してその場でMacで確認する、という場面がありそうだったので思い切って購入。
最低グレードのConnect X2です。
簡単に言うとSDカードに無線機能が付いていて、撮影したその場で写真データを無線転送してくれるものなんですが、これがすげー便利なのよまじで。
※この記事を寝かしているうちに良記事がupされてたので貼っときます。画像付きでわかりやすいですｗ
Eye-Fi Connect X2: 無線 LAN を使って撮った写真を PC・Evernote/Flickr/Picasa へ即転送！ - たのしいiPhone！ AppBank
セットアップ
セットアップも簡単。
- Macにカードを接続しドライバのインストール
- 無線LANポイントの設定
- 外部サービスの設定
以上！
あとは、カードをカメラに挿すだけ。
シャッターきったその場から転送が始まり、気づけばMacに写真が表示されています。
設定できる項目は
- 転送先のMac（PC）
これは1台しか設定できません。違うマシンに転送したくなったらドライバ上で切り替える必要あり。もちろん保存フォルダの指定もできます。iPhotoも指定できる。
- 無線LANポイント
実際に接続できる状態じゃないと設定できない。ここはちょっと難点。「WiFiスポットへ行ったときに使えるように事前に設定しとこ〜」と思っても、できません。逆に言えば、ノート等があれば現地に行って設定できるのであんまり関係無いことですけどね。
僕は家の無線LANとPocketWiFiを設定。
- 外部サービス
Macへ転送するだけじゃなく、同時にクラウドサービスへupすることもできる。flickr、Picasaの大手フォトストレージサービス意外にも、FacebookやEvernote、mixiなど主要なサービスは網羅してるので素晴らしい。ログイン認証して、up先の設定（非公開、セット名など）をするだけ。全部upするか、プロテクト（カメラの基本機能）したものだけをupするかも選択できる。
僕はflickrのプロ垢なので、容量無制限。全部upするように設定しました。
使った感じ
普通に電源を入れて、シャッターをきる。
すると10秒もたたないうちに、Mac上右上にサムネイルが表示され、アップロードの進捗状況が表示される。
おぉっ！この感覚は新しい！
アップロード中も気にせずパシャパシャ撮影できます。
カメラ側は普段と何ら変りない。連写もオッケー。
iPhotoを立ち上げればすぐに写真の読み込みが始まり、USBケーブルで接続したときと同じように読み込みできる。
これでもう煩わしいiPhone用のケーブルとカメラ用のケーブルの差替えをしなくてすむ…！（ハブを買えという話ですが）
気になったところ
使用時に気をつけることは、転送中にカメラの電源を切らないこと。当然ですが、転送が中断されます。
但し、データが壊れるなどの心配はなく、接続しなおせば中断されたところから転送が再開されます。
ただ、カメラ側でアップロードの進捗を確認できないので、いつ転送が終わったかを把握することができない。
（Eye-Fi対応カメラもあるらしく、それはアップロードの状況が表示されるみたいです）
これはもうカメラ側の対応を待つしかないんだけどね。
アップロードが終わったらメールをくれるサービスもあるので、それを使うのもアリかな。
アップロードはEye-Fi Viewというクラウドサービスがあり、一旦そこに転送された写真が各クラウドサービスへ転送されるようなんだけど、
●転送設定をしたその場にMacがある場合
【カメラ】>>>【Mac】>>>【Eye-Fi View】>>>【外部サービス】
この場合、カメラとMac間は同一無線LAN内なので転送が速い。
その後、MacがEye-Fi Viewにupしてくれます。
これはオッケー。すごく快適。
●Macがその場に無い場合
【カメラ】>>>【Eye-Fi View】>>>【外部サービス&Mac】
こうなった時のアップロードがなかなか遅い。
1枚3MBもあるような写真なので仕方ないとはいえ…カメラの電源切るのを諦めてつけっぱにしておいた方がいい感じ（笑）
こうなると当然カメラの電池減るのが早くなる。
とはいえ、めちゃくちゃ消費する！って感じでもなく、ちょっと減りが早いかな？程度。
2日間で150枚撮ったときも電池レベルは2/3残ってたので、十分持つなと思いましたよ。
むしろPocketWiFiの電池の減りの方が心配です…。
もっとEvernoteを使いたい。
Evernoteを使い倒すために
Evernoteをプレミアムアカウントにできそうなので（詳細は後日）、それに向けてEvernoteの使い方を見なおしている。
プレミアムアカウントの1ヶ月1GBの転送量ってのは、なかなかすごい量だ。
使っても使わなくても同じ料金で、もちろん余った容量の繰越しもない。なら、たくさん使わないと損だろうっていう、典型的な貧乏性（笑）なので、とりあえずなんでもかんでもEvernoteへ放り込むことにする。
Evernoteのエントリは以前にも書いたけど、今回はさらに追記という感じで。
Evernoteを楽して使ってみる - nitromemory
なんでもRSS取得→Evernoteへ
Evernoteへ放り込む、といってもまずはネタが無いことには始まらない。
半年ぐらい前からRSSリーダーを使うようになり、情報収集が楽しくなった。朝や、空き時間でフィードチェック→面白いものはTwitterへ流す といった生活リズムができつつある。
（リーダーは、feedlyを使ってたのだけどフィードを大量消費するには不向きだなと思い、今は結局googleリーダーに戻った）
そんなこともあり、最近なんでもかんでもRSS登録している。
時間がなければ見なくていいし、見たい時にはいくらでもネタがある。とはいえ、自分の生活の中で処理できる量よりちょっと多いぐらいが良いのかなと思う。
未読があんまり多いと見る気が無くなる不思議（笑）
こういうエントリも参考に、写真・デザイン関連のネタもRSSで取るようにした。
インスピレーションを刺激させたい時に大抵見てまわるWebサイト集 - かちびと.net
to Evernote
あとはEvernoteへ放り込むだけ。
といっても直接送るわけじゃない。
直接送ろうとすると、ノートブックの指定とかタグ付けとかやらなきゃいけない。しかもエントリごとに。
それは正直めんどい。たぶん途中で飽きる。
毎日やることなので、そのあたりもスマートにしたい。
そこで、自動化だ。
詳細は前述の過去エントリに書いてるのと似てるので、それを踏まえた上で今回変えたことなどを書いておく。
Yahoo!Pipesを使う
Yahoo!Pipes
Yahoo! Pipes - Wikipedia
「Yahoo! Pipes（ヤフーパイプス）は、Yahoo!によって提供されているWebアプリケーションである。RSSフィードや外部のサービスなどの様々な情報をまとめたり、マッシュアップすることが出来る。」
