月別アーカイブ 2006年05月
- 前後の月
PC が逝った
昨日、普段使用しているレッツノート Y2 がぶっ壊れた。明日の午前中にパナに引き取られる予定。会社にも持ち込んでたりして、使用頻度が高かっただけにかなり痛い。つか、マジへこみ。もうね、昨日は酒呑んで不貞寝。
昨日は、バージョン 7 を含む IE 向けの CSS ハックを整理した記事を書こうと思って、テストページなんかもガリガリ書いてたんだけど、突然 HDD が "カコン" とか鳴って、その後なんかシャリシャリと異音が聞こえたかと思ったらハング。しばらく様子見してたら、画面が真っ黒になって Operating System not found
ってなエラーメッセージが表示されて、そのまま、セーフモードだろうが何だろうが、もう二度とブート出来なくなった。なんか、HDD のヘッドがあがったままになっちゃってんのかも。HDD の交換かなぁ。買ってから、まだ 2 年弱なのに。
データが消えて真っ青になるような仕事のデータは多分無いと思うんだけど、残念なのは、このサイトの今までのデザインの CSS とか PSD データとか作りかけの CSS とか、あとはGmail を使う前のメールデータとかか。ついてねぇ。
2006-05-30T23:53:38+09:00
| コメント (2)
| トラックバック (0)
|
CSS Reboot に見るウェブデザインのトレンド
- この記事が属するカテゴリー
- web&blog
以前にも取り上げた事があったけど、CSS Reboot ってのは、ウェブサイトのリデザインを期日を決めて一斉に行なうイベント。多分もう 3 回目くらいだと思うんだけど、5 月 1 日に 2006 Spring が行なわれたばっか。CSS Reboot のサイトでは、リデザインしたウェブサイトが紹介されてて、誰でも気に入ったサイトに投票できるようになっている。ちなみに、CSS Reboot のその場でクリックするだけで評価できる vote 機能は、シンプルで良いな。送信した後に、Total score も表示されるし。
んで、Christian Montoya が今回の Reboot でのデザインのトレンドについて書いていたんだけど、大雑把に書き出してみると下記のような感じ。
- 1024px の幅
- Silk Icons の使用
- 暗い背景に明るい色のテキスト
- 大きめのフッタ
1024px の幅
どうやら、確実に幅 1024px のサイトが増えているっぽい。ALA が幅1024px を採用したことは記憶に新しいけど、その流れってのは海の向こうでは意外と大きくなってきてるのかも。確かに高解像度な環境ってのは増えて来てはいるんだろうけど、むしろフレキシブルなレイアウトを考えた方が良いと思うんだけど。
Silk Icons の使用
Silk Icons は、700 以上のアイコンがほぼフリーで使えるって事で有名だけど、やはりこの Silk Icons が使用されている率ってのは高いらしい。確かにこういったアイコンでちょっとしたアクセントになるしね。
暗い背景に明るい色のテキスト
暗めの背景色に明るい色をテキストに使うってのは流行っているかも。黒背景に原色使ったりとか。僕も某テンプレ用にそれっぽいデザインの CSS 書いてたんだけど、ちょっと諸事情で作業が止まっちゃてるなぁ。つか、light on dark なんつって、それ系を集めたギャラリーサイトなんかもあんのね。
大きめのフッタ
大きめのフッタってのは、コピーライトとかそんながチョロっとある所謂普通のフッタの事ではなくて、むしろサイドバーに置くような情報を下カラムにまとめたようなもののこと。元ネタの Christian Montoya のサイトもそう。どうやら、This is Powazek が最初にやり始めたサイトのひとつらしいんだけど、これはちょっとそのうち取り入れたい事のひとつかも知れない。1 カラムで ボトムにエクストラ情報をまとめてって感じで一回くらい作ってみたいなぁ。
Christian Montoya も言ってるけど、これらをただ模倣してもしょうがない。でも、こういったことを知ることで、何かしらのインスピレーションを受けて、自分の中で昇華できれば良いよなぁ。
2006-05-06T01:53:40+09:00
| コメント (3)
| トラックバック (4)
|
CSS3 の否定疑似クラスの使いどころ
- この記事が属するカテゴリー
- CSS
CSS3 の否定疑似クラス :not() って、使う機会があまり無さそうとか思ってたんだけど、Bite Size Standards で属性セレクタと組み合わせた使用例が紹介されてて、なんかそのピンポイントで指定できてる感がクール！つうか、そうか、そういう使い方かぁ。
input[type="text"]:not([size]) {
width: 15em;
}上記コードを解説すると、type="text" な input 要素で size 属性が指定されていないものは width: 15em; ってことになる。うーん、これをユーザスクリプトで指定しておくのも良いかも。size が指定されてなくて入力欄の幅が狭いのって意外とストレス感じるし。
自サイトでも、クラスや ID をわざわざ付与してなくても否定疑似クラス使って指定できるもんって他にもありそう。例えば、(X)HTML の方で width や height を指定していない img 要素に対して、 img :not([width]):not([height]) で一括して統一した width と height を CSS の方で指定するとか。
そんな事をボンヤリと考えていたんだけど、それほど面白いアイデアが浮かばなかった。なんか、他に「これは！」って使い方ないかな。
2006-05-04T18:00:18+09:00
| コメント (2)
| トラックバック (0)
|
リサイズしてドロップシャドーをつける Photoshop 用アクション
以前、一括して変換する必要があった時に作った Photoshop 用のアクションを公開してみる。なんか、別に大したことしてなくて、Photoshop いじってる人だったら誰でも簡単に作成できちゃうようなもんだけど。
開いている画像をリサイズして 4px のドロップシャドーをつけるだけ。アクションは 3 種類あって、それぞれ影を含んだ状態で横幅 100px、200px、300px で縦なりゆきの 3 パターンのサイズにリサイズするようになっている。
- 100px のサンプル
- 200px のサンプル
- 300px のサンプル
ダウンロードして解凍した shadow.atn を、Photoshop のアクションパレットから「アクション読み込み」で取り込むと、3 種類のアクションがセットとして表示される。適用したい画像を開いた状態で、希望のサイズを選択してアクション再生でズギャンと作成。後は、お好みの画像フォーマットで web 用保存するなりなんなりと。あと、サイズとか影の調子とかで気に入らないとこは、アクションを編集して変更すれば良いかと。
一応、対応しているPhotoshop のバージョンは、カンバスサイズを相対でサイズ変更可能になった Photoshop 7 以降だと思う。多分。特に色んなバージョンで試してないから分かんないけど。
2006-05-02T12:52:49+09:00
| コメント (0)
| トラックバック (0)
|