レスポンシブデザインとは？　サイトのデザインが自在に変化する場合は？

Question

「レスポンシブデザインとは何か？」をネットで検索すると、
「一つのHTMLソースで書かれたWEBデザイン画面が、
パソコン、タブレット端末、ガラケー、スマホなど、表示する機器の画面サイズや
縦横比率に応じて、最も適切な（あるいは見ていて見栄えよく）デザインに
自動的に切り替えられるようにしてあること」
というようなことが模範解答となっています。

ではレスポンシブデザインの定義はこれでいいとして、下記のようなものは一般的になんと呼称するのでしょうか？　また、HTMLソースでできることでしょうか？

「文字列などのデータがデータベースに格納されていて、それをWEB画面上に表示する際に、
各表示領域のデザイン上の枠を、文字列データの量に合わせて、自在に伸縮して表示するデザイン。
具体的に言えば、今見ているこのQAシステムにおいても、質問文、回答文、お礼コメント、
それぞれ文字列のデータ量、文字数はさまざまであるが、表示枠は文字列がはみ出ることもなく、
また無用に余白が多くなることもなく、ちょうど収まるように自動的に伸縮して表示される。」

詳しい方、お願いします。

naokita · Accepted Answer

枠の縦横の大きさは、横幅＝width　高さ＝height で指定できます。しかし、この値を指定してしまうと、それ以上の膨大な文章やコンテンツが枠に収まらなくなりハミ出てしまいます・・・（対処方法は色々ありますが）ダンボール箱に大きな物を入れると箱が壊れてしまうイメージですｗなので、通常は枠の高さ＝height を指定しません！すると、文章量にあわせて、枠が自動的に伸縮＝柔軟に広がって、綺麗に収まるようになります。横幅＝widthは指定しても構いませんが、溢れた文章は、縦に流れるだけなので、何も問題はありません。（上記の通り「縦の高さ」が自動調整してくれるから）これがごく普通の仕様なので、特に○○○○デザインという名称なんて無いと思います・・・つまり、余計な高さ＝height を指定しない事！

文章～　文章～　文章～　文章～　文章～　文章～　文章～　文章～　文章～　文章～　文章～　文章～　文章～　文章～　文章～

レスポンシブの場合は、

にあるwidthを指定しないか、 CSSにて各UA指定すれば済みます。

ORUKA1951 · Answer

＞下記のようなものは一般的になんと呼称するのでしょうか？　それは[ウェブ標準]の当たり前のページですから、ありません。単に[ウェブ標準]といえばよいだけ。　そうでないページは、クソなヘージとでも呼びましょうかね。　レスポンシブにしろ何にしろ、ウェブの基本が理解できていない自称クリエーターはたくさんいます。ご依頼先もそうなのではないかと・・　今から20年前にそれが大問題となり、16年前にHTML4.01が勧告されたことはご存知だと思います。IEとNetscapeのブラウザ戦争の余波【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 2.4.1 構造とプレゼンテーションの分離　・・・・　また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )］より【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから・・・【中略】・・・　HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より　HTML4.01の仕様書を一度でも通して読んだ経験があれば、そもそもブラウザなど端末ごとに利用的なくなることはあってはなりません。あなたの質問も少しおかしい＞「文字列などのデータがデータベースに格納されていて、それをWEB画面上に表示する際に、・・データの由来は全く関係ない＞文字列データの量に合わせて、自在に伸縮して表示するデザイン。・・そのための用語はない。だってそれがHTMLの最大の目的なので・・あげられた例でいうと、文書構造が完結した一つの記事の場合はHTML5では

でマークアップされます。　

この文書のヘッダ

このsectionの見出し

↑　

この項の見出し

記事

↓　

↑　

この項の見出し

記事

↓　

　当然ですが、sectionはブロック要素ですから、height:autoがデフォルトで、記事の長さによって伸縮し、min-height:100ex; などで最小高さも指定できます。　HTML4.01は、文書構造を示す要素がありませんでしたので、『id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』してきましたね。

というふうに!! 『一つのHTMLソースで書かれた＊＊＊ページ＊＊＊が、＊＊利用＊＊する機器＊＊に応じて、＊＊＊＊自動的に切り替えられる』　が正しい表現ですが、これは、【余計な手を加えなければ、】そのように表示されるはずです。ＨＴＭＬは、そのように設計されているのでね。 ★レスポンスデザインは、もともとHTML4.01+CSS2の時代からのメディア別スタイルシートの拡張です。「HTMLでは、著者は文書をレンダリングするメディア (例えば、グラフィカルなディスプレイ、テレビ、携帯機器、音声ブラウザ、点字出力機器、等) の特性を生かした文書設計を行うことができる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.2.4 )」。　また、代替スタイルシートという仕組みもあります。　優先スタイルシートと代替スタイルシート( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.3.1 ) 　下記ページはレスポンシブではありませんが、メディア別スタイルシート、代替スタイルシートが用意してあります。　ナビゲーションをデザインしてみる。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) 　firefoxやIEなど、代替スタイルシートが利用できるブラウザで、訪問して[表示]メニューから、いろいろなスタイルシートを選択したり、ウィンドウ幅を変更したり、印刷したり、スクリーンリーダー、点字端末などで利用してみるとよいでしょう。

naokita · Answer

#1です。お礼の追記の返答として、
プロのウェブ制作者なのに、ハミ出して完成させる制作者は皆無でしょう・・・
美しく制作するのが当前なので「ハミ出さない様に！」なんて言う必要はありません。

質問者さんが、何をどうしたにのか？本意は不明ですが、
逆に、
枠の大きさを限定し、文書やコンテンツの末尾を削除したいなら、そのように指示してあげて下さい。
しかし、もしですが、
＞「X文字以上はカットする」
とするような仕様/決め事のページだとすると、
読めるべきコンテンツが中途半端で意図的にカットされるので、
エンドユーザーに対しては、ユーザービリティ的には良いコンテンツにはならない可能性もあります・・・
意図的にカットする事で誘導させるマーケティングもありますｗ

---------------------------

ディレクション（打合せ）では、
専門的な用語も不要ですし、
具体的に「ここはこうして欲しい！」と指示するのもわかりやすくて良いのですが、
「ここはこうしたいけど、プロから見てどうだろうか？」
という相談する姿勢が大切だと思います。
納得できない場合には、
理由を問いたり、別の選択肢を提案させましょう。
それが制作者とクライアントの本来あるべきディレクションになります。

難しく考えず、やりたいこと/思ったことを、とりあえずは伝えれば上手く対応してくれるでしょう。
あとは「臨機応変に任せるよ」「何かあったらまた相談して」とか、そんな感じでも良いでしょう。
設計図や見本のテストサイトなどで再現してくれるでしょうから、意図が伝わっていないと感じたら再度の打合せを。

レスポンシブデザインとは？ サイトのデザインが自在に変化する場合は？

枠の縦横の大きさは、横幅＝width 高さ＝height で指定できます。

＞下記のようなものは一般的になんと呼称するのでしょうか？

#1です。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

レスポンシブデザインとは？　サイトのデザインが自在に変化する場合は？

枠の縦横の大きさは、横幅＝width　高さ＝height で指定できます。