週刊Webテク通信

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

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

ネットで見かけた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のジェネレーターいろいろ

今週の気になるWebネタ

アクセスガイドで行こう! | akaloguehttp://akamatsu.org/aka/2012/09/23/accessguide/

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

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

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

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

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入