スマフォ用サイト


スマフォ用サイトのQRコード

今月のカレンダー



1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28


カテゴリ一覧

ただの日記(896)
原付生活(3)
子育て日記(11)
PC関連(11)
もろもろ日記(851)

競馬+POG(1256)
当たらない予想と反省会(693)
POGネタ(58)
競馬について考える(17)
競馬もろもろ(177)
ダービーウィーク!(14)
2011年競馬場訪問記(27)
2012年競馬場訪問記(53)
2013年競馬場訪問記(61)
2014年競馬場訪問記(40)
2015年競馬場訪問記(44)
2016年競馬場訪問記(25)
2017年競馬場訪問記(36)
2018年競馬場訪問記(2)
ひとくち馬主(3)

ホームページ製作(336)
PHPの備忘録(13)
CSSの備忘録(5)
JavaScriptの備忘録(2)
ホームページもろもろ(258)
Flashの備忘録(12)
管理人の備忘録(19)
スマフォ用サイト作成(19)

自宅サーバ(337)
FreeBSD(17)
Apache(4)
PHP(5)
MySQL(16)
サーバもろもろ(130)
障害連絡(124)
リニューアルプロジェクト 2011-2012(41)

お仕事(48)
お仕事(48)

旅の記録・水曜どうでしょう関連(43)
水曜どうでしょう(11)
2009年四国お遍路(6)
2009年アンコールワット(5)
2010年ベトナム(3)
2010年いっそ九州(5)
2010年北海道179市町村(5)
2011年春の一人旅(2)
2011年四国お遍路(6)


先月までのネタ

2018年
2018年2月(3)
2018年1月(11)

2017年
2017年12月(14)
2017年11月(11)
2017年10月(18)
2017年9月(18)
2017年8月(21)
2017年7月(29)
2017年6月(26)
2017年5月(23)
2017年4月(18)
2017年3月(11)
2017年2月(11)
2017年1月(16)

2016年
2016年12月(25)
2016年11月(24)
2016年10月(30)
2016年9月(15)
2016年8月(16)
2016年7月(15)
2016年6月(18)
2016年5月(30)
2016年4月(28)
2016年3月(29)
2016年2月(26)
2016年1月(32)

2015年
2015年12月(30)
2015年11月(29)
2015年10月(30)
2015年9月(27)
2015年8月(28)
2015年7月(28)
2015年6月(28)
2015年5月(29)
2015年4月(30)
2015年3月(28)
2015年2月(26)
2015年1月(29)

2014年
2014年12月(31)
2014年11月(28)
2014年10月(31)
2014年9月(29)
2014年8月(29)
2014年7月(31)
2014年6月(31)
2014年5月(30)
2014年4月(30)
2014年3月(28)
2014年2月(27)
2014年1月(31)

2013年
2013年12月(29)
2013年11月(27)
2013年10月(29)
2013年9月(27)
2013年8月(28)
2013年7月(28)
2013年6月(29)
2013年5月(29)
2013年4月(30)
2013年3月(26)
2013年2月(24)
2013年1月(29)

2012年
2012年12月(28)
2012年11月(27)
2012年10月(28)
2012年9月(30)
2012年8月(31)
2012年7月(33)
2012年6月(32)
2012年5月(33)
2012年4月(35)
2012年3月(30)
2012年2月(27)
2012年1月(31)

2011年
2011年12月(25)
2011年11月(25)
2011年10月(28)
2011年9月(28)
2011年8月(28)
2011年7月(28)
2011年6月(27)
2011年5月(26)
2011年4月(16)
2011年3月(9)
2011年2月(11)
2011年1月(9)

2010年
2010年12月(12)
2010年11月(11)
2010年10月(8)
2010年9月(13)
2010年8月(10)
2010年7月(20)
2010年6月(6)
2010年5月(9)
2010年4月(2)
2010年3月(3)
2010年2月(5)
2010年1月(8)

2009年
2009年12月(9)
2009年11月(2)
2009年10月(4)
2009年9月(3)
2009年8月(1)
2009年7月(9)
2009年6月(3)
2009年5月(14)
2009年4月(10)
2009年3月(11)
2009年2月(9)
2009年1月(10)

2008年
2008年12月(1)
2008年11月(1)
2008年10月(1)
2008年9月(5)
2008年8月(1)
2008年7月(1)
2008年6月(2)
2008年5月(1)
2008年4月(1)
2008年3月(2)
2008年2月(7)
2008年1月(7)

