gihyo.jpサイトのロゴ

週刊Webテク通信

2010年8月第5週号1位は、CSS3のメディアクエリを使った実例、気になるネタは、iPad向け電子雑誌を雑誌定期購読者に無料提供へ

2010-09-02

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2010年8月23日～8月29日の間に見つけた記事のベスト5です。

1. Think Vitamin » Getting Started With (and Gotchas of) CSS Media Querieshttp://thinkvitamin.com/design/getting-started-and-gotchas-of-css-media-queries/

CSS3のメディアクエリを使った実例を作るチュートリアル記事です。

iPadのメールアプリは、左側にメールの一覧、右側で本文を読める2ペイン表示になっています。この左側の一覧は、横画面の時には常に表示されているのですが、縦画面にするとボタンで表示／非表示を切り替えられるようになります。

メールアプリ以外でもこのデザインパターンを採用したアプリは多いのですが、これと同様のことをCSSとJavaScript（jQuery）で実現する方法をこの記事で学ぶことができます。

CSSで「max-width: 800px」のときにはナビゲーション部分の位置を変更して非表示に設定し、jQueryを使ってボタンを押すごとにナビゲーション部分の表示／非表示を切り替えるという仕組みでした。意外に簡単に実現できるんですね。

デモはパソコンでも確認することができます。ウィンドウの横幅を小さくするとメニュー部分が非表示になり、メニューボタンが出現します。

図1　CSS3のメディアクエリのチュートリアル
図1　CSS3のメディアクエリのチュートリアル

2. Free Wireframing Kits, UI Design Kits, PDFs and Resources - Smashing Magazinehttp://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/

ワイヤーフレームの作成に役立つ素材、UI（ユーザーインターフェイス）デザイン用の素材、ワイヤーフレームの関連情報などを大量に紹介したリンク集です。

iPhone、iPad、AndroidのためのUI素材やフレームワーク用素材が目立ちます。

  • モバイルデバイス用UIのPSD素材
  • ソーシャルネットワークサービス用UIのPSD素材集
  • ワイヤーフレーム用素材集
  • ワイヤーフレームに関する役立つ記事
  • ワイヤーフレーム関連情報、ショーケース、まとめ記事

が紹介されています。

図2　ワイヤーフレーム関連の素材集
図2　ワイヤーフレーム関連の素材集

3. 35 Best Free Chrome Extensions for Web Developers | Web Resources | WebAppershttp://www.webappers.com/2010/08/25/35-best-free-chrome-extensions-for-web-developers/

WebデベロッパーのためのGoogle Chrome用エクステンションを紹介した記事です。

FirefoxでおなじみのFirebugもWeb DeveloperもChrome版が存在しています（FirebugはLite版ですが⁠）⁠。Safariと同様に標準で開発者用ツールも用意されていますし、Web制作者用のブラウザとして確かに魅力的ですね。

図3　WebデベロッパーのためのChrome用エクステンション集
図3　WebデベロッパーのためのChrome用エクステンション集

4. 40 Elegant Free CSS/(X)HTML Templates from 2010 - Noupe Design Bloghttp://www.noupe.com/how-tos/40-elegent-free-css-x-html-templates-from-2010.html

フリーのCSS／(X)HTMLテンプレートを40個紹介しています。

いくつかのテンプレート配布サイトから、優れたデザインのものをピックアップしているようです。

図4　フリーのCSS／(X)HTMLテンプレートいろいろ
図4　フリーのCSS／(X)HTMLテンプレートいろいろ

5. A Showcase of Single Page Websites | Webdesigner Depothttp://www.webdesignerdepot.com/2010/08/a-showcase-of-single-page-websites/

1ページ完結型Webサイトのショーケースです。使いやすく、センスがあり、1ページ完結型の利点を活かしたサイトを揃えています。

図5　1ページ完結型Webサイトのショーケース
図5　1ページ完結型Webサイトのショーケース

そのほか先週の記事から、Google関連の気になるニュースと記事を紹介します。

先週の気になるWebサービス

45 Free Applications For Designers And Developers - Noupe Design Bloghttp://www.noupe.com/tools/45-free-applications-for-designers-and-developers.html

今週はWebサービスだけではなく、Webデザイナー／デベロッパーに役立つWebサービスやアプリケーションを多数紹介した記事を取り上げたいと思います。

「45 Free Applications For Designers And Developers」では、エディタ／FTP／画像編集／ベクター画像編集／カラーパレット／3D／タイポグラフィ／その他のカテゴリに分けて、45個のアプリケーションを紹介しています。

Mac／Windows／LinuxのアプリケーションとWebサービスに加え、iPhone/iPadアプリとAndroidアプリも一緒に紹介されています。iPhone/iPadやAndroidも、Web制作の作業に使えるようになってきたということでしょう。

図6　Webデザイナー／デベロッパーに役立ついろいろなアプリケーション
図6　Webデザイナー／デベロッパーに役立ついろいろなアプリケーション

おすすめ記事

記事・ニュース一覧