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

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

新規登録して質問してみよう
ただいま回答率
85.53%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

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

CSS

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

Q&A

解決済

3回答

16101閲覧

スマホとPCで表示する内容をガラッと変える方法

Khy

総合スコア118

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

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

CSS

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

0グッド

2クリップ

投稿2019/01/02 15:04

ランサーズというクラウドソーシングサイトのユーザーページのデザインが添付画像のようにPCとスマホで全然違うのですがこれはどうやって実装しているのでしょうか?

現在Web開発勉強中で、自分の知っているPCとスマホのデザインを変える方法は
・cssによるレスポンシブ
・デバイス毎に読み込むhtmlを変える
なのですが、cssのみでやるには無理があると思いますし、デバイス毎に読み込むhtmlを変えているわけでもなさそうです(モバイル表示時とPC表示時のソースが全く同じだったため)。

ご教授いただけると幸いです。イメージ説明イメージ説明

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

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

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

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

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

kei344

2019/01/02 15:07

「cssのみでやるには無理がある」とは?
退会済みユーザー

退会済みユーザー

2019/01/02 15:09

PCで開いて幅を調整してみてください!! それだけで判断が付きます。 レイアウトが変更される→レスポンシブ レイアウトが変更されない→読み込むHTMLを変更
guest

回答3

2

ベストアンサー

「デバイス毎」ではあるのですが正確には、「デバイスの画面サイズ毎」にCSSの内容を切り替えるのが一般的かなと思います。
こちらのサイトがわかりやすいので抜粋いたしました。

2015年04月04日 デバイスに応じたCSSの振り分けでレスポンシブ対応にした

まずはhtmlの <HEAD></HEAD>の中に以下のコードを追加する。
<meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=2" />

〜省略〜

次にCSSの中に以下をペーストし、カスタマイズしていく。

別に新しいCSSファイルを追加する必要はない。
今まで使っていたCSSファイルに以下を追加でOK。
(以下3種類のデバイスごとにCSSファイルを作っても良い。)

/===============================================
画面の横幅が769px以上(パソコン用)
===============================================
/
@media screen and (min-width: 769px){
この部分にパソコン用だけに対応させたいCSSコードを入力していく
}

/===============================================
画面の横幅が768pxまで(タブレット用)
===============================================
/
@media screen and (max-width: 768px){
この部分にタブレット用・スマホ用に対応させたいCSSコードを入力していく
}

/===============================================
画面の横幅が640pxまで(スマホ用)
===============================================
/
@media screen and (max-width:640px){
この部分にスマホ用だけに対応させたいCSSコードを入力していく
}

一部の表示・非表示の切り替え方法なども載っています。ご参考になれば…

念の為 ランサーズのページもざっとみてみましたが、ブラウザ毎の変更や、上記と同じ画面サイズ毎の変更をしているようです。

投稿2019/01/02 17:01

otaai

総合スコア46

kei344, yoshinavi👍を押しています

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

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

Khy

2019/03/20 16:01

ご返信が遅くなり申し訳ございません。解決いたしました、ご丁寧にありがとうございました!
guest

1

レスポンシブデザインの方法は、いくつかありますが、Googleが提唱しているのが「1ソース(HTML)でのレスポンシブ」です。

各デバイス幅(PC、スマホ等)毎に対応するCSSでレスポンシブデザインを実現させます。

また、他の回答にあるように、メディアクエリを使用すると、複数のCSSを1つにまとめる事が出来ます。

投稿2019/01/04 01:00

yoshinavi

総合スコア3521

kei344👍を押しています

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

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

1

こちらが参考になるかと思います。
こちらでは前の回答者さんに加えてdivの中身を表示非表示にすることで内容を切り替えられます。

投稿2019/01/03 23:26

退会済みユーザー

退会済みユーザー

総合スコア0

yoshinavi👍を押しています

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

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

CSS

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