2007年
2007年12月(11)
2007年11月(7)
2007年10月(8)
2007年9月(12)
2007年8月(11)
2007年7月(5)
2007年6月(16)
2007年5月(8)
2007年4月(2)
2007年3月(14)
2007年2月(2)
2007年1月(8)

2006年
2006年12月(4)
2006年11月(6)
2006年10月(7)
2006年9月(10)
2006年8月(9)
2006年7月(20)
2006年6月(13)
2006年5月(3)

2005年
2005年9月(13)
2005年8月(13)
2005年7月(18)
2005年6月(24)
2005年5月(26)
2005年4月(26)
2005年3月(27)
2005年2月(22)
2005年1月(26)

2004年
2004年12月(29)
2004年11月(29)
2004年10月(26)
2004年9月(23)
2004年8月(12)


最近のコメント



管理人の今年の目標が一つ増えました…。(あああ)

まあそんなに書くことはありませんが…。(momo)

【管理人からご挨拶】 『The Sunday Breeze』は5月25日に開設19周年を迎えます。(アオヤギ)

4月からスタートする「Sunday Breeze POG!」の一部ルール追加について。(アオヤギ)

昨日「Sunday Breeze賞」の観戦に帯広競馬場へ行ってきました。(白イチゴ)

本日5月25日、「The Sunday Breeze」は18回目の誕生日を迎えました。(アオヤギ)

【「G1予想大会」プレリリース終了】皆様のご協力、本当にありがとうございました。(アオヤギ)

【再度お知らせとお願い】今週からの「G1予想大会」、新機能プレリリースを公開中です。(白イチゴ)

2015年、新年明けましておめでとうございます(去年の目標を振り返り、今年の目標を!) (アオヤギ)

今日のブログは読まなくていいです。(ルーク)



ネタの検索



管理人の競馬観戦記録


(2017・2018年)

JRA札幌競馬場
9月2日 (札幌2歳S)

JRA函館競馬場
7月23日 (函館2歳S)

JRA福島競馬場
7月22日

JRA新潟競馬場
8月27日 (新潟2歳S)

JRA東京競馬場
6月25日
10月15日 (東京ハイJ)

JRA中山競馬場
4月1日 (ダービー卿CT)
9月9日 (紫苑S)
12月23日 (中山大障害)
12月28日 (ホープフルS)
1月6日 (中山金杯)

JRA中京競馬場
7月16日

JRA京都競馬場
11月25日 (京都2歳S)

JRA阪神競馬場
12月10日 (阪神ジュベナイルF)

JRA小倉競馬場
9月3日 (小倉2歳S)

帯広競馬場
7月1日

盛岡競馬場
7月9日 (オパールC)

浦和競馬場
4月26日 (しらさぎ賞)

船橋競馬場
3月15日 (ダイオライト記念)
5月4日 (東京湾C)
7月25日 (習志野きらっとS)
12月7日

大井競馬場
5月2日
5月10日 (羽田盃)
7月12日 (ジャパンダートD)
9月13日 (東京記念)
1月24日 (TCK女王盃)

川崎競馬場
10月11日 (鎌倉記念)
12月13日 (全日本2歳優駿)

笠松競馬場
10月20日

名古屋競馬場
5月25日

園田競馬場
10月20日

高知競馬場
10月21日

佐賀競馬場
12月9日 (大淀川賞)

門別競馬場
6月29日 (栄冠賞)
11月9日 (道営記念)

2012年以降の競馬観戦インデックス


管理人の競馬家計簿


(最近14日分)

2018年2月11日東京
10勝  回収率:0.0%

2018年2月14日浦和
10勝  回収率:0.0%

2018年2月18日東京
20勝  回収率:0.0%

2018年2月18日京都
10勝  回収率:0.0%

2018年2月18日小倉
10勝  回収率:0.0%

2018年2月18日佐賀
10勝  回収率:0.0%

2018年2月20日園田
31勝  回収率:78.4%

2018年2月20日高知
20勝  回収率:0.0%

2018年2月20日佐賀
21勝  回収率:70.0%

2018年2月24日中山
72勝  回収率:100.3%

2018年2月24日阪神
51勝  回収率:115.5%

2018年2月24日小倉
51勝  回収率:256.8%

2018年2月25日中山
62勝  回収率:53.6%

2018年2月25日阪神
52勝  回収率:72.2%

2018年2月25日小倉
51勝  回収率:63.0%

2018年合計
22152
勝率:23.5%  回収率:88.2%
(万馬券:6本的中)

