• かちびと.net

    グリッドレイアウトを意識したレスポンシブWebデザインをSass/Compassを使って構築する為のサンプルがなかなか良かったのでご紹介。こういうのどんどん増えていきそうですね。

    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

グリッドレイアウトを意識したレスポンシブWebデザインをSass/Compassを使って構築する為のサンプル

スポンサーリンク

なかなか珍しかったので備忘録。個人的
にも注目しているMedia Queryを使った
レスポンシブWebデザインの構築を、
Sassをサポートしたcssフレームワーク、
Compassを使って行える、というサンプル。

完成度も高めなサンプルなのでCompassを使用しなくてもちょっとソースに目を通しておくといいかもですよ。modernizrを使用してIEにも対応させています。CompassはMoongiftさんの記事をご参照ください。css書くのがちょっと楽になる的なやつです。

Responsive Web Design Using Compass


サンプルです。HTML5で構築。既にMedia Queryを使ったレスポンシブWebデザイン設計は整のえてあります。

では表示を、先日超おすすめしたResponsivepxで確認します。

320px幅


320px。iPhone等はこの表示になります。レイアウトも綺麗に保たれています。

768px幅


768pxはiPadの幅と同等です。

1050px幅


1050px幅でも問題なく綺麗なレイアウトです。

IE


IEでの表示。

これに加えてSass/Compassが使えるようにされている、というサンプルコード。IEにも対応させたりと至れり尽くせりですな・・以下は説明とgithubへのリンクです。

Responsive Web Design Using Compass / Github

URL :
TRB :

Comments & Trackbacks (2)

Twitter

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

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

twitter facebook rss contact

Ads

Posts

Contact

Services