HTMLで書かれたページに、SSIをINCLUDE virtual...で呼び出したカレンダーを表示させています。
3カ月分表示させているのですが、これをレスポンシブウェブデザインで、PCで読み込まれた場合は
横に並んで表示、スマホで読み込まれた場合は縦に重なって表示、と言う具合にしたいのですが、
スタイルシートやhtmlの構文などを書き換えるようなのですが、うまくいきません。
cssやhtmlの簡単なサンプルコード等があれば助かります。
よろしくお願いいたします。
現在のhtmlページのコードは
<html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <link rel="stylesheet" href="calendar.css" type="text/css"> <SCRIPT src="script.js"></SCRIPT> <title>Calendar</title> </head> <body> <center> <!--#include virtual="calendar.cgi?mode=ssi" --> <!--#include virtual="calendar.cgi?mode=ssi&next=1" --> <!--#include virtual="calendar.cgi?mode=ssi&next=2" --> </center> </body> </html>
でブラウザはIe11で、画面中央に縦に3ヵ月分のカレンダーが表示されます。
実際はカレンダー1ヶ月分を表示するinclude文1行を、3ヶ月分まとめてtableタグで
囲んで、横に3ヵ月分を並べて表示させてPCでの読み込みの画面表示でちょうど入る
ようにしています。
ただこれですとPCより表示幅が狭いスマホで表示させても同じで、3ヶ月分見ようと
すると、そのカレンダー部分だけ横スクロールすることになります。
これをPCで読んだ場合は横に3ヵ月分、スマホで読んだ場合は縦に3ヵ月分できればと思い
画面の表示幅の違いを利用して、レスポンシブウェブデザインで対応できないかと思い、
お尋ねした次第です。
回答1件
あなたの回答
tips
プレビュー