流行期を過ぎたレスポンシブ・Webデザインのこれから
ちょうど1年前に私が書いた記事（スマホ対応の新潮流「レスポンシブ・Webデザイン」とは？）を皮きりに、日本のWebメディアやブログでも「レスポンシブ・Webデザイン」が話題になっている。みなさんも一度はレスポンシブ・Webデザインについて聞いた、あるいは記事を目にしたことがあるのではないだろうか？ スマートフォン向けのWebサイトを提供する上で、レスポンシブ・Webデザインは有効な手段だという認識が海外で広がっているが、日本では「流行」「夢の世界」「現実的ではない」などと誤解している方が多いようだ。誤解を生む背景には、レスポンシブ・Webデザインの定義を勘違いしていたり、深く理解せずに言葉遊びとして捉えていたりする傾向があるように思う。 そこで、あらためてレスポンシブ ・Webデザインのメリットと今後の動向について紹介する。 レスポンシブ・Webデザインとは？ レスポンシブ・Webデザイン
レスポンシブWebデザインのメリット／デメリットをできるだけ中立的に検証してみた | A40
昨年は多くのレスポンシブWebデザインのサイトがリリースされましたが、現状でもさまざまな試行錯誤が続けられている状態で、賛否両論もあるのも事実です。そうした議論を見ていると、検討が十分でないものも見受けられます。 そこで、レスポンシブWebデザインのメリット／デメリットについて、可能な限り中立的に整理したいと思います。 レスポンシブWebデザインでしか実現できないメリット メリット1 ユーザーエージェントを判別せずに見た目を調整できる ユーザーエージェントを利用しないことは、レスポンシブWebデザインのメリットとして、よく挙げられます。さまざまな画面サイズのスマートフォンやタブレットが登場し、ユーザーエージェントの判別ではあらゆるデバイスの画面サイズへの対応は困難になっています。 画面サイズのみでレイアウトを切り替えるレスポンシブWebデザインは、そのような問題を解決する手法と言えます。
Responsive Design with CSS3 Media Queries - Web Designer Wall
Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn’t work any more. Web design needs to be adaptive. The layout needs to be automatically adjusted
MediaQuery まとめ - IT戦記
Media Query とは CSS3 から導入される Media Type を大幅に拡張する仕様です。 そもそも Media Type とは Media Type とは CSS 2 系に元々ある仕様で CSS を適用するメディア（パソコンの画面、テレビ、プリンタ用紙など）を指定するときに使います。 以下の例だと、 media 属性の中に記述されている all や screen や print が Media Type です。 <link rel="stylesheet" type="text/css" href="共通の.css" media="all" /> <link rel="stylesheet" type="text/css" href="パソコンの画面の.css" media="screen" /> <link rel="stylesheet" type="text/css"
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
スマートフォン、タブレット、デスクトップのためにレイアウトの幅をどのように設計すればよいか
iPhoneやAndroidなどのスマートフォン、「新しいiPad」などのタブレット、そしてデスクトップなど、さまざまなデバイスの幅に対応させるResponsive Web Designのために、どのようにレイアウトの幅を設計し、いくつレイアウトを用意するのか3つの方法を紹介します。 各デバイスの幅は、2012年3月のデータです。 A Simple Device Diagram for Responsive Design Planning [ad#ad-2] 下記は各ポイントを意訳したものです。 キャプチャに使用している画像は元記事よりPSDファイルでダウンロードできます。 各デバイスのサイズ レイアウトを3つ レイアウトを4つ レイアウトを6つ 各デバイスのサイズ まずは、2012年3月現在の各デバイスの幅です。 ※クリックで拡大 ポイント 上段：ポートレイト（縦置き）、下段：ランドスケ
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
video要素、audio要素をJavaScriptから操作する－HTML5のAPI、および、関連仕様
※このページでは、video要素、audio要素をJavaScriptから操作する方法について紹介しています。 単純に<video>タグや<audio>タグの使い方を知りたい方は、 以下のページなどをご確認ください。 <video>タグで動画を埋め込む <video> …… 動画を再生する <audio> …… 音声を再生する ■video要素、audio要素をJavaScriptから操作 HTML5では、video要素、audio要素をJavaScriptから操作するためのメソッド・プロパティ・イベントが用意されています。 これらのメソッド・プロパティ・イベントを使用することで、 JavaScriptから動画・音声などのメディアリソースの状態を参照したり、 読み込み・再生・一時停止・再生可能かどうかの確認などの操作が可能となります。 <video>タグのcontrols属性を指定すると、
HTML5サンプル集 | 株式会社あゆた
会社ブログ「あゆたジャーナル」始めました。 [新着情報]あゆたジャーナルにてHTML5の開発ツール「Adobe Edge Animate」の入門記事を掲載しました。 このページでは、HTML5のAPIを利用した簡単なサンプルを公開しています。このサンプルの多くは、2010年度まで弊社技術顧問を担当していただいた白石氏がマイコミジャー ナルに寄稿した記事で使用したプログラムを元に、多少の改変を加えたものです。どれも非常にシンプルなものではありますが、HTML5の各 機能を試すためのとっかかりとしてご利用頂けると思います。 白石氏が寄稿した記事はこちらになります。これらの記事と合わせてサンプルをご利用になって頂く事で、各機能の理解がより深まることでしょう。 詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 アプ
『video要素』超基本を知る!! | HTML5でサイトをつくろう
video要素について 今回はHTML5新要素の中でも注目度が高い｢video要素｣の基本的な記述方法をご紹介します。 video要素はFlashなどのプラグインを使用することなく動画をウェブ・ページに表示することができます。ですが、IEが8まで対応していないことなどから動画コンテンツはまだまだFlashを使ったものが多いように感じます。今後ブラウザの対応が進めば、video要素を使った面白い動画コンテンツがドンドン出てくると思いますので、その時にコンテンツ制作に関わったりアイデアを出せるように今から少しずつ学んでいこうと思います。 video要素の再生とブラウザ表示 video要素をただ再生するにはsrc属性に再生する動画ファイルを指定するだけです。試しにsrc属性にMP4形式のファイルを指定しブラウザでの表示確認をしてみます。また、controls属性を指定することで再生・停止ボタンな
FirefoxのHTML5『video』タグの落とし穴？ | f:factory
イラスト・写真の制作工場『F:FACTORY』。備忘録 今更ながらHTML5のvideoタグなんですが、 ここで躓いてしまったので、忘れないようにメモ。 Google先生に HTML5 VIDEO で検索すると、埋め込みの際の注意事項的なものがすぐ見つかると思います。 それを参考にするといいでしょう…ごめんなさい… 簡単に説明するとHTML5ではプラグインを使わなくても動画をWEBに表示するとこができます。 再生ボタンや停止ボタンなどのインターフェースも表示したりできる優れものなんですよね。 ※HTML5対応のブラウザでのみ可能です。 ソースにこれを書くだけでいいんです…が….mp4が対応されていないブラウザももちろんあるので ※ご利用のブラウザでは再生することができません。 と、それぞれのブラウザに対応した動画形式を準備してsource要素に振り分けます。 これだけでブラウザが対応してい
HTML5のVIDEOタグ使用の注意点など / Maka-Veli .com
※模索して行った物なのでミスリードの可能性がありますのでご注意下さい。 なかなか動かなくてハマリました・・・動画やっぱこわい。。 タグ自体はシンプルなんですが、ブラウザ対応の動画形式が違うんですね。 何が面倒って、その動画形式や対応状況などを加味して用意するのが面倒でした。 用意する動画は mp4 ： Chrome・Safari・IE9 ogv ： Firefox・Opera webm ： Chrome・Opera という具合。 更に、もちろんHTML5をサポートしていないブラウザも有り。 動画の変換ですが、僕はこのツールを使いました。 XMedia Recorde http://www.forest.impress.co.jp/lib/pic/video/vdoenc/xmediarecode.html (窓の社） 読み込んで形式を選択してエンコードボタンをクリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.smph.info/
html5-memo.com