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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

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

HTML

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

Q&A

解決済

2回答

12917閲覧

javascriptとphpで画面サイズを取得し、htmlをechoする

mosin_nozomi

総合スコア29

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

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

HTML

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

0グッド

0クリップ

投稿2016/09/28 12:37

Webデザイン初心者です。

現在、レスポンシブデザインにするため、画面サイズをJavaScriptで取得し、それをPHPに渡し、if文でHTMLをechoするか否かを決める、というプログラムを実装したいのですが、なかなかうまくいきません。
以下のサイトを参考にしました。

http://muumv.com/section-windowsize/

#ソースコード

Javascript

1(index.htmlに記述) 2 <script type="text/javascript"> 3 (function ($) { 4 $(function () { 5 6 //if ($(window).width() >= 650) { 7 // $(".menu_button").css("display", "none"); 8 //} 9 var setWindowSize = function () { 10 $.ajax({ 11 type: 'POST', 12 url: './index.php', // 画面サイズを渡すPHPのURL 13 dataType: 'html' , 14 data: { 15 'windowSize': $(window).width() 16 } 17 //data: 'windowSize=' + (window).width() 18 }); 19 };setWindowSize(); 20 21 // リサイズした時にsessionを更新する為 22 var timer; 23 $(window).resize(function() { 24 if (timer) clearTimeout(timer); 25 timer = setTimeout(setWindowSize, 1000); 26 }); 27</script>

php

1 <?php 2 //echo'<nav class="menu_button"><span>menu</span></nav>'; 3 session_start(); 4 5 6 if (isset($_POST['windowSize'])){ 7 // $_SESSION['windowSize'] = $_POST['windowSize']; 8 echo '<font size="7"> '+ $_SESSION['windowSize'] + '</font>'; 9 if($_POST['windowSize'] <= 649){ 10 echo'<nav class="menu_button"><span>menu</span></nav>'; 11 } 12 } 13 14 ?>

###試したこと
phpの
if(isset($_POST['windowSize']))
echo '<font size="7"> + $_SESSION['windowSize'] + '</font>';

ここで画面サイズがechoされていないので$_POST['windowSize']がnullであろうと予想し、
Javascriptの.ajax部分等をいじったりしてみたのですが、なかなかうまくいきません。

解決策をご教授いただけますと幸いです。

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

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

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

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

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

guest

回答2

0

まず、Ajaxの結果を受け取る部分の記述がありません。PHPがどうなってようと関係なく受け取れません。jQueryのAjaxは書き方が少しずつ変わっていますが、下記ページに書かれているのが最も古いものと最新のものです。(どちらもしばらく使えます)

【おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたんだよ(追憶) - Qiita】
http://qiita.com/tonkotsuboy_com/items/0722ad92f370ab0c411b


受け取ったHTMLをどこに挿入するかはわかりませんが、「画面サイズで書き換える」のは無駄が多い気がします。(追加したものをまた削除するなども考える必要がある)
メディアクエリを使ってCSSで表示非表示を分けるほうが一般的です。

【メディアクエリの書き方「レスポンシブwebデザイン導入方法」】
http://webuma.net/media-queries

【【CSS】CSS3 のメディアクエリをざっと紹介します IE8の対応法もアリ】
http://scene-live.com/page.php?page=95


font 要素は廃止されています。span要素などにCSSで装飾するなどしましょう。

【font 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/font

投稿2016/09/28 13:35

編集2016/09/28 13:36
kei344

総合スコア69357

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

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

mosin_nozomi

2016/09/29 19:37

詳しい回答助かりました。 メディアクエリを使用する事にしました。 ありがとうございました!
guest

0

ベストアンサー

jsがよくわからないことになっていますね...たぶん、jsが実行されていないのが原因だと思います。
参考サイトのコードをまず動かしてみて、処理の内容を理解してから、一つ一つ動作確認をしながら変更してはどうでしょうか

あと、そもそも論ですが、レスポンシブなサイトを作るなら1つのHTMLで、CSSで画面サイズに応じて、表示を切り替えるやり方のほうが一般的かと思います。
http://webdesignerwork.jp/web/responsivewebdesign/
このやり方なら、HTMLとCSSでできますし
※まぁ一長一短あるので、一概には言えませんが....参考までに

投稿2016/09/28 13:31

編集2016/09/28 13:34
popobot

総合スコア6586

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問