div要素を増やさずに「角丸」を表現する

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

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

ということで、今回はCSSだけで角丸をつくる方法を紹介。
(四隅の画像は使いますが。)

で、最初にことわっておくと、IEには対応してません。(7も)
「えーっ!?」と言われそうですが、Firefoxにはもちろん、IE以外のCSS2をサポートしたブラウザには対応してます。

なのでこの方法、「角丸でもよいが、まぁそうでなくてもよい」程度に思ってもらえればよいかと。

ではやり方です。

  1. まず四隅の画像を用意
    角丸画像1
    角丸画像2
    角丸画像3
    角丸画像4
  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さえ対応してくれれば、もっと積極的に使っていけるんだけど。
ブラウザのシェアを考えると、仕事では使えないですね…。

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

phpで画像をランダムに表示させる

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/blog/wp-content/uploads/2007/03/random/';
  4. 3で指定したフォルダに、「rotate.php」と「ランダム表示させたい画像たち」を放り込む。
  5. あとはアップした「rotate.php」にアクセスしてやれば、ランダムな画像が表示される。

とまぁ非常に簡単。

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

用意した画像はこの3つ→現在試験的に6つにしてます。(例によってニコニコ動画より拝借)

陰陽師1
陰陽師2
陰陽師3
陰陽師4
陰陽師5
陰陽師6

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

<img src="/blog/wp-content/uploads/2007/03/random/rotate.php" width="200" height="96" alt="ランダム陰陽師" />

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

ランダム陰陽師

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

CSSでの背景画像の場合

div#random-back {
width: 200px;
height: 96px;
background: url(/blog/wp-content/uploads/2007/03/random/rotate.php) no-repeat;
}

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

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

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

Photoshopの効率をちょっと上げる方法

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

というわけで、その時の経験をもとに、このサイトでは珍しく、ちょっとだけタメになるエントリーを。
(って言っても、Photoshopを扱い慣れてる人には何てことない話です。)
ちなみに今使ってるバージョンが6.0と古いんですが、CSとかでもあまり関係ない基本的な内容になるんで、お気になさらす。

では本題へ。

Photoshopの「拡大・縮小」、どうやってますか?

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]

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

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