この記事のURLをスマートフォンに送る この記事のURLをスマートフォンに送る

画像を使わずにCSS3だけで尖ったボタン

CSS3だけで、iOS風のBackやNextの尖ったナビゲーションボタン作る方法ないかな〜と探していたところ、良記事があったので紹介します。Androidで確認してませんが、webkit向けなのでたぶんAndroidでも大丈夫だと思います。Androidはひと工夫必要そうです。

CSS3 Wizardry -Back and Next Buttons Revisited-
CSS3 Wizardry -Subpixel Rendering-



Buttons Revisitedの方が改良版で疑似要素バージョンみたいです。原理はSubpixel Renderingの方がわかりやすいです。

Tagged with:
 
この記事のURLをスマートフォンに送る この記事のURLをスマートフォンに送る

最近いろんなスマホ最適化されたサイトを見るようになりました。
それと同時に、多様なAndroid端末が急速に普及し、iPhone3GSが全盛だった去年までの制作方法では対応が不十分になってきてまして、僕自身も試行錯誤中なこともあり、2011年5月時点でのiPhone・Androidに対応できる自分なりのレイアウト方法をちょっとまとめてみようと思います。

今回は全体編なので、主にviewportの設定と全体を囲むコンテナ要素にフォーカスを絞ります。

この記事のURLをスマートフォンに送る この記事のURLをスマートフォンに送る

※Androidでアクセスされた方は使用感をいただけると幸いです。
(サイトトップ)

先日簡単なエントリで書いてますが、今まではてなダイアリーにエントリを書いてまして、やはりデザインの限界などがありWordPressに移行しました。

PC Site View of This Site

このサイトのPCビュー

同時に、基本的なスマホ最適化もおこなっています。

ようやく自分のサイトでスマホ最適化ができたので…ということでのエントリです。

ちなみに、このサイト自体はまだまだ作りかけでして…
そもそもサイトの構成がちゃんと考えられておらず、かなりいろいろ行き届いてないサイトです(笑)
(IE系ではちゃんと表示されません…そのうち手入れします。すみません)

どちらかというと、スマホ最適化でのユーザーインターフェースに重きを置いてのエントリとなります。

では、以下にスマホ最適化でおこなったことをまとめてみました。
(ちなみに対象としているスマートフォンはiOSデバイス(iPhone, iPod Touch)、Androidです)