『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
2012年、Webの新たなトレンドとして注目された手法の一つに「レスポンシブWebデザイン」が挙げられると思います。 2010年に誕生して以降、知名度としては業界に広く一般的になりつつあるこの手法、実際に多くの企業様からもこの手法を加味したWebサイトの構築を検討したいとご相談いただくことが増えています。 本コラムでは、トレンドになりつつあるこの手法について、キーワードとして聞いた事はあり興味もあるが、実際に何が有益で自社に置き換えた際にメリットが出るものなのかどうか釈然としない・・といった方向けに、比較的分かり易くメリットデメリットをお伝えできればと思います。 レスポンシブWebデザインとは そもそも、レスポンシブWebデザインとは何か? 昨今PC、スマートフォン、タブレットPC、はたまたその他サイネージなど数多くのデバイスが登場している事を背景に、端末毎に合わせたページを作成するのでは
こんにちは、コプロシステムWebデザイングループの石川です。 このTips*Blogでも今まで何回か取り上げてきた「レスポンシブWebデザイン」というテーマですが、 今回のエントリーでは、そのメリット・デメリットについてまとめてみました。 Web関係の仕事を生業としている方にとってはいまさら感のある話題なのは承知の上なのですが、 Web関係の仕事に直接かかわらない人からも「レスポンシブWebデザイン」のワードを聞くことが最近多かったのと、そういう方にメリット・デメリットをちゃんと説明するためにも、わかりやすい図解入りでまとめてみました。 (今回のイラストは、我がチームの早水が担当!) 関連記事 レスポンシブwebデザインとは?(2012年1月6日エントリー) リニューアルサイト構築時に助けてもらったシリーズ ~レスポンシブWebデザインのチェックができる便利ツール~(2013年5月23日エ
2013/02/04 この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります techHTML5oldIE HTML5のタグで書いてはいけないレアケース にて、『html5shiv.jsを読み込んで・・・』みたいな記事を書いたのですが、そもそも html5shiv.js とは何でしょうか。 似たようなものの中に、html5.js, html5shim.js, html5shiv.js などが見られますが、これらの違いについても調べてみたいと思います。 html5shiv.jsってなに?html5shiv.js が読み込まれなかったとき、oldIEではどうなってしまうのかを、もう少し詳細に見てみたいと思います。 これは HTML5のタグで書いてはいけないレアケース で書いたサンプルページを、IE8の開発者ツールで見てみた時のスクリーンショットです。 <!-- do
昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン(RWD)で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました: 今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとし
レスポンシブWebデザインを考える際に、IE8以前(IE8~6)の古いブラウザについて、どのように対応するかを考えてみました。 どうすれば、手間が少なく古いブラウザへの対策ができるのか? レスポンシブWebデザインを作る際の覚書です。 制作のための前提条件 考えるにあたって、下記の条件のクリアを前提としました。 旧ブラウザはIE8~IE6を含める。 IE8~IE6でもCSS3使ったデザインを行う。 IE6でもpng画像を使用する。 デバイスはスマートフォン、タブレット、PCの3種類を想定する。 CSSはモバイルファーストを考慮にいれた記述方法とする。 日本ではまだまだWebページを見るためにIEを使う人が多いです。 デザイン面を考えるとCSS3を使っている場合、ChromeやFirefoxとIEを比べたときに見た目が変わってしまうことがあります。 その辺りの事情は、見る人にはなかなか理解し
InternetExplorerは昔かサイト制作者を悩ませ続けてきました。せっかくレスポンシブサイトを作ろうとしても、レスポンシブサイトというとセットでついてくるメディアクエリ、これにはIE8以下の下位バージョンが対応しておらず、表示は見事に崩れます。 未だ切り捨てられないIEへの対応 モバイルファーストかつレスポンシブということを思えばIE、しかも下位バージョンなら切り捨ててもいいのではないかと思いますが、様々な事情から切り捨てられないシーンもあるでしょう。以前に比べれば低くなったとは言え、特に日本ではIE8のブラウザシェアはまだまだ残っています。 そういった時のために、比較的手軽にIE向けの対応を行える方法があります。 1.「css3-mediaqueries.js」を読み込む こちらはGoogleが推奨している比較的有名なスクリプトです。html5.jsやIE9.jsなどと併用しても
ちょうど今レスポンシブWebデザインのサイトを制作しているのですが、Media Queriesで画面サイズ別にCSSを記述していくときにどのような順番で記述すればよいのか、改めて調べてみたらいろいろ迷ってしまいました。 今までいろいろなやり方を試してきたのですが、一度整理してみたいと思います。 記述方法の種類 一般的なMedia Queriesの記述の方法としては、以下のようなやり方があります。(ブレイクポイントを480px、768px、980pxとした場合の例です) 1. PCのスタイルから記述していく方法 デフォルトでPC用のスタイルを定義し、タブレット/スマートフォン用のスタイルはMedia Queriesを使って上書きしていくPCファースト的な方法です。 /* デフォルト:980px以上用(PC用)の記述 */ @media screen and (max-width: 979px
レスポンシブwebデザインでのサイトも増えていますが、技術面に関してどのくらいの認識でいるでしょうか? もしも、『いろんなデバイスに対応するために、ブラウザサイズを変えたときに可変する』くらいの認識しかなかったら、効果的ではない使い方をしてしまったり、技術的に厳しい設計をしてしまった、などの問題が出てきてしまうかもしれません。 そこで今回は、コーダー目線でかんたんなレスポンシブwebデザインを説明します。 レスポンシブwebデザイン(Responsive Web Design)とは Webサイトの閲覧環境(パソコン・iPad・iPhone・Android などのスクリーンサイズ)に応じて、ページレイアウトを動的に変更させる手法です。ブラウザーのスクリーンサイズを基準にスタイル調整することができるので、同じHTMLを使えるという利点があります。 最近のwebサイトは、多様化するデバイスに対応
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く