はじめに
Webアプリを作っていると、見た目の面では「スマホでレイアウトが崩れる」、データの面では「日付が1日ずれる」という、一見無関係に見える2つの問題によく遭遇します。実はどちらも、それぞれの分野の基礎(メディアクエリ、タイムゾーン)を理解していれば防げる・直せる問題です。本記事ではこの2つをまとめて扱います。
レスポンシブデザインの基礎
レスポンシブデザインは、画面幅など端末の特性に応じて、同じHTML/CSSでレイアウトを変化させる設計手法です。中心となる技術がメディアクエリです。
メディアクエリとは
CSSの@media規則を使うと、「画面の幅がある条件を満たす場合だけ」特定のスタイルを適用できます。
/* デフォルト(PC想定)のレイアウト */
.sidebar {
width: 220px;
}
/* 画面幅が768px以下の場合だけ適用されるスタイル */
@media (max-width: 768px) {
.sidebar {
width: 100%;
position: fixed;
}
}
/* さらに狭い480px以下の場合 */
@media (max-width: 480px) {
.header-title {
display: none;
}
}
このように、画面幅の閾値(ブレークポイント)ごとにスタイルを切り替えることで、PC・タブレット・スマホのそれぞれで適切なレイアウトを提供できます。ブレークポイントの値に絶対的な正解はありませんが、768px(タブレット境界)、480px(スマホ境界)あたりが目安としてよく使われます。
よくある落とし穴
固定幅(width: 220pxのような)でレイアウトを組んでいる要素があると、画面幅がそれを下回った際にレイアウト崩れの原因になります。デザインの初期段階から@media規則が1つも存在しない場合、後からレスポンシブ対応を追加しようとすると、影響範囲の洗い出しに手間がかかりがちです。最初から「PCでもスマホでも崩れない」ことを意識して、flexやgridのような柔軟なレイアウト手法を併用しておくと改修がしやすくなります。
サーバー時刻とタイムゾーンの基礎
タイムゾーンとUTC
コンピューターの世界では、時刻の基準としてUTC(協定世界時) が使われます。日本時間(JST)は「UTC+9時間」、つまりUTCより9時間進んでいる、という関係にあります。
サーバー(特にLinux上で動くコンテナ)のシステム時刻設定(タイムゾーン)は、初期状態ではUTCになっていることが多く、明示的にAsia/Tokyo等に変更しない限りUTCのまま動作します。
「今日」判定のズレという典型的なバグ
アプリのサーバー側コードで「現在時刻」を取得する処理(JavaScriptのnew Date()、Pythonのdate.today()等)は、多くの場合サーバーのシステムタイムゾーン設定に依存します。
サーバーのタイムゾーンがUTCのままの場合、日本時間の深夜0時から朝9時の間は、UTC上ではまだ「前日」です。このため、「今日の日付」「今月」を計算するロジックがサーバーのタイムゾーン設定に依存していると、日本時間の深夜〜早朝だけ、実際より1日(または1か月)前の日付として扱われてしまう、というバグが起こりえます。
日本時間 2026-07-17 02:00 の時点で……
UTC基準では 2026-07-16 17:00（まだ7/16）
→ サーバーが「今日」をUTCで判定していると、7/16として扱われてしまう
対策の考え方
対策には大きく2つのアプローチがあります。
-
サーバーのシステムタイムゾーン自体を変更する（例：
Asia/Tokyoに設定する）。手軽だが、あくまで対症療法であり、サーバー移設やコンテナ再作成のたびに設定が失われるリスクがある -
アプリのロジック側でタイムゾーンに依存しない実装にする。
Date.now()のようなタイムゾーン非依存の絶対時刻を取得し、そこに明示的なオフセット(日本時間なら+9時間)を加算してから年月日を計算する、あるいはタイムゾーン対応のライブラリを使う
②の方が、サーバーの設定変更に依存しない分、堅牢な対策になります。JavaScriptのDateオブジェクトのgetTimezoneOffset()のように、実行環境のタイムゾーン情報を取得するAPIも用意されていますが、サーバーサイドで動作する場合はこの「実行環境」自体がサーバーのタイムゾーン設定を指す点に注意が必要です。
まとめ
| 概念 | 内容 |
|---|---|
| メディアクエリ | 画面幅などの条件に応じてCSSを出し分ける仕組み。レスポンシブデザインの中核 |
| ブレークポイント | レイアウトを切り替える画面幅の閾値 |
| UTC | 世界標準の時刻基準。日本時間(JST)はUTC+9時間 |
| タイムゾーン依存バグ | サーバーの時刻設定に依存した日付計算により、深夜早朝に日付がずれる現象 |