画像を使わずiidaを描いてみた

GWはいかがでしたか?

私は序盤で化物語を見てました。
主人公のムララギさん(失礼、かみまみた)がiidaのG9というケータイを使ってます。
これがなかなかシンプルでイカしてるので、CSS3で描くしかないだろうと血が騒ぎ早速作業に取りかかりました。

結果から申しますとこんな感じです。

iida G9 – jsdo.it – share JavaScript, HTML5 and CSS

メインはMacのFirefox 3.6で調整しています。Chrome・Safariにも対応しています。
環境によっては一部崩れてしまっていると思うので、比較画像を貼っておきます。

ちょっと凝った技を使ったところだけ解説します。

:before、:after擬似クラスで要素を少なく

ボタンのところに注目してみましょう。

div#btn ul:before {
	content:"";
	display:block;
	position:absolute;
	top:-20px;
	left:0;
	width:100%;
	height:30px;
	background:#000;
	-moz-border-radius:0 0 12px 12px;
	-webkit-border-radius:0 0 12px 12px;
}

解説しやすいように、CSSの:before擬似クラスとHTMLの#btn2行目以降のulをコメントアウトしてみます。

この状態で:before擬似クラスのコメントアウトを外してみるとこのようになります。

なんとなく仕組みはわかったと思いますが、実はulの上に角丸な四角を乗せているだけです。
イメージとしてはこんな感じ。

#footer、#stockholm ulにも同じように要素を減らすための工夫をしています。
興味がある方は読み解いてみてください。

終了タグのいらないタグがある

今回liタグの終了タグは全て省きました。
#speakerの中がかなりシンプルになっているのがわかると思います。

<div id="speaker">
<ul><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li></ul>
</div>

他にも終了タグが省略タグについてはこちらをご参照ください。
HTMLにて終了タグがいるたぐいらないタグ

各ボタンのアイコン描画

画像を使わないと決めたので、どうやって作ろうか迷った部分です。
結局、文字を回転させたり位置をずらしてみたりして、組み合わせてそれっぽくしています。
これは作っててなかなかおもしろかったですが、フォントに影響されるのが問題ですね。
電話のアイコンだけはかなり手抜きです。

javascriptについてはそこら辺のコピペですから、特に説明もいらないと思います。

みなさんも色んなケータイにチャレンジしてみてくださいね!


化物語 第一巻 / ひたぎクラブ【完全生産限定版】 [Blu-ray]


この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