週刊Webテク通信

2012年9月第4週号1位は、レスポンシブな画像やビデオの扱い方、気になるネタは、iOS 6の隠れた目玉機能アクセスガイド

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

1. Rundown of Handling Flexible Media | CSS-Trickshttp://css-tricks.com/rundown-of-handling-flexible-media/

レスポンシブな画像やビデオの扱い方について解説した記事です。レスポンシブWebデザインで、画像や動画を扱う際の参考になります。

画像の場合は、CSSでmax-widthを100%、高さをautoにすれば基本的にOKです。これで、カラム幅より小さい場合はオリジナルサイズで表示され、画像幅よりカラム幅が小さくなったときはカラムと同じ横サイズになるよう縮小されます。

YouTubeやVimeoにアップした動画を<iframe>で埋め込む場合、縦横比を保ったままリサイズするには裏技的なCSSの設定をする必要があるので、そのコードが紹介されています。

図1 レスポンシブなメディアの扱い方について
図1 レスポンシブなメディアの扱い方について

2. 20 New jQuery Plugins Worth Taking a Look at - Speckyboy Design Magazinehttp://speckyboy.com/2012/09/17/20-new-jquery-plugins-worth-taking-a-look-at/

最近の新しいjQueryプラグインを各種紹介しています。レスポンシブなスライダーやレンガ状にレイアウトを組むものなど、最近のトレンドに沿ったものが数多く掲載されています。

CSS3のイメージフィルターを利用し、JavaScriptで画像をミニチュア風にするtiltShift.jsは、最近話題になっていました。

図2 jQueryプラグインいろいろ
図2 jQueryプラグインいろいろ

3. Big Menus, Small Screens: Responsive, Multi-Level Navigation | Webdesigntuts+http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/

階層を持ったナビゲーションメニューをレスポンシブ対応させるチュートリアル記事です。通常はドロップダウンする水平メニューが、スマートフォンサイズだと階層を持った垂直メニューになります。

図3 レスポンシブな階層構造のナビゲーションの作り方
図3 レスポンシブな階層構造のナビゲーションの作り方

4. Design Killer Mobile App Websites: Tips And Exampleshttp://www.hongkiat.com/blog/design-mobile-app-sites/

モバイルアプリの宣伝をするサイトをデザインするためのTipsとサンプルを紹介した記事です。

  • モバイル端末の画面ショット
  • アプリの配布しているストア(App Store、Google Playなど)のバッジ画像
  • 機能と詳細
  • カラフルなイラスト

などが必要といったTipsと、実際のサイトのギャラリーが掲載されています。

図4 モバイルアプリの公式サイトをデザインするためのテクニック
図4 モバイルアプリの公式サイトをデザインするためのテクニック

5. DESIGN ARCHIVE - BLOG: 細かすぎて伝わりづらい! iOS 6のデザイン変更点まとめ。http://stam-design-stam.blogspot.jp/2012/09/ios-6.html

iOS 5と6のアイコンなどのデザインの、細部の違いについてまとめて考察した記事です。

iOSやMac OSのバージョンアップとともにデザインが変更されたところに注目すると、今後のデザインのトレンドが見えてくるようですね。

図5 iOS 6のデザイン変更点のまとめ
図5 iOS 6のデザイン変更点のまとめ

そのほか、最近の記事の中から、レスポンシブWebデザインのベースになるものを紹介します。

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

CSS3 Generators to Speed up Your Design! | Web development blog, news and tutorials - Developer Drivehttp://www.developerdrive.com/2012/09/css3-generators-to-speed-up-your-design/

今回は、CSS3関連のジェネレーターを各種紹介したページを取り上げます。

  • グラデーション、角丸、ボックスシャドウなどCSS3の新機能を設定できるもの
  • レイアウトを作成するもの
  • ボタンを作成するもの
  • 背景画像のパターンを作成するもの

が紹介されています。

図6 CSS3のジェネレーターいろいろ
図6 CSS3のジェネレーターいろいろ

おすすめ記事

記事・ニュース一覧