- ベストアンサー
レスポンシブWebデザイン習得へのステップ
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
この世界時の流れが速すぎて ⇒HTML5が持つ本当の意味( http://www.atmarkit.co.jp/news/200801/25/html.html ) この記事が2008/01/25ですからね。 HTML5は、今からでも使えますが後方互換や古いＩＥがしぶとく使われている現状からHTML4.01strictを復習しておくほうが良いでしょう。XHTML1.0strict/XHTML1.1でも良いでしょう。必ずstrictであること。 1. HTML5+CSS3の基礎 ということは、HTML4.01strictとCSS2.1 2.具体的な方法は、 レスポンシブwebデザイン PC背景とスマホ背景変 - Webデザイン・CSS - 教えて！goo( http://okwave.jp/qa/q8042818.html ) に書きましたが、 基本1) ページはリキッドで作成する 基本2) floatは使わず絶対配置 基本3) 背景画像(内容と関係ない画像)はサイズが変わっても支障のないもの 基本4) コンテンツとして意味のある画像や、一部が切れてはまずい画像(背景も含む)は、imgでマークアップし、display:blockとして、親コンテナブロックのサイズを参照して伸縮させる。 基本5) スマホなどモダンブラウザにはmediaqueryでスタイルシートを切り替える。
関連するQ&A
- レスポンシブに出来るデザインと出来ないデザイン
レスポンシブに出来るデザインと出来ないデザインがあると聞いたのですが、 具体的にどんなデザインだと出来ないという情報が無いのですがどんなデザインは出来ないのでしょうか？ スマホがワンカラムなのでワンカラムに出来ないサイトは出来ないということでしょうか？ 380px以上でワンカラムに出来ればどんなデザインも大丈夫なのでしょうか？ またスマホやタブレット用のサイズのときはGVを下に持っていくなどそれようのUIに変形するように実務ではすべきなのでしょうか？ それともPCと同じ順番でもよいのでしょうか？ また賛否両論でこれからWEBクリエイターを目指す者がこちらを習得すべきなのでしょうか？ それともそれぞれの端末ごとの作成を習得した方がよほどよいのでしょうか？
- ベストアンサー
- CSS
- レスポンシブwebデザインをIEに対応させる方法
レスポンシブwebデザインのIEへの対応について質問です。 XHTMLで作成したHPをメディアクエリを使用して、レスポンシブwebデザインにしたのですが、 IE8以下で全くCSSを読み込みません。 いくつかのHPを見て、header内に <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> を記述しているのですが、それでもうまくいきません。 CSSは外部ファイルで読み込ませてあり、 <link rel="stylesheet" media="only screen and (min-width: 481px)" href="style.css" /> このような形で記述してあります。ですので、 http://www.imaginationdesign.jp/blog/html5css3/1592/ これとも違うようですし、原因がわかりません。 どなたか原因がお分かりになられる方おりますでしょうか？
- 締切済み
- CSS
- レスポンシブwebデザインでのIE対応について
レスポンシブwebデザインでサイト制作する際、CSSのIE対応はどこまでやるべきか悩んでいます。 お詳しい方々、是非アドバイスをお願いします。 現状の対応としては・・・ IE9 → 他ブラウザ同様にレスポンシブ対応 IE8 → レスポンシブ非対応・IE専用CSS（PCサイズ版）を適用 IE7 → 完全無視 （IE7はttp://www.ajike.co.jp/2012/08/browse_share201207/やその他複数のデータを基に、完全無視で問題ないと判断しました） としております。 そこで作っていてふと想ったのですが、タブレット端末やスマートフォン端末では実質的にIEではなくなるので、結局IE9をレスポンシブ対応させる意味がないのではないか？ なら、IE8と同様にIE用のCSSを適用させるだけで良いのではないか？ と想ったのですが、どうなんでしょうか？ ここはやはり将来性を鑑みてIE9は現状のままレスポンシブ対応させておくべきなのか・・・ それともIEは9だろうと8だろうと一括でIE専用CSSを適用させてレスポンシブ対応させないのか・・・ 初心者の私にはIE用のCSSですら恐ろしくめんどくさいというか難しく、IE9をレスポンシブ対応させるだけでも四苦八苦しております。。。 いったいどうしたら良いでしょうか？ 是非ぜひ、ご教授願います。
- ベストアンサー
- CSS
- レスポンシブWebとjQuery Mobile
WebDesigning誌のバックナンバーを追って 独学しています。 別の号の特集でそれぞれ レスポンシブWebデザインとjQuery Mobileが 出てきたのですが、 レスポンシブWebデザインは端末によって 違うCSSを適用させてレイアウトを 変えるので、スマートフォン向けにすることも できるということだと思うのですが、 jQuery Mobileもスマートフォン向けのようで、 ２つのやり方を、どう使い分けたらよいのか わかりませんでした。 それぞれが、どのような用途に適しているのか 教えてください。
- ベストアンサー
- その他（プログラミング・開発）
- レスポンシブwebデザインでユーザに選択肢を与える
解像度別でスタイルが自動適用されるレスポンシブwebデザインについて、詳しい方へお伺いいたします。 例： http://www.webdesignerwall.com/demo/media-queries/ ※上の参考URLは違いますが、Media QueriesはjQuery Media Queries Plugin利用利用・W3C準拠前提。別の方法があればその方法も知りたいです。 端末別に4種類ほどデザインを用意した場合で、 例 http://mediaqueri.es/ ・携帯ユーザが最初にアクセスした時自動適用されたのが携帯用デザインで、 ・しかし携帯ユーザがその端末でく別サイズ用デザインを望んだとき、 ・携帯端末でも任意にCSSを選ぶことができ、 ・一度選んだら画面遷移後もPCサイズのCSSを適用 とすることはできるのでしょうか。 できるとしたら、そのためにはどのような方法（Javascript/Plugin）があるでしょうか。 そのようなサイトがあれば、参考URLも教えて頂けますと幸いです。 よろしくお願いいたします。
- 締切済み
- CSS
- XHTML、CSS、Javascriptのコードデザインに関する本・W
XHTML、CSS、Javascriptのコードデザインに関する本・Web ごく基礎的なXHTML、CSS、JavaScriptについて勉強したのですが、 より実用的な準初心者向けな情報を探しています。 CSSで実現すべきかJavaScriptで実現すべきか迷ったりしてます。 また作成過程においても Javascriptでダイナミックにテキストなどのコンテンツを表示させていると、 そのコンテンツに対するCSSの適用やJavascriptの適用は難しくどのように 設計しているのかなども知りたいです。 静的ではないので、出力結果ごとに画面イメージを書いていく感じかな・・・と想像していますが。。 ケースバイケースの部分は多いかと思いますがそれでも、定石と言われるような 手法・ポイントはあると思いますので少しでも合理的な手法を学びたいなぁと 思っています。 よろしくお願いします
- ベストアンサー
- HTML
- 素人がWebデザイン/制作をするのにお勧め書籍ありますか？
素人がWebデザイン/制作をするのにお勧め書籍ありますか？ 会社のWebサイトをリニューアルしたいと考えています。小さいところなので、外注できる予算はまったくなく、自分たちでやらねばならない状況で、それまでビルダーやFront Page、Wordなどで作ってきましたが、やはり素人臭さが抜けないのと、おぞましいソースになってしまうので、アクセシビリティの面から考えてXHTML+CSSで作り直したいと考えています。 プロはおそらくイラレやフォトショでデザインを作って、そこからコーディングしていく形でサイトをデザイン、構築していく流れになろうかと思いますが、この一連の流れを勉強できるお勧め本（テキスト）があれば教えていただきたいです。XHTML+CSSだけ、イラレだけ、フォトショだけ、ならそれぞれたくさんの書籍が発行されてると思うのですが、「サイトを作り上げる」という観点で書かれた本ないかなぁ、と思ったしだいです。 現在持っているのはソシム社の「HTML/XHTML＆スタイルシート レッスンブック」だけで、イラレやフォトショ関連の本はまだ持っていません。同じくソシム社の「DTPデザイナー&グラフィックデザイナーのためのDreamweaver Webデザイン練習帳 改訂版」がいいのかなと思いましたが、Amazonのレビューの書き込みがなかったこともあり、質問させていただきました。 AdobeのCS4デザインプレミアムを持っているので、DWが加わっても大丈夫です。 ちなみに当方のスキルは昔HTMLだけでホームページを作成し、ビルダーでもちょこちょこ作っていたのでその辺のことはわかります。イラレ・フォトショ・DWはイーラーニングで一通り学びはしましたが、あまり身についていない感じがしています。特に、デザインされたものをコーディングしていくのってどうするんだろう・・・？というレベルです。 webデザイン、サイト制作関連でお仕事されている方、教育機関などで関連の講座を担当されている方、同じく勉強中の方、広くご意見いただけるとうれしいです。よろしくお願いいたします。
- ベストアンサー
- デザイナー・クリエイティブ職
- レスポンシブｗebデザインでの画像表示について
私はサイト制作初心者なんですが、なんとかレスポンシブｗebデザインでのサイトを作っています。 そこで、画像の表示方法について悩んでいたので、アドバイスをお願いします。 今現状やっていた画像表示処理は・・・ ＜パターンA＞ １つの大きな画像を％で縮小させ、あくまで１枚だけで全サイズに対応する というものです。 ところが最近、ネットでたくさんのプロの方々のブログを拝見していると、どうやらRetinaディスプレイに対応した画像は必須なんじゃないか？となり、悩んでおります。 もしRetinaディスプレイに対応した画像の場合は、表示サイズの倍サイズで作ったものを縮小して表示させなければいけないため、重くなるのは必定。 となると、さすがにパターンAでは厳しいと思い下記のパターンBを検討しています。 ＜パターンB＞ １つの画像につき ・PCディスプレイ用画像 （・タブレット・高解像度スマホ用画像） ・通常スマホの縦向用画像 の、２つないしは３つのサイズ別で対応する そこで、もしこのパターンBで画像を表示する際は、一体どのような変換方法を使うのが現在では適切なのでしょうか？ 初心者なりに調べてみたりして考えていたのが↓ (1)htmlに画像を入れ、それをjQueryで横幅サイズ毎に表示される画像を変える (2)htmlには画像を入れず、横幅サイズ毎に読み込ませるcssファイルで、divなりなんなりのbackground-imageとしてそれぞれの画像を表示する でした。 個人的には余計なjQueryを使いたくないため、初心者なりに考えてみた結果(2)に行き着いたんですが、そもそも(2)での画像表示は、どうなんでしょうか？ どなたかお詳しい方、レスポンシブｗebデザインでの画像表示方法について、アドバイスをください。 よろしくお願いいたします。
- ベストアンサー
- CSS
- 仕事でウェブデザインをしています。ウェブデザインといっても、学校に通っ
仕事でウェブデザインをしています。ウェブデザインといっても、学校に通っていたわけでもなく、会社のサイトを立ち上げるために独学で学び、現在に至ります。なので、デザインもコーディングも一人で独学でやっております。 現在、xhtml+cssは完璧に習得し、photoshopで自由に作りこんだデザインをサイトに作り上げることは問題ありません。が、新しく業界サイトを立ち上げることとなり、Wordpress（3.ｘ）を導入するにいたりました。 海外のテンプレート等もダウンロードしてみたりしましたが、無料のテンプレートはかゆいところに手が届いておらず、かといってカスタマイズするにもphpの知識がないためによくわからない、といった状況です。そのため、独自でテンプレートを作成すべく、現在取組中なのですが、やはり「何が何やらさっぱり…」という状況です。 現在持っている書籍は「Wordpressレッスンブック」「PHPにWordpressカスタマイズブック」「jQueryデザイン入門」です。 私のように、「どっかの会社の分担化されたプログラマーやデザイナーではなく、一人でゼロから構築しなくてはいけない、かつ初心者にもわかりやすく習得できるための」プログラム本を探しています。 基本、Wordpressを中心に、マニアックなプログラムとかではなく、Wordpressを自由に使いこなすことができるようになるために必要な本が欲しいのです。 上記の本は基礎本ですが、私が知りたい情報が網羅されているわけではなく…かつ、インターネットの情報も「phpがわかるのが前提」という感じで説明されているので、結局情報がつかみきれません。 ちなみに、新規サイトでやりたいことは ・会員専用ページを設ける ・トップページをブログ形式で作るのではなく、投稿した情報を集めて表示させるような感じ（→参考URL http://deluxethemes.com/comfy/) ・会員は自分でIDとパスワードが作れて登録できるようにする ことです。 とくに、機能的にはhttp://deluxethemes.com/comfy/のサイトが理想的で、featured topicsがランダムに表示されたり、カテゴリの表示がメイン部分に組み込めたり、ということをしたいです。 これらを網羅したサイトを作るには、どんな知識が必要なのでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- ホームページビルダー１２とＷＥＢ標準技術
以前、ホームページビルダー１２とドリームウィーバーＣＳ３のどちらを買うべきか、という趣旨の質問をさせていただきましたところ、ビルダー派の方から、「ＨＴＭＬやＣＳＳなどのＷＥＢの基本を覚えておくと後から本当の便利ですので、覚えておくことをオススメします！」という答えが返ってきました。 ホームページビルダー１２を使う上で、ＨＴＭＬやＣＳＳ、あるいはＸＨＴＭＬ等のＷＥＢの基礎知識を知っておくことは意味のあることなのでしょうか？ （それを知っておくことによって、今までより見栄えのするデザインができたりと、今までのビルダー１２の使い方より一段上を行く使い方ができるのでしょうか） ＨＴＭＬやＣＳＳ等、一晩で習得できるほど簡単そうなものには見えないので、勉強しようかどうか迷っています。 ビルダー１２を使う上で、ＷＥＢの基礎知識を覚えることがどれくらい意味のあることなのか、どれくらいの成果が自分に返ってくるのか、教えてください。
- ベストアンサー
- ホームページ作成ソフト
お礼
ご丁寧に回答をいただき、ありがとうございます。 まず。@ITの記事自体が非常に興味深いものでした。 そして、ご指摘のように、私が実務で制作するウェブ・ページの対象者は、 そのような環境を使われている可能性の高い層で、 HTMLのバージョンは、そういったものを中心に考えることを心がけたいと思います。 漠然と、レスポンシブWebデザインをするためには HTML5+CSS3でなければならない、という解釈をしていました。 具体的な方法として挙げていただいた点は ひとつづつ確認し学んでいきたいと思います。