週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2.5 分

ネットで見かけた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デザイナー/デベロッパーに役立ついろいろなアプリケーション

今週の気になるWebネタ

メディア・パブ: 米アップルと大手雑誌社の綱引き,iPad向け電子雑誌を雑誌定期購読者に無料提供へhttp://zen.seesaa.net/article/160265938.html

紙の雑誌の定期購読者には,AppStoreで電子雑誌を無料でダウンロードできるような仕組みを,AppleがOKしたようです。

タイム社の「People」誌の定期購読者は,AppStoreで自分の定期購読番号を入力すると,「People」のiPadアプリを毎号無料でダウンロードできるとのことです。そういう仕組みをApple側が用意したということですね。

タイム社としては本当は,電子雑誌の定期購読サービスを実現したかったようです。しかし,定期購読料はタイム社に払い,電子雑誌はAppStoreからダウンロードするような仕組みはAppleから認められなかったということです。

まあ,同じ値段(しかも一冊単位で買うより格安)で,紙の雑誌も電子版も両方読めるのならいいですよね。電子版があれば紙の雑誌は心置きなく資源回収に出せますし,そうすればトイレットペーパーも手に入るし。あれ,アメリカには資源回収ってあるんですかね…?

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入