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

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

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

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

CSS

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

Q&A

解決済

2回答

3510閲覧

PHP カレンダー形式表示の月初の表示がずれてしまう

hiro0208

総合スコア75

PHP

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

CSS

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

0グッド

0クリップ

投稿2017/03/25 12:29

編集2017/03/28 00:39

カレンダーを作っています。
画像1のように出力したいのですが、月初の位置が思うような位置に
出力できません。 を使用しています。

' ' = 半角スペース分 = 半角英数字分

との認識でやっていますが、どうもずれてしまいます。
なぜでしょうか?
画像1
画像1
'使用
 '使用
半角英数字
半角英数字

php

1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>サンプル</title> 6</head> 7<body> 8<style type="text/css"> 9. calendar { 10 font-family: "MS ゴシック", "MS Gothic", "Osaka-等幅", Osaka-mono, monospace; 11} 12</style> 13<div class="calendar"> 14<?php 15//末日 16$lastday = date('t'); 17//月初 18$month = date('n'); 19//年 20$year = date('Y'); 21//1日の曜日を取得する。 22$timestamp = mktime(0, 0, 0, date('n'), 1); 23//(1日)の曜日を0~6で取得 24$week = date('w' ,$timestamp); 25//必要なブランクの数: $weekの3倍 26$blank = $week * 3; 27//ブランクまでスペースを繰り返す 28for ($i = 0; $i < $blank; $i++) { 29 echo '&nbsp;'; 30} 31//末日まで繰り返す 32for ($i = 1; $i <= $lastday; $i++) { 33 //月初のタイムスタンプ 34 $timestamp = mktime(0, 0, 0, $month, $i, $year); 35 //日付取得 36 $date = date('d', $timestamp); 37 //曜日の取得 38 $week = date('w', $timestamp); 39 echo $date; 40 //土曜日の後ろは改行、その他はスペース 41 echo ($week == 6) ? '<br>' : '&nbsp;'; 42} 43//var_dump($blank); 44?> 45</div> 46</body> 47</html>

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

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

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

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

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

guest

回答2

0

レイアウトにスペースを使うのはHTMLとして微妙です。普通はtable要素を使うと思います。

ブラウザやOSなどによるとは思いますが、とりあえずWindows Chrome/Firefoxでは同じ幅になりました。

HTML

1&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;0102<br> 203040506070809<br> 3&#8194;&#8194;&#8194;&#8194;&#8194;&#8194;&#8194;&#8194;&#8194;&#8194;0102<br> 403040506070809<br> 5```**動くサンプル:**[https://jsfiddle.net/5gmrfsr0/](https://jsfiddle.net/5gmrfsr0/) 6 7--- 8 9【&nbsp; は半角スペースではないというお話 (フェンリル | デベロッパーズブログ)】 10[http://blog.fenrir-inc.com/jp/2011/06/post_51.html](http://blog.fenrir-inc.com/jp/2011/06/post_51.html)

投稿2017/03/25 13:21

kei344

総合スコア69364

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

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

hiro0208

2017/03/27 02:20

ありがとうございます。 >普通はtable要素を使う こちらを考えてみます。
guest

0

ベストアンサー

フォントによっては、半角空白の横幅 ≠ 半角数字の幅だからです。(全角空白の横幅 ≠ 半角空白の横幅×2 というのもある)
文字を指定することで桁合わせをすることはお勧めしません。なぜならどんなフォントで文字を表示するかは実行環境に依存するからです。

  • <table> を使って表を構築する
  • スタイルシートで pixel 単位で <span><div> の位置合わせを行う

といった方法を使わないと、レンダリング結果を整形するのは難しいです。

投稿2017/03/27 02:27

tacsheaven

総合スコア13703

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問