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

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

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

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

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

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

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

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

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

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

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

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

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

Kube Framework
レスポンシブなWebデザインのベースとなるCSSフレームワークです
クリーンなデザインのレスポンシブWebデザイン対応WordPressテーマ・Murmur - かちびと.net
シンプルで綺麗なレスポンシブ対応のWordPressテーマの紹介です

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

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

が紹介されています。

iOS 6の隠れた目玉機能として、一部で盛り上がっているのが「アクセスガイド」です。特定のアプリを立ち上げた状態でアクセスガイドをオンにすると、ホームボタンでホーム画面に戻ったり電源を切ったりができなくなります。

アクセシビリティに関する機能のようですが、専用端末としてiPadを使う用途に利用されることが多そうです。この機能により、たとえばiPadをキオスク端末として店頭に置いておく際に、ホームボタンが押されないようにケースに入れたりする必要がなくなります。

また、子どものいる人ならピンと来ると思うのですが、iPhoneを小さい子どもに使わせるときに、勝手に電話をかけたりアプリを消してしまったりされる心配がなくなりますね。

設定したパスコードが分からないとアクセスガイドのモードから抜けられないのですが、人のiPhoneに勝手にアクセスガイドを設定するイタズラが流行らないといいなと思います。