カテゴリー:テンプレート

リスト表示へ

これは簡単! a要素にクラスを追加するだけでiPhone UIボタン

2011年8月29日 09:05

↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone / WebKitでしか最適化されていません)

これは簡単! a要素ひとつでiPhone UIボタン - jsdo.it - share JavaScript, HTML5 and CSS

ちなみにiPhone / WebKitで実際に見るとこんな感じに見えます↓

実際に適用したサンプル

a要素に1クラス追加するだけで実現するのでお手軽

今回のサンプル作成でこだわったのは、1要素に1クラスを指定するだけでiPhoneのようなデザインを実装することです。
つまり、以下のように指定するだけでiPhone風ボタンに早変わりする、というような手軽さを意識しました。

HTMLソース

CSSソース

実は見出し部分も画像なし

実はタイトル周りもCSSのみで実装しています。
ソースもかなりシンプル。
さらには背景の縞々模様もCSSのみで作っていたりします。

まとめ

CSS3のポテンシャルは非常に高いです。
こうした比較的シンプルなデザインであればCSSのみで、かつ要素を何重にも入れ子に・・なんてしなくても実現できてしまいます。
(具体的には、:after擬似要素、:before擬似要素を匠に使うことで、無理に思えるデザインも実装できてしまったりします)
[追記] Twitterで指摘をもらいましたが、:after(:before)擬似要素はCSS3からの定義ではありません。ここで言いたかったのは、それらを工夫して使うことでCSS3の力が増し、CSSのみで複雑なデザインが実現できる、ということでした。:after(:before)擬似要素がCSS3だと勘違いされる人がいるかもしれないので追記しておきます。

iPhone4の対応で画像サイズがーという悩みを解消できることを考えると、色々とテンプレートとして作ってみるのも面白いのではないでしょうか。
ぜひぜひみなさんも色々なデザインを、少数構成で実現できるように挑戦してみてください。

ちなみにこのサンプルは、自分で作ったCSS3ジェネレーターでグラデーションを調整しながら作りました。よかったら使ってみてください。

よくありそうなデザインのサイトのテンプレート2種

2008年2月20日 22:39

初めてテンプレートっぽいものを作ってみました。
といっても、どういうテンプレートがいいのかわからなかったので、デザインこみでテンプレート化してみました。n

コンセプトとかは下に書いてあります。n

よくありそうなサイトのテンプレートサンプル01


サンプルを表示

よくありそうなサイトのテンプレートサンプル02


サンプルを表示

画像を見てもらえば分かると思いますが、レイアウト以外に結構画像なんかを使ってます。
ロゴマークなんかは画像をさしかえればいいと思いますが、レイアウトに関係してしまっている画像についてはダウンロードされた画像と同じサイズで新しいものを作成するか、CSS も込みで変更してください。n

ちなみに完全フリーですのでいくら改編してもらっても構いません。
また不具合やリクエストなどあればコメントで書いてもらえれば検討します。n

・・てか、画像なんかを入れないテンプレート(レイアウトのみとか)のほうが使いやすかったりするんですかね?
とりあえず形のあるものを使って、そこから徐々に修正していく、みたいな感じのものとして作成しました。n

もし、レイアウトだけのシンプルなテンプレートのほうがいいよ! とか、
こういうテンプレートがほしいんだけど! みたいなリクエストがあればコメントでお寄せください。
出来る限り対応したいと思いますwn

1