レスポンシブウェブデザインについて
- .レスポンシブウェブデザインについて
- レスポンシブウェブデザインはwebクリエーターの必須スキルであり、JQUERYのプラグインなどを使用して実現することもあります。現場では様々な方法でレスポンシブデザインを実装しています。しかし、常にパーセント指定や@メディアを使用する方法が最適かどうかは状況によります。パーセント指定は画面サイズによってデザインが崩れることがあり、画像の配置などに課題が生じることもあります。これに対して、@メディアを使用してピクセル単位でデザインを制御する方法は、画面サイズに関係なく一貫したデザインを実現することができます。適切な方法を選ぶためには、プロジェクトの要件や目的に応じた検討が必要です。
- レスポンシブウェブデザインには様々なテクニックやベストプラクティスが存在し、常に進化し続けています。今後もさらなる変化や新しい手法が現れる可能性がありますが、レスポンシブデザインの重要性は長期にわたって続くと考えられています。
- ベストアンサー
.レスポンシブウェブデザインについて
.レスポンシブウェブデザインはすでにwebクリエーターの仕事をする上でそのように作るのは当たり前なのでしょうか？ JQUERYのプラグインなどでやっているのでしょうか？ 現場ではどんな方法でやっているのでしょうか？ それともまだ不要だったり、今後消える可能性もあるのでしょうか？ その場合%ですべて指定して作るやり方と、@mediaを使ってすべてをPXでつくるやり方どれが一番仕事上良いのでしょうか？ %は計算が大変で画面のサイズが大きい場合はラッパー外の画像をたくさん表示して、小さい場合はラッパーの後ろに画像が入るようにするデザインが出来ないのでしょうか？ ラッパーを80%などにするのでしょうから、そうしたい場合小さい画面でも常に画像が同じ割合表示されてしまいますよね？ 何か良い方法はあるのでしょうか？
- CSS
- 回答数4
- ありがとう数10
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
> .レスポンシブウェブデザインはすでにwebクリエーターの仕事をする上でそのように作るのは当たり前なのでしょうか？ Webサイトの制作はビジネスですので予算によります。 レスポンシブは結構コストがかかるのでお客さん次第じゃないですかね。 ちゃんと作ってればPCサイトはタブレット、スマホで問題無く閲覧できるので 個人的にはレスポンシブは作り手の自己満足に近いと考えてます。 また、レスポンシブにすればそれだけでSEOに効果があるというのも眉唾です。 http://www.suzukikenichi.com/blog/responsive-web-design-is-not-a-ranking-factor/ 色々な事を総合的に判断してレスポンシブにするのかどうかを決定しましょう。 > その場合%ですべて指定して作るやり方と、@mediaを使ってすべてをPXでつくるやり方どれが一番仕事上良いのでしょうか？ 「%ですべて指定して作るやり方」というのは普通のリキッドデザインという事ですね。 レスポンシブとは違います。 ただのリキッドデザインでは、幅によってカラムを意図的に落としたりメニューの表示方法や位置を変えたりする事は出来ません。 @mediaで指定して、幅ごとに異なるスタイルを指定して作成したのがレスポンシブウェブデザインです。 例えば、上記サイトに挙げたサイトのサンプルを下に転記しますが、 下記の様な場合に#containerに対して%を指定するかpxを指定するかは作り手の自由です。 max-width部分はpxです。（ここが%なら何をやってるのかわからないので。） @media screen and (max-width: 1000px) { #container{ width : 95%; } } ■px指定の例 http://www.saintmedia.co.jp/corp/ ■%指定の例 https://www.chozai-ma.jp/ 勿論全体の囲みだけでなく、表示方法を変える所は幅ごとにいちいち指定を上書きする必要があります。
その他の回答 (3)
レスポンシブデザインは、閲覧者の環境にあわせ、最適な表示をするための手法の一つです。 考え方の違いで、その手法はさまざまです。 WEBの基本は、すべての閲覧者に対し、その情報を正しく伝えるというものです。 デザインとは全く異なった考え方から生まれたものなので、その辺を正しく学ぶ必要があるのでは？・・・ あらゆるデバイスに対し、閲覧者の環境に合わせ、最適な表示を行う！ この基本を理解すれば、なぜレスポンシブにするのかが、ご理解いただけるのでは？・・・
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そもそも、ラッパーってなんでしょう。 ・DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 HTML4.01仕様書 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) ・HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。 HTML5で追加された新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) ・ ⇒【問題2】文書内に埋め込まれた「意味」が不明確 HTML5が解決する、Webの“3つ”の問題とは ( http://www.atmarkit.co.jp/ait/articles/1008/30/news106_2.html ) リンク先を読まれるとわかるようにラッパーなんて文書構造はありません。 <body> <div class="header"> <div class="nav"></div> </div> <div class="secytion"> <div class="secytion"></section> <div class="secytion"> <div class="article"> <div class="header"></div> <div class="section"></div> <div class="footer"></div> </div> </section> <div class="aside"></div> <div class="nav"></div> </div> <div class="footer"></div> </body> とか・・・。ひょっとしてデザインのためにHTML書いてませんか？？？。それじゃ「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」を目的にHTMLとスタイルシート分けた意味がない。 ＞JQUERYのプラグインなどでやっているのでしょうか？ jQueryはあくまで補助です。言い方悪いが素人のクライアントに派手でインタラクティブな様子を見せて点数稼ぐため以上のものではありません。喜んでくれるので良く使いますけどね。 ＞その場合%ですべて指定して作るやり方と、@mediaを使ってすべてをPXでつくるやり方どれが一番仕事上良いのでしょうか？ 上記だと外枠は div.header,div.section,div.footer{ width:100%;min-width:630px;max-width:1000px; margin:0 auto;padding:5px; } で、480～1010pxまでは追随・・ div.header{ background:url() aqua no-repeat; background-image:cover; position:relative; } div.header h1{ margin:0;height:20px;width:100%; background-image;url(); background-size:cover; text-indent:-100em; overfow:hidden; } とか・・・。HTMLには文書しか書いてないので、別にHTML見なくても書いていけるはず。 HTMLの内容の改定も楽ですし、スタイルの全面的変更もHTML触らなくて良い。 言い換えれば、スマホ用にmediaquery使っても良いし、印刷用のスタイルシート用意しても良い。 その上で、mediaquery使って、端末の解像度でスタイルを切り替えればよいです。配置にpx使うと一番困るのが、Ctrl+＋などでフォントサイズを変えられたとき。 デザインにいくら凝っても、所詮自己満足、内容が伴わなければ誰も見に来てくれない。
- poyopoyo111
- ベストアンサー率45% (126/275)
現在、PCのアクセスよりもスマホのアクセスが5割を超えている状況にどこのホームページもなっていますので、スマホ対策が重要な課題となっています。 またスマホで知り得た情報をfacebookや電子メールで共有することも増えてきましたので、その点では連絡された相手が適切な状態で閲覧できないホームページでは困ったことになってしまいます。 このことから、最近ではホームページについてはレスポンシブウェッブデザインにて作成され、CSSはモバイルファースト、画像を％やemで指定し、pxによる絶対指定でなく記述することが好ましいと思います。 自分よりまずは利用されるお客様が大切です。 JavaScriptによってPCサイトをスマホに飛ばすケースがありますが、その逆もできず、またTOPにしか飛ばないサイトに関してGoogleは好ましくなくと表明していますので、気をつけましょう。
お礼
ありがとうございます。 つまり、@mediaを使うのではなくwidthをすべて%にしたつくりをした方が良いのですね。 ちなみに今はクロスブラウザや各端末を考えると手打ちでは信頼できないのでDWやワードプレスを使う方が仕事ではおもめられると聞いたのですが、私はDWを使っての手打ちなのですが、レスポンシブるにはどんなCSSを使うべきかなどの原理を理解して手打ちよりDWやCMSの機能を使って出来てしまえば、それで良いのでしょうか？ 時間を考えるとその方が良いのでしょうか？
関連するQ&A
- jQueryイメージギャラリーに関しての質問です。
jQueryに関して。下記URLを参考に、イメージギャラリーを設置しました。 http://www.webdesignerwall.com/demo/jquery/img-replacement.html この、大きく表示されている画像に対して、さらにリンクを設定し、画像をさらに大きく表示させられるようなjQueryプラグインはあるでしょうか。 たとえばこの画像は 550px × 400px となっていますが、さらにこの画像をクリックすることで、別に用意された倍のサイズの画像をlightbox効果を付けて表示できるような、そういったプラグインです。 また、この画像が表示されている部分に、別のHTMLファイルを表示させられるようなプラグインがあるかどうかも知りたいです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- レスポンシブWEBデザイン jsの指定について
レスポンシブWEBデザインで、PC用に指定しているjQueryプラグインを、スマホでは指定しない方法を知りたいと思っています。 例えば、640px以下はjQueryプラグインを動かさない、といった感じです。 ご教授の程、よろしくお願いします。
- ベストアンサー
- CSS
- Queryのプラグイン（jAni）を 全画面表示
背景画像をアニメーションさせるjQueryのプラグイン（jAni）を、 全画面表示にさせる方法を教えてください。 全くのjQuery初心者で、本当に困っています。 助けてください。お願いいたします。 jQueryのプラグイン (jAni)を導入したのですが、 全画面で表示させなければならなくなってしまい どうしようもなく困っています。 ＵＲＬ 背景画像をアニメーションさせるjQueryのプラグイン -jAni http://coliss.com/articles/build-websites/operation/javascript/jque... ソースの19行目と２０行目で表示の大きさを決めているところまでは分かりましたが 何をどう変えればいいか、行詰ってしまいました。 宜しくお願いいします。 １８行目 function _build(){ １９行目 element.width(settings.frameWidth); ２０行目 element.height(settings.frameHeight); ２１行目 element.css('background-position', '0 0'); ２２行目 };
- ベストアンサー
- JavaScript
- css 配置 absolute について
自身の運営するウェブサイトにて、画像の保存・転載を防止したい(完全に防ぎきれないことは重々承知しています)と考え、以下のjQueryプラグインを導入しようと試みておりますが、自らの知識では解決できない問題が生じたため、お力をお借りできればと思います。 配布元：http://davidwalsh.name/image-protector-plugin-for-jquery 参考：http://www.css-lecture.com/log/javascript/dwimageprotector.html このプラグインは画像の上に透過画像の載せることで元画像の保存等を防止するものですが、自身のウェブサイトに導入した結果、下記のページのように透過画像(分かりやすいように色付きの画像で表示しています)が元の画像からズレて表示されてしまいました。適用しているのは記事本文の最初の2枚の画像(800px×531px)と下から2枚目の画像(531px×800px)です。 http://www.disneycolors.net/blog/easter-in-newyork-2013-01.html position:absoluteを今まで使用したことがなく、この問題の原因がよくわからずにいます。解決方法についてご教授をお願い致します。
- 締切済み
- CSS
- 「jscrollPane」でテキストを認識しない
jqueryのプラグイン「jscrollPane」を使用してスクロールバーのデザインをカスタムしてます。 html上に直接記入したテキストだとちゃんと認識してスクロールバーが変更されるのですが、jquery（google APIでRSSを書き出してます）で書き出しているテキストは認識してくれません。（スクロールバーが表示されません。） 直接htmlに書いた場合とダメな場合を画像で添付しております。 ２日ぐらいいじってますが分かりません。頭がパンクしそうです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 背景画像をストレッチさせたい
背景画像をストレッチさせたい こんにちは。 1024px×768pxの画像を背景に設置し、その上にコンテンツを表示させたいです。 で、FLASHのストレッチのように、画面サイズを広げると画像も同じようにストレッチして 大きく広がるようにしたいのですが、方法がわかりません。。。 下記サイトにjQueryを使ってできますよというアナウンスをいただいたのですが 知識不足故、解決することが出来ませんでした。。 http://www.imagenow.ie/index.php どなたか、方法をご教授いただけませんでしょうか。 よろしくお願いいたします！！
- ベストアンサー
- HTML
- CSSの配置 absolute について
自身の運営するウェブサイトにて、画像の保存・転載を防止したいと考え、以下のjQueryプラグインを導入しようと試みておりますが、自らの知識では解決できない問題が生じたため、お力をお借りできればと思います。 配布元：http://davidwalsh.name/image-protector-plugin-for-jquery 参考：http://www.css-lecture.com/log/javascript/dwimageprotector.html このプラグインは画像の上に透過画像の載せることで元画像の保存等を防止するものですが、自身のウェブサイトに導入した結果、下記のページのように透過画像(分かりやすいように色付きの画像で表示しています)が元の画像からズレて表示されてしまいました。適用しているのは記事本文の最初の2枚の画像(800px×531px)と下から2枚目の画像(531px×800px)です。 http://www.disneycolors.net/blog/easter-in-newyork-2013-01.html position:absoluteを今まで使用したことがなく、この問題の原因がよくわからずにいます。 なお、abosoluteに対してtopやleftなどで位置を指定することは理解しています。このjQueryプラグンにおいても配布の段階で top: position.top, left: position.left, position: 'absolute', とcss設定されています。 また、 margin:'706px 0px 0px 410px', を加えれば私のブラウザ上では元画像の上にぴったり重なりますが、スマートフォン等で見た場合にはそうはならならいためブラウザに依存しない形で配置したいというのが質問の意図です。 absoluteであればrelativeを与えた親要素を基準に配置され、このようなブラウザによって異なる表示にはならないと理解しているのですが、imgにrelativeを与えても目的の形にできません。 解決方法についてご教授をお願い致します。 この手の質問に対して保存・転載防止はムリ、またそのような考えに対して異を唱える回答がよくなされますが、そのような回答は不要です。 今回の対策を行っても避けられる方法がいくらでもあることはわかっています。その上で、右クリックやスマートフォンの長押しによる画像の保存、それに伴う無断転載というライトユーザーの行為を防ぎたいという意図です。 また、画像保存・転載防止についての他の方法の提案も不要です。
- ベストアンサー
- CSS
- uploadifyのフラッシュのデザイン
jQueryの複数ファイルをうｐするプラグイン「uploadify」ですが、アップロードボタンがフラッシュで表示される仕様となっています。しかしそのボタンのデザインを変更したい場合、何か方法はありませんでしょうか。 ドキュメントなど見ても記載されていませんでした。ご回答お待ちしております。 http://www.uploadify.com/
- 締切済み
- JavaScript
- WordPressのプラグインとjQueryのそれ
jQueryの存在を知り、WordPressでスライド画像表示なんかが簡単に実現できることを知りました。さらには、WordPressのプラグインとして直接実装も可能なようですが、両方可能な場合、どちらを選べばよいのでしょうか？ Nivo Slider, ColorBox, FancyBoxを手始めに候補としています。 例えば、jQueryプラグインとして実装したほうが重くならない、などといった違いがあるのでしょうか？比較しつつ教えていただけると助かります。
- ベストアンサー
- ブログ
- jQueryで画像の幅と高さをリサイズする方法
jQueryでサイズが異なる画像の幅と高さをリサイズするのに、非常に困っています。 XMLもしくはJSONで複数画像をサーバーサイドから取得します。その画像の条件は、幅サイズは異なるのですが、高さは一定です。仮に高さを140pxとします。 要件を簡単に述べると、 Webサイトの画⾯幅が900pxとした場合に、画像をその幅にきっちり収まるようにしたい。（1pxや2px程度の空きがでても良い） きっちり収めるためには、画像のリサイズを行わなければならないのですが、各行毎の画像の高さは一定とする。（一行目と二行目の高さは異なってよい。） という感じになっています。 そのリサイズ方法ですが、 画⾯の横幅に取得した画像の先頭から何枚収まるか算出しなければなりません。 仮に以下のような画像の横幅とします。 1枚目:180 2枚目:240 3枚目:120 4枚目:80 5枚目:1000 6枚目:600 7枚目:300 8枚目:500 9枚目: 10枚目: ・ ・ ・ これらの画像横幅を足すと 180 + 240 + 120 + 80 + 1000 = 1620 となるため、画面幅の900を超えてしまいます。 そのため4枚目までしか画面幅に収まりません。なので4枚目までの画像幅を足します。 180 + 240 + 120 + 80 = 620 900(画面幅) ÷ 620(幅総数) x 140(画像の規定高さ) = 203(切り捨て) となり、その行に納まる4枚の画像の高さを203pxにして、それに併せて4枚の画像の幅サイズをリサイズします。 1枚目の画像の場合： 180 × (203 ÷ 140) = 261 2枚目の画像の場合： 240 × (203 ÷ 140) = 348 としていくと、4枚の画像の幅総数が899となり画面幅に収まります。高さは4枚すべて203pxです。 5枚目が1000と900を大幅に超えていますので、この場合以下のように高さをだします。 900 ÷ 1000 × 140 = 126 1000 × (126 ÷ 140) = 900 として幅900px、高さ126pxとリサイズします。 という具合に6枚目、7枚目、8枚目の画像の幅総数が900以内として、 すべての画像のそれぞれ高さと幅をリサイズしていきます。 こういった場合に、画像それぞれの幅を見て、画面幅の収める枚数の画像を決めて、 上記のような条件でリサイズしていけばよいでしょうか。 何卒、力添えをお願い致します。
- 締切済み
- JavaScript
お礼
https://www.youtube.com/watch?v=wj--hvspiBcこちらの動画を参考に勉強しているのですが、このような感じで良いのでしょうか？ ちょっと長いのでもしお時間が有りましたら復習がてら見てみてください。 %でwrappeなどを作ってもいずれにしろすべての端末用のCSSを用意しないといけないのですね。 %のほうがソースが少なくなって、時間も短縮できるかと思ったのですが、現場ではどちらでも好きな方で良いのですね。 ％は計算が大変なのでpxで960、768、３２０の三つ作ってやればよいのですね。