質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

3133閲覧

拡大縮小しても文章の行数の変わらないレスポンシブWebサイトを作りたい

cheshire-cat

総合スコア72

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/02/06 07:32

画面を拡大縮小しても一切デザインの変わらない
レスポンシブ対応のWebサイトを作りたいと考えています。
メディアクエリで作成しています。

悩んでいるのはテキストの扱いです。

画像であればwidth:100%;と指定すれば
画面サイズに応じて拡大縮小してくれるので問題ありません。

しかしテキストの場合、大きな画面では1行で表示される文章であっても、
画面が縮小されるにつれ、2行、3行と行数が増えていきます。

行数が増えるのではなくて、比率を保ったまま
画面が縮小されても1行の文章は1行で表示されるようにしたいのです。
もちろん画面・ボックス内からはみ出したりせず、
画面内・ボックス内にサイト全体が収まるようにしたいです。

font-sizeをemなどの相対サイズにしたり、
ボックスのアスペクト比を固定してみたりと試したのですが、
どうもうまくいきません。

画面の拡大縮小にかかわらず、デザインも行数も一切変わらない
レスポンシブWebサイトを作るには、
どのような設定をすればいいのでしょうか?

細かな設定方法はできるだけ自分で調べるつもりですが、
「こういう手法を使えばいい」とか、「こういうプロパティがある」など、
大まかな方向性だけでも教えていただけると助かります。

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2020/02/06 07:59

どのような目的があってそのようなサイトを作りたいのでしょうか?
guest

回答3

0

行数が増えるのではなくて、比率を保ったまま

画面が縮小されても1行の文章は1行で表示されるようにしたいのです。

タイトルロゴのような、画面幅を変えても1行を超える心配のないものであれば別ですが、一定量の「文章」という枠で考えると、そもそもの要望自体が適切ではないと考えます。

極端な話、パソコンの場合は画面幅が横長、スマホの場合は縦長となりますが、この2つでどう揃えるイメージでしょうか。スマホで可読にした場合、パソコンだと大きすぎる文字が表示されることになります。

画面の拡大縮小にかかわらず、デザインも行数も一切変わらない

レスポンシブWebサイトを作るには、
どのような設定をすればいいのでしょうか?

それはレスポンシブとはいいません。ただの固定レイアウトです。

投稿2020/02/06 07:48

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

私は「vw」という単位を使っています。

vwの求め方は
フォントサイズ ÷ コンテンツ幅(デザインの幅) × 100 = vw
となっています。

元のデザインの幅が例えば750pxだとして、フォントサイズが24pxだとしたら、
24px ÷ 750 × 100 = 3.2vw

font-sizeに3.2vwを指定すれば、画面幅によってフォントサイズが変動していきます。

ただ、ブラウザによってフォントサイズの縮小制限があります。
(Chromeだと10px以下にはなりません。)
なので、デバイスによっては改行位置が変わっていってしまうことがあります。
こちら参考に
http://blog.upshare.co.jp/2017/07/3730/

投稿2020/02/06 07:56

isan

総合スコア77

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cheshire-cat

2020/02/06 15:17

vwですか。たしかに行数が変化しません。 vwという単位があることは知識としては知っていましたが、 具体的にどのような使い方をするのかは知りませんでした。 勉強になりました。ありがとうございます。
guest

0

パッと思い付いたのを挙げます。
仕様は満たせても悪手です。

全部画像に。


「どんなデバイスでも同じ」というのは割りと土台無理な話と思います。
ユーザーは自由な環境で自由な幅で見るわけですから。
で、あれば「全部同じレイアウト」ではなく、レイアウトもそれぞれの幅で変えて見やすく読みやすくを目指すのが良いのではないかと思います。レスポンシブってそこが利点では?

グリッドレイアウトが良い例でしょう。幅によって一列のブロック数が変わります。

Googleによってモバイルファーストが提言されていたはずなので、まずはモバイル向けに作り、そこから広げてレイアウトを決めていくといい感じになると思います。
(私はそのあたりは既存のCSSフレームワークに任せて個々にどうあてはめるかだけ考えるようにしてます)

投稿2020/02/06 07:53

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問