2017年合計
881163
勝率:18.5% 回収率:69.8%
(万馬券:36本的中)

2016年合計
1520346
勝率:22.8% 回収率:68.6%
(万馬券:41本的中)

2015年合計
2014422
勝率:21.0% 回収率:67.2%
(万馬券:51本的中)

2014年合計
1733371
勝率:21.4% 回収率:67.0%
(万馬券:33本的中)

2013年合計
1716328
勝率:19.1% 回収率:76.6%
(万馬券:25本的中)

2012年合計
1206236
勝率:19.6% 回収率:72.5%
(万馬券:9本的中)

2011年合計
90988
勝率:9.7% 回収率:38.1%
(万馬券:8本的中)


管理人のつぶやき


(皆様のフォローをお願いします。)

@sunday_breeze からのツイート
「ホームページ製作」の「CSSの備忘録」ネタは、全部で5件あります。

IEのCSSバグについて考える

先日の続き。

IE5とかIE5.5にはCSSの解釈に一部バグがあります。

ちょっと試しに。

箱があります。
そして、ヘッダがあります。

箱とヘッダ 期待してる形

これは、最終的に望む姿。

ヘッダは<h2>、箱は<div>。

H2
{
background-color: #36e;
color: #fff;
padding: 8px;
font-size: medium;
font-weight: bold;
display: inline;
}

DIV
{
border: 1px solid #36e;
padding: 5px;
margin: 8px 0;
}

というスタイル。

これをIE5で見ると

箱とヘッダ IE5 なんか変

なんか変。

1:ヘッダがきつきつ。
2:ヘッダと箱の隙間。

2は古くからある「Box Hack」という手法で

DIV
{
border: 1px solid #36e;
padding: 5px;
margin: 0;
voice-family: "\"}\"";
voice-family: inherit;

margin: 8px 0;
}

とすることで解決。

で、問題は1だ。

これも根本原因は
<h2>要素をインラインにしてるから
ってことなんですが。
(これは「バグ」ではないらしい。「非対応」ということ)

ブロック要素にすると、こんな感じ。

箱とヘッダ h2をブロックに 隙間が

やっぱり隙間が開いちゃう。
マージンを0にする。

箱とヘッダ h2ブロックのマージン0に まあまあ

おかしくはないけどさ。

<h2>を<div>に入れてみる。

箱とヘッダ h2をdivの中に おかしかないけどさ

おかしくはないけどさ。
イメージ(=望む最終形)とは、ちと違う。

インライン要素であっても、width指定すると
パディングとかマージンとか現れるらしい。

ということで、widthを指定してみる。

H2
{
background-color: #36e;
color: #fff;
padding: 8px;
font-size: medium;
font-weight: bold;
display: inline;
width: 0;
}
箱とヘッダ インラインにwidth指定 ある意味予想通り

予想通り。

なので、改行するなってことか。

H2
{
background-color: #36e;
color: #fff;
padding: 8px;
font-size: medium;
font-weight: bold;
display: inline;
width: 0;
word-break: keep-all;
}

箱とヘッダ 改行するな まあ望む形

これです。求めていたのは。

で、これをIE6で見ると

箱とヘッダ IE6だとやっぱり隙間

なので、「Box Hack」と同じ手法で、
IE5以外なら
width:auto
word-break:normal
としちゃう。

H2
{
background-color: #36e;
color: #fff;
padding: 8px;
font-size: medium;
font-weight: bold;
display: inline;
width: 0;
word-break: keep-all;
voice-family: "\"}\"";
voice-family: inherit;
width: auto;
word-break: normal;
}

箱とヘッダ IE6ハック 一応見れる

まあこんな感じでしょう。

IEの5と6、Opera7.5と9.02、Netscapeの6.1と8.1で確認。

Netscapeの8.1だと、微妙に隙間できてるけど、
もうめんどくさい(笑)

でもさ、word-breakって大丈夫かなあ。
単語の切れ目でしょ?半角数字とか英文字とかが混ざったヘッダだったら
改行されちゃったりしない?

white-spaceとかword-wrapだとIE5は効いてくれないし。

<nobr>って使えたっけか?

[コメント読む(0)]  人気ブログランキングへ 
[広告です] 地方競馬をひとつに集約!全場買える【 楽天競馬 】

また1からやり直し?

週末、プライベートマシンにWindows2000を入れなおしました。

やっぱり入れなおすと、なかなか快適に動くもんですね。

ところが。

初期状態のInternet Explorerのバージョンは5.0。たぶん。

リニューアル予定のページは、予想通り表示が崩れてましたねぇ。
Ajaxは動くみたいだけど。

同様にして、学生時代に使っていたPC98ノートに
Windows98SEを入れてみて、
初期状態のIE(これもバージョン5.0?)で見てみました。
JavaScriptのエラー、でまくり。
表示崩れまくり。


IEについては、CSSの表示にかなりバグが潜んでますんで、
バグリストと見比べつつ、ちょっと直していくって感じですかね。

いつになったら公開できるんだ??

[コメント読む(0)]  人気ブログランキングへ 
[広告です] JRAのネット投票なら楽天銀行+即PAT!

残作業を少しずつ潰す(今日の分)

今週も始まりましたが、
みなさんいかがお過ごしでしょうか。

まずは、NN4.x対策。

全く表示されないのは、結局スタイルシートが中途半端に適用されたためで、
完全に適用外にしてしまえば、そこそこ見られることがわかりました。
「バグにはバグで対抗! Netscape4.x スタイルシート対策」
なんて記事を見つけましたんで、
メディアタイプ=allとして、読み込めないようにしました。

それと同時に、外部CSSファイルでclass=しているところと
タグに直接style=指定しているところとで混在してましたんで、
NN4.x対策の一環として、すべてのスタイルは外部CSSファイルに移そうと。

NN4.x対策、終了。

それと、プルダウンのリンクについて、
jsOffの場合、うんともすんとも言わなくなってしまう件は
完全にリンクで対応することにしました。
見栄えもちょっと変わってくるので、現在修正中。。。

AjaxというかAHAHというかで構成されているページは、
基本的にはjsなしのページを全部作る予定でいます。
こればっかりは仕方ない。

一応、画像を除いて、ページ作成は今週中にけりをつけたいところ。
画像いじるのは、家じゃないとできないので。

[コメント読む(0)]  人気ブログランキングへ 
[広告です] JRAのネット投票なら楽天銀行+即PAT!

IEのバグに悩まされていた。

20070125分画像
右の図。

現在作成中の画面です。
上半分はIE。下半分はOperaで表示させたときのものです。

通常、Operaを使用しているので、ごく最近まで気づかなかったのですが、
IEで表示させると、どうも行間が詰まる。
div要素のline-heightプロパティに1.8と設定しているのですが。

で、よくよく見てみたら
画像(imgタグ)が含まれている行だけ、行間が狭くなってる。

なぜだろうと思って、ぐぐってみた。
見つかった。

IEバグ:img要素などの置換要素を含む行の前後では、line-heightが指定した値より小さくなる|CSS HappyLife

ということ。

英語ですが、ここも(サンプルあり)
Microsoft Internet Explorer: Line-height / Replaced Element Bug

imgタグだけでなく、inputtextareaなどでも同様の現象が起こる模様。

対策としては、画像の上下にpaddingプロパティで間隔をあけてやるしかないみたい。
だけど、正常に見えてるブラウザに対してはハックで対処してやらなきゃならない、と。

具体的な方法については、これから考えます。

[コメント読む(0)]  人気ブログランキングへ 
[広告です] JRAのネット投票なら楽天銀行+即PAT!

blogリニューアルの反響

まったくなし(笑)

これじゃ 、いいのか悪いのかもわかりませんがな。
なんてことはまったく考えず、
相変わらずわが道を進んでおります。
毎日、若干ではありますが、
ページは変化しているのです。

土曜日、写真入れられるようにしました。
日曜日、太字下線を入れるようにしました。
月曜日、カレンダーのフォントを小さくしてみました。
さて今日は?

今、同じデザインで
POGページも作り変えてます。
時間かかってます。
メインはFlashです。
ヘッダのFlashも動きはできてます。
使用するイラストを奥さんに頼んでます。
自分とは違って、右脳がよく働く人ですから。

ちなみに、このページのデザインも、
奥さんに見てもらってます。かなり前に。
相当ダメ出しをくらって、
今にいたっております。

話が支離滅裂。

そうそう、最後に
IE5でスタイルシートを使うとき、
ボックスの幅などにバグがあるそうです。
(「Box Model Hack」というそうです。)
長いことこれで悩んでたんですよ。
備忘録もかねて、リンクはっときます。
日本語訳:Box Model Hack
[コメント読む(0)]  人気ブログランキングへ 
[広告です] 地方競馬をひとつに集約!全場買える【 楽天競馬 】