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

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

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

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

レスポンシブWebデザイン

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

HTML

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

CSS

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

Q&A

解決済

2回答

2791閲覧

PCとスマホで全く異なるデザインのページにする方法について

退会済みユーザー

退会済みユーザー

総合スコア0

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

レスポンシブWebデザイン

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2019/10/17 03:07

PCとスマホで全く異なるデザインのページにする方法について質問です。
PCとスマホでデザインを分ける場合、下記のように画面サイズによって
表示を切り分けると思います。

HTML <div class="pc"> <!-- PC用の表示 --> </div> <div class="sp"> <!-- スマホ用の表示 --> </div> CSS @media screen and (min-width: 769px){ .sp { display: none; } } @media screen and (max-width: 768px){ .pc { display: none; } }

この表示の切り分けが例えば「PCとスマホで表示する画像を切り替える」とか
「スマホではハンバーガーメニューを表示するがPCでは表示しない」
のようなページの一部分ではなく、ページ全体のデザインが異なるような場合でも
上記のような書き方をしてしまってもいいのでしょうか?
それとも、WordPressの「wp_is_mobile()」のようにしてPCのときはスマホの
ソース自体を出力しないようにしたほうがいいのでしょうか?

過去のこちらの質問で
HTMLは1つのほうがいいと書いてあったのでHTMLは分ける予定はなく、
URLもPCとスマホで一緒です。

何卒、よろしくお願い致します。

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

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

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

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

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

guest

回答2

0

ベストアンサー

おっしゃるようにHTMLは分けない方がSEO対策的に良いですし、URLも同一のものの方が望ましいです。
ただ、画面サイズによって切り分ける、その切り分け方に問題があるように思います。

ページ全体のデザインが分かれる場合でも、
同一HTML上にPC用表示、スマホ用表示を置くことに基本的には問題はありません。
ですが、重いページになると表示が遅くなったりして良くありません。

拝見したところ、PC表示用、スマホ表示用のソースをHTML内にデザインまで記述し、
それをCSSで振り分けようとしているように見受けられます。
これでは実際に表示する内容の2倍の記述が必要になります。
つまり、表示に倍の時間がかかります。
これはSEO対策的にも、閲覧者に対しても大きなマイナスです。
また、全く同じ文章が繰り返されるのはやはりSEO対策的にお奨めできません。

表示する内容がほぼ同じでデザインだけが全く違うのでしたら、
CSSでデザインを切り替えてみてはいかがでしょうか。

HTML内で内容をブロックごとに分け、名前を付けます。
CSSでそれらの順番を入れ替えたり、デザインを変更します。

HTML

1<div class="block" id="block1"> 2block1の内容 3</div> 4<div class=block id="block2"> 5<img width="690" height="500" src="http:hogehoge.com/image/hoge.jpg" class="image_class"> 6<p ID="hoge"> 7hogehoge 8</p> 9</div>

css

1@media screen and (min-width: 769px){ 2 .block{ 3(PC表示時のブロック要素のCSS) 4 } 5 .image_class{ 6(PC表示時のイメージ要素のCSS) 7 } 8 #block1{ 9(PC表示時のBLOCK1のCSS) 10 } 11 #block2{ 12(PC表示時のBLOCK2のCSS) 13 } 14 #hoge{ 15(PC表示時のblock2の文字部分のCSS) 16 } 17} 18 19@media screen and (max-width: 768px){ 20 .block{ 21(スマホ表示時のブロック要素のCSS) 22 } 23 .image_class{ 24(スマホ表示時のイメージ要素のCSS) 25 } 26 #block1{ 27(スマホ表示時のBLOCK1のCSS) 28 } 29 #block2{ 30(スマホ表示時のBLOCK2のCSS) 31 } 32 #hoge{ 33(スマホ表示時のblock2の文字部分のCSS) 34 } 35}

もちろんPC、又はスマホのみに表示させる部分についてはdisplay: none;で表示を制御します。
基本的にHTML内には内容を記述、装飾はCSSでする、と考えておけば問題ありません。

順番を入れ替える方法については

スマホとPCで要素の表示順番を入れ替えるには?flexbox「order」を使ってレスポンシブデザインに最適化!

がわかりやすいかと思います。

この方法でしたらPCとスマホでデザインを完全に変えることができ、SEO対策的にもマイナスにはならないはずです。

投稿2019/10/28 14:43

編集2019/10/28 15:22
Nya-m

総合スコア54

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

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

0

閲覧しているブラウザをJavascriptで判定して、デザインを分ける方法がありますが、(ユーザーエージェントで分ける)、ユーザーエージェントは、ブラウザの仕様変更や書き換えることもできるので、CSSでデザインを変える方が良いかと思われます。

参考までに、ユーザーエージェントで処理を分ける方法は以下になります。(一例です)

javascript

1 2let ua = window.navigator.userAgent; 3 4if(ua.indexOf('Edge') != -1) { 5 console.log('Microsoft Edge'); 6} else if(ua.indexOf('Trident') != -1 || ua.indexOf('MSIE') != -1) { 7 console.log('Microsoft Internet Explorer'); 8} else if(ua.indexOf('OPR') != -1 || ua.indexOf('Opera') != -1) { 9 console.log('Opera'); 10} else if(ua.indexOf('Chrome') != -1) { 11 console.log('Google Chrome'); 12} else if(ua.indexOf('Firefox') != -1) { 13 console.log('FireFox'); 14} else if(ua.indexOf('Safari') != -1) { 15 console.log('Safari'); 16} else { 17 console.log("unknown"); 18}

投稿2019/10/17 03:50

ryuii

総合スコア438

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問