• かちびと.net

    iPhoneやiPadでも綺麗なレイアウトで表示されるWebサイトを制作する為のスターターキット・Skeletonのご紹介。css3のMedia Queryでレイアウトを最適化してあります。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

iPhoneやiPadでも綺麗なレイアウトで表示されるWebサイトを制作する為のスターターキット・Skeleton

スポンサーリンク

なかなかシンプルで良かったので
ご紹介。人気のデバイス、iPhone
やiPadで閲覧してもレイアウトを綺麗
に保てるように設計されたWebサイト
のスターターキット。内容物はHTML、
CSS、JavaScriptです。

シンプルな構成ですが、欲しい部分は用意してくれている、と言った感じのスターターキット。なかなか気に入ったのでデモを作りました。

Skeleton


HTML+CSSのシンプルなフレームワークです。グリッドレイアウトを使った美しいレイアウトで、Media QueryによるiPhone / iPadでのアクセス時のレイアウトも最適化されており、jQueryで作るタブコンテンツのサンプルコードもあります。

デモ作ったので、宜しければお好きなデバイスでアクセスして見てください。

Sampleサイト※別窓

iPhoneでアクセス


iPhoneでアクセス。

ランドスケープ

iPadでアクセス


iPadでアクセス。


ランドスケープ。

リセットっぽい

	<link rel="stylesheet" href="stylesheets/base.css">
	<link rel="stylesheet" href="stylesheets/skeleton.css">
	<link rel="stylesheet" href="stylesheets/layout.css">

cssは上記のように設定されています。サンプルにも書きましたが、基本的に骨組みとなるフレームワークですので、すでに設定されたMedia Query(skeleton.css)に上書きする(layout.css)形となります。layout.cssには空のMedia Queryが用意されていますのでその中に書きこめばいい、というもの。

	/* iPadポートレート時 */
	@media only screen and (min-width: 768px) and (max-width: 991px) {}

	/* Mobile */
	@media only screen and (max-width: 767px) {}

	/* Mobile ランドスケープ時 */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* 960以下の環境 */
	@media only screen and (max-width: 959px) {}

	/* iPad ポートレート時オンリー */
	@media only screen and (min-width: 768px) and (max-width: 991px) and (max-device-width: 1000px) {}

	/* Mobileオンリー */
	@media only screen and (max-width: 767px) and (max-device-width: 1000px) {}

	/* Mobileランドスケープオンリー */
	@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {}

厳密には違うかもですけど、skeleton.cssをMedia Query込みのリセットcssだと考えるとピンと来るかも知れません。と思ったけどやっぱ違うかなw

これはこれで有りかもしれないですね。ただ、サンプルファイルがh1の次にh5、みたいな感じでW3C的にはソース微妙なので、その辺は便宜変更してくださいませ。

Skeleton

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services