「iPhone4をCSS3で描いてみた!」の解説(1)

- by konitter

先日のエントリー「iPhone4をCSS3で描いてみた!」が思いのほか反響があったので、解説記事を書いてみました。自分もCSS3でなにかを描きたい!という人に少しでも参考になれば嬉しいです。

iPhone4をCSS3で?は?なにそれ?という人は以下のdemoを一度見てみてください。 » Pure CSS iPhone 4

CSS3とは?

まずは、CSS3で何ができるのか、というのをある程度に理解しておいた方がいいと思います。その辺についての説明は、検索してもらえればいろいろ出てくると思いますので軽く目を通しておくといいです。

» CSS3では何ができるのか? | Think IT » [CSS]CSS3で何ができるの? という時にみておきたいサイト集 | コリス

役立つツール

次に、CSS3でコーディングする上で役に立ったツールを2つご紹介します。

» download the CSS 3 Sheet (PDF)

↑ 角丸やグラデーションに限らずCSS3のプロパティが1枚にまとめられたチートシートです。iPadを持っている人はiPadに入れて、持ってない人は印刷するなどして見えるところに貼っておきましょう。

» CSS3 Gradient Generator

↑ 複雑なグラデーションをスクラッチでやるにはかなりしんどいのですが、グラデーションの流れる方向と色とその色の場所を指定すれば自動的にコードを生成してくれるジェネレーターです。かなり便利ですのでブックマークしておくといいと思います。

何を描くか

CSSで何を描くのかを決めます。大好きなアニメのキャラクターでもいいですし、ぼくがやったようなiPhoneやiPadなどのガジェット系などぶっちゃけ何でもいいのですが、Twitterのクジラドラえもんのようにできるだけイラスト化されたものでかつあまりパスが細かくない方がいいです。

イラスト化されたものだと実写に比べて色が取りやすいですし、単純な直線と曲線で構成されている方が形として再現しやすいです。たとえば人の髪の毛のように複雑なパスが必要なものもできなくはないですが、相当な労力を要しますのであまりおすすめしません。あ、でも「変体あらわる」とかコメントされたい人はどうぞw

ぼくの場合は、iPhone4のpsdデータが以下のページで配布されていたのでそれを元に作りました。iPadやiPodに限らず海外でも人気のガジェット系であれば同じような画像があると思いますので、挑戦してみたい人はこの辺りを探してみるといいと思います。

» Macristocracy - iPhone 4 PSD

HTMLソース

部品一つ一つを適切な名前をつけたHTML要素でマークアップします。一気に全部書いてから一気にCSSを書いていくのもありですが、ぼくはiPhone4のボディ部分(以下)からスタートし、そこから部品を付け足していきました。そこは好きなやり方でいいと思います。

<div id="iphone4"></div>

ちなみにdemoのiPhone4は以下のHTMLソースからできています。

<div id="wrapper">
    <div id="sleepbtn"></div>
    <div id="silentswitch"></div>
    <div id="volumeplus"></div>
    <div id="volumeminus"></div>
    <div id="iphone4">
        <div id="insetray"></div>
        <div id="camera">
            <div id="lens">
                <div id="lensInr"></div>
                <div id="ray1"></div>
                <div id="ray2"></div>
            </div>
        </div>
        <div id="earspeaker">
            <div id="earspeakerInr"></div>
        </div>
        <div id="screen"></div>
        <div id="homebtn">
            <div id="homebtnInr">
                <div id="homebtnMark"></div>
            </div>
        </div>
        <div id="balckline1"></div>
        <div id="balckline2"></div>
        <div id="balckline3"></div>
    </div>
</div>

ちょっと長くなってきたので、続きは以下へ。

» 「iPhone4をCSS3で描いてみた!」の解説(2)