🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
PHP

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

HTML

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

CSS

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

Q&A

解決済

1回答

1801閲覧

カレンダーのレスポンシブ用の曜日を表示させたい

nanapon

総合スコア8

PHP

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/02/21 10:58

実現したい事

PC版では良くみるカレンダーのように格子状にして、スマホでは以下の画像のような形にしたいと思っております。
画像のようにイベントも表示させたいです。

イメージ説明

問題点

画像のようにスマホ版で曜日を横に置く方法が分からない点です。

試した事

(1)カレンダーをPC版とスマホ版の2種類のHTMLに分けて、スマホ版ではPC版のカレンダーを非表示にしています。
(2)とりあえず曜日を表示させましたが、画像のように一つの日付に一つの曜日を対応させる方法が分かりません。

PHP

1<?php 2require_once('data.php'); 3// タイムゾーンを設定 4date_default_timezone_set('Asia/Tokyo'); 5 6//次月のリンクが押された場合 7if(isset($_GET['ym'])){ 8 $ym = $_GET['ym']; 9}else{ 10 $ym = date('Y-m'); 11} 12 13//タイムスタンプを作成し、ありえない日付が出てエラーが表示されないよう、フォーマットをチェックする。 14$timestamp = strtotime($ym . '-01'); 15if($timestamp === false){ 16 $ym = date('Y-m'); 17 //今日が2021年2月1日なら、2021-2-01というタイムスタンプができる。 18 $timestamp = strtotime($ym . '-01'); 19} 20 21$today = date('Y-m-j'); 22//今日の日付フォーマット 23 24//カレンダーのタイトル 25$html_title = date('Y年m月', $timestamp); 26 27//前月・次月の年月を取得 28//mktime()を使用。(hour,minute,second,month,day,year) 29$prev = date('Y-m', mktime(0,0,0, date('m', $timestamp)-1, 1, date('Y', $timestamp))); 30$next = date('Y-m', mktime(0,0,0, date('m', $timestamp)+1, 1, date('Y', $timestamp))); 31 32//前月、次月を日本語にする。 33$prev_ja = date('Y年m月', mktime(0,0,0, date('m', $timestamp)-1, 1, date('Y', $timestamp))); 34$next_ja = date('Y年m月', mktime(0,0,0, date('m', $timestamp)+1, 1, date('Y', $timestamp))); 35 36//該当月の日数を取得 37$day_count = date('t', $timestamp); 38 39//dateの引数「w」を使用する事で、曜日番号が代入される。 40$youbi = date('w', mktime(0,0,0, date('m', $timestamp), 1, date('Y', $timestamp))); 41$weeks = []; 42$week = ''; 43$week .= str_repeat('<td></td>', $youbi); 44 45for($day = 1; $day <= $day_count; $day++, $youbi++){ 46 47 //2017-07-3 48 $date = $ym . '-' . $day; 49 50 //日本語の日付表示用 51 $week_ja_array = array('日','月','火','水','木','金','土'); 52 53 if($today == $date){ 54 //今日の日付の場合は、class="today"を付ける 55 $week .= '<td class="today">' . '<span class="date">' . $day . '</span>'; 56 }elseif($event_data_1_a['event_month'] == $ym && $day == $event_data_1_a['event_day']){ 57 //イベント情報が指定されている日 58 $week .= '<td class="event_block"> <span class="date">' . $day . '</span> <div class="event_day">' . $event_contents_1_a . $event_contents_1_b . '</div>' . '</td>'; 59 }elseif($event_data_2['event_month'] == $ym && $day == $event_data_2['event_day']){ 60 $week .= '<td class="event_block"> <span class="date">' . $day . '</span> <div class="event_day">' . $event_contents_2 . '</div>' . '</td>'; 61 }elseif($event_data_3['event_month'] == $ym && $day == $event_data_3['event_day']){ 62 $week .= '<td class="event_block"> <span class="date">' . $day . '</span> <div class="event_day">' . $event_contents_3 . '</div>' . '</td>'; 63 }else{ 64 $week .= '<td> <span class="date">' . $day . '</span>'; 65 for($i=0;$i<7;$i++){ 66 if($i == 7){ 67 $i = 0; 68 } 69 $week_ja = $week_ja_array[$i]; 70 $week .= '<span>' . $week_ja . '</span>'; 71 } 72} 73 74 //週終わり、または、月終わりの場合(6は土曜日の曜日番号)。 75 if($youbi % 7 == 6 || $day == $day_count){ 76 if($day == $day_count){ 77 //月の最終日の場合、空セルを追加 78 $week .= str_repeat('<td></td>', 6 - ($youbi % 7)); 79 } 80 81 //week配列にtrと$weekを追加する 82 $weeks[] = '<tr>' . $week . '</tr>'; 83 84 //weekをリセット 85 $week = ''; 86 } 87} 88 89?> 90 91<!-----------中略 -----------------> 92 93<!--/.PC版のカレンダー --> 94<section class="calendar_wrapper"> 95 <div class="calendar_area pc_calendar_area"> 96 <p class="lead"><span>カレンダーの青くなっている日にイベントを開催しています。</span><span>カレンダーのリンクを押すと、予約フォームまで飛ぶ事ができます。</span></p> 97 <div class="top_date_block"> 98 <p class="prev_btn"><a class="mark" href="?ym=<?php echo $prev; ?>"><?php echo $prev_ja ?></a></p> 99 <p class="html_title"><?php echo $html_title ?></p> 100 <p class="next_btn"><a class="mark" href="?ym=<?php echo $next; ?>"><?php echo $next_ja ?></a></p> 101 </div><!--/.top_hd --> 102 <table class="table" id="page"> 103 <tr> 104 <th class="sunday"></th> 105 <th></th> 106 <th></th> 107 <th></th> 108 <th></th> 109 <th></th> 110 <th class="saturday"></th> 111 </tr> 112 <?php 113 foreach($weeks as $week){ 114 echo $week; 115 } 116 ?> 117 </table> 118 </div><!--/.calendar_area --> 119 120 <!--/.スマホ用のカレンダー --> 121 <div class="calendar_area sp_calendar_area"> 122 <p class="lead"><span>カレンダーの青くなっている日にイベントを開催しています。</span><span>カレンダーのリンクを押すと、予約フォームまで飛ぶ事ができます。</span></p> 123 <div class="top_date_block"> 124 <p class="prev_btn"><a class="mark" href="?ym=<?php echo $prev; ?>"><?php echo $prev_ja ?></a></p> 125 <p class="html_title"><?php echo $html_title ?></p> 126 <p class="next_btn"><a class="mark" href="?ym=<?php echo $next; ?>"><?php echo $next_ja ?></a></p> 127 </div><!--/.top_hd --> 128 <table class="table" id="page"> 129 <?php 130 foreach($weeks as $week){ 131 echo $week; 132 } 133 ?> 134 </table> 135 </div><!--/.calendar_area --> 136</section><!--/.calendar_wrapper --> 137

ご教示頂けますと大変助かります。
よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

珍回答 スマホ版のカレンダーは<li></li>形式にして曜日も一緒に出してしまえば良いのでは?

table系タグを使わずにul&liで出力すれば上から順番に並びますよ?
HTMLも分けて書いてるみたいですし、phpの出力も分けてしまえば難しく考える必要が無くなるかと。

以下蛇足です。

レスポンシブであれば下記のようにCSSで無理矢理たてにすることはできますが、
曜日要素をJSでDOM操作して整える必要が出てきます。

CSSのnth-childを使って::beforeで日付の左につける方法もありますね。
trの中のtdは7個ずつなので比較的簡単かもです。

CSS

1tr { 2 display: flex; 3 flex-flow: column; 4}

これを記述するとPC用のカレンダーが不格好な縦になります。

CSS

1td { 2 width: 100%; 3}

tdの幅を100%に設定すると良い感じになるかもしれません。

投稿2021/02/21 12:03

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

nanapon

2021/02/21 14:06

ご回答ありがとうございます。 途中までやってみましたが、nth-childにbeforeを付ける方法で実現できそうです! 大変助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問