2007年3月アーカイブ

Web2.0的なデザインでよく使われるボックス四隅の角丸ですが、うちのサイトのような可変幅で表現しようとすると、無駄にdiv（もしくはspan）要素を増やさなければならなかったりします。

Javascriptで見せる方法もあるから、それを使えばソースに無駄はなくなるけど、個人的にはそれだけのためにJavascriptを使うのはどうも...てな感じだ。

ということで、今回はCSSだけで角丸をつくる方法を紹介。
（あ、四隅の画像はいりますよ。）

で、最初にことわっておくと、IEには対応してません。（7も）
「えーっ!?」と言われそうですが、Firefoxにはもちろん、IE以外のCSS2をサポートしたブラウザには対応してます。
なのでこの方法、「角丸でもよいが、まぁそうでなくてもよい」程度に思ってもらえればよいかと。

ではやり方です。

1. まず四隅の画像を用意
2. 角丸にしたいdiv要素を用意（幅は50%の可変幅に設定）

   これを角丸にしたいっ

3. CSSを以下のように設定
   

   div#kadomaru {
      width: 50%;
      background-color: #572c00;
   }
   
   div#kadomaru:before {
      display: block;
      line-height: 0;
      content: url(top-left.gif);
      background: url(top-right.gif) no-repeat top right;
   }
   
   div#kadomaru:after {
      display: block;
      line-height: 0;
      content: url(bottom-left.gif);
      background: url(bottom-right.gif) no-repeat bottom right;
   }
     

4. これだけで

   Firefoxでは角丸に！

これはCSSの「:before」「:after」疑似要素、「content」プロパティを使用して表現してます。

IE7さえ対応してくれれば、もっと積極的に使っていけるんだけど。
ブラウザのシェアを考えると、仕事では使えないですね...。

個人サイトではオススメ。うちもどこかに入れようと検討中です。

最近NHKで「あしたのジョー」が盛り上がりを見せてる。

まずさっきNHKの教育の方でやってた、ETV特集「あしたのジョーの、あの時代～団塊世代"心"の軌跡～」。

番組は、漫画を描いた「ちばてつや」氏が出演してたり、夏目房之介や宮崎学が「あしたのジョー」について語っていくという内容。
有名な力石徹のお葬式エピソードなどにも触れられてました。

さらにETV特集のタイトルから分かるように、団塊の世代の学生運動や集団就職などを背景におきながらの進行。
これはやっぱり、団塊の世代の人たちが今年いっせいに退職する関係もあるんでしょうね。

と、この番組だけならまだ普通にありそうなんですが、27日（火）からBSアニメ夜話スペシャル 「とことん！あしたのジョー」というのを、なんと5日間連続でやってしまおうという試みが！
総時間は23時間45分だそうです。

タイムテーブル

とことん!あしたのジョー / 放送予定

↑ タイムテーブルが用意されてる時点でおかしいことになってます。

BSアニメ夜話は以前、「機動戦士ガンダム」のスペシャルで9時間半（午後7時半～翌朝5時まで）ぶっつづけでやってたことがあったんですが、今回もかなりやりすぎ。
こういうの大好きです。

ちなみに「あしたのジョー」はBSマンガ夜話とBSアニメ夜話の両方で取り上げられてて、今回さらにスペシャルということで、かなりこの作品に対する熱が感じられます。
岡田斗司夫のお気に入りなんでしょうか。

さすがにまる1日近くの総時間があるんで、うちのPSXの録画残量に収まってくれそうにないですが、「あしたのジョー」自体は見たことあるんで、トークのとこだけでも録っとこう。
全部みたら真っ白に燃え尽きそうだ。

JavaScriptを使って画像をランダムに表示させるやり方は昔からあるし、検索かければ無数に出てくるんだけど、phpを使って手軽に画像のランダム表示をさせる方法を見つけたので、メモ書き。

元ネタはWEBデザイナーにはおなじみA List ApartさんのRandom Image Rotationから。

1. まずは上記ページの下の方にあるテキストデータをダウンロードしよう。
   分からない人はこいつを。
2. この「rotate.txt」を「rotate.php」にしとく。
3. 「rotate.php」を開いて107行目の「$folder = '.';」に、画像を入れておくフォルダをフルパスで指定してやる。例えばウチはロリポップサーバーなんで、以下のような感じになりました。

   $folder = '/home/sites/lolipop.jp/users/lolipop.jp-dp*****/web/entry-images/2007/03/random/';

4. 3で指定したフォルダに、「rotate.php」と「ランダム表示させたい画像たち」を放り込む。
5. あとはアップした「rotate.php」にアクセスしてやれば、ランダムな画像が表示される。

とまぁ非常に簡単。

この方法の利点は、(X)HTML内に画像を貼り込む場合と、CSSでの背景画像の両方に対応できる点。
実際にやってみましょう。

用意した画像はこの3つ。（例によってニコニコ動画より拝借）

(X)HTML内に画像を貼る場合

<img src="http://chocobit.com/entry-images/2007/03/random/rotate.php" width="200" height="96" alt="ランダム陰陽師" />

というふうに、「rotate.php」を貼る感じでソースを書くと

↑ランダムに表示してます。「更新ボタン」で確認してみて下さい。

CSSでの背景画像の場合

div#random-back {
   width: 200px;
   height: 96px;
   background: url(http://chocobit.com/entry-images/2007/03/random/rotate.php) no-repeat;
}

と、こちらも普通にbackgroundのurlにそのまま「rotate.php」を指定してやれば

↑空divの中の背景画像です。こちらもランダムに表示。

画像の形式は「.jpg」「.gif」「.png」に対応してるので、WEB上ではなんでもいけそうですね。

追記

エントリー内容とは関係ない話になりますが、Movable Type 3.3から追加されてる「タグ機能」とやらを入れてみました。
さらに、中途半端にやってた「カテゴリー」を思い切って削除。
再追加は未定で、しばらくは「タグ」だけで分別してこうと思います。

以前のエントリーでも話したんですが、自分は大のミスチルファン。
本日発売のNew Album「HOME」（初回限定盤）、もちろん買いました。

全部で14曲もあるんで、今回曲感想はしませんが、「ap bank fes'06」にて初披露されたという3曲目の彩り（いろどり）はイイ！
この曲については初回特典のドキュメンタリーDVDでも桜井さんがちょっと語ってるんで、ぜひ見てみてほしい。

Amazonのページからも見れますが、今回のジャケットはプールに人が入ってて、ロープを使って「家系図」をあわらしたデザイン。
タイトルHOMEだしね。

ジャケットの中や歌詞カードもこのデザインで統一されていて、なかなか気持ちいい感じ。
ひとつだけ犬の家系図があったのはかわいかった ↓

今回のジャケットのアートディレクターは森本千絵さん。
「手作り」を感じさせるアートワークで、デザインの業界では有名な方です。
「ap bank」関連や、日産「NOTE」で巨大なノートに顔を描くCMとかもこの方。

とまぁここまではミスチル「HOME」いい感じだねってなとこなんですが、なんと裏ベストを発売するっちゅーじゃないですか！

• ミスチル“裏ベスト盤”発売（Yahoo!ニュース）
• Mr.Children、15周年記念B面集（livedoor ニュース）

タイトルは「B-SIDE」。
いわゆるシングルのB面集（2枚組）。発売日は5月10日（予定）。

フェイク（1月24日）、HOME（3月14日）、B-SIDE（5月10日）。
ここ最近のMr.Children、テンポいいなー。

見習いWEBデザイナーなどと名乗ってますが、自分の中で一番使えるソフトは「Photoshop」。
というのも、1年ちょっと前までは某印刷会社で画像修正のお仕事をしていたんで。

というわけで、その時の経験をもとに、このサイトでは珍しく、ちょっとだけタメになるエントリーを。
（って言っても、Photoshopを扱い慣れてる人には何てことない話です。）

ちなみに今使ってるバージョンが6.0と古いんですが、CSとかでもあまり関係ない基本的な内容になるんで、お気になさらす。

では本題へ。
Photoshopの「拡大・縮小」、どうやってますか？

↑この「ズームツール」でカチカチとやってる人、結構いると思います。
もちろん間違いじゃないんですが、作業効率を上げるならこれはナシ！

パソコンの作業効率を上げたいとき、ショートカットキーを使うのは絶対ですよね。
つまり、できるだけマウスは使わないってことです。

「拡大・縮小」の場合、一番早いのはこれ。

拡大

[Ctrl] + [+]

縮小

[Ctrl] + [-]

めちゃ簡単です。（Macの方は [Ctrl] の部分が [コマンドキー] になります）

あと、こういうのもあります。

拡大

[Ctrl] + [space] + クリック

縮小

[Ctrl] + [space] + [Alt] + クリック

この場合はキーボードとマウス両方を使うことに加えて、操作をした時にちょっとしたズームの動きが付いてしまうので、若干遅くなります。

拡大

[Ctrl] + [space] + ドラッグ

こちらは上の「クリック」が「ドラッグ」に変わっただけですが、操作時のズームの動きがないので、まだ早いです。
「縮小」が無いですが、仮に [Ctrl] + [space] + [Alt] + ドラッグ とやっても、クリックの時と同じことが起こるので、これは「拡大」のみ。

[Ctrl] + [+]、[Ctrl] + [-] の場合は、常に画像の中心を軸とした拡大・縮小になるので、高解像度の画像の端っこを一気に拡大したい場合なんかは、その端っこへ向かって [Ctrl] + [space] + ドラッグ した方が早いでしょう。

その他、よく使うショートカットは

画面サイズに合わせる

[Ctrl] + [0]

100%表示にする

[Ctrl] + [Alt] + [0]

このあたりもかなり使えます。というか、しょっちゅう使います。

慣れてくるとキーボードを見ないでも「拡大・縮小」が素早くできるようになれますよ。

←TOPより拝借

最近「ニコニコ動画」のエントリーばっかりになっちゃってる感じですが、気のせい気のせい。

この前のエントリーでも書いたとおり、一時閉鎖に追い込まれたニコニコ動画。
その後の動向はというと。

1. 「ニコニコ動画」から「字幕.in」にユーザーが流れる
2. 3月3日より「ニコニコ動画」が10万人のテスターを募集
3. 「ニコニコ動画(γ)」3月5日からの開始が予告される
4. 予告の3月5日スタート間に合わず、6日の4時25分25秒にスタート

って、簡単にまとめすぎたか。

恥ずかしながら「字幕.in」はRBB TODAYの記事で初めて存在を知りました。

で、すでに上の記事は修正された後らしいですが、修正前の記事では「ニコニコ動画」より「字幕.in」の方が先にスタートしたような事が書かれており、その記事で「字幕.in」の存在を知った自分は、当然「そうなんだー」って思ったわけなんですが、これが実は誤報で、「ニコニコ動画」に影響を受けて「字幕.in」を作ったのが本当のようです。

こちら字幕.in開発ブログには記事の間違いをお詫びしてました。
もちろんこれを見る限り「字幕.in」が悪いわけではないので、なかなか律儀な方です。

肝心の「字幕.in」サービスの感想なんですが、コメントの流れ具合が寂しいかな…。
「ニコニコ動画」の怒涛のコメントラッシュに慣れてしまってるせいもあるけど。
でも音声機能ってのはちょっと笑える。淡々と読んでます。
他にも「字幕.in」はどんどん機能追加されていってるんで、今後の展開には期待したいとこです。

話を「ニコニコ動画」に戻して、っと。

5日の夕方以降オープンという予告だったので、その夕方からPC前にへばりついていたユーザーも多かったようですが（自分も10時くらいから待ってた…）、なんだか色々トラブルがあったみたいで（大人数のF5のせい？）、結局5日中には間に合わなかったんですよね。
開発者ブログのコメントは妙な盛り上がりをしてましたが。

で、自分はすでに寝てしまった後の本日4時25分25秒、スタート！
一応ニコニコ（25分25秒）になってはいますが、25時25分（1時25分）にしてほしかったと勝手に思う。

10万人のガンマテスター募集は自分も応募して、5万台のIDだったんで全然セーフ。
これを使ってログインし、さっそく陰陽師！（そればっかり）
相変わらずコメントランキング1位ですねー。
ってことで、またも貼ってみます。

相変わらず 徹子弾幕 厚すぎ。

今回のγバージョンからは、「タグ機能」が追加されたり、「マイページ」が作れたりと、いい感じにアップグレードしてますよ。
まっ、とりあえずは「おかえり」と。