スマフォ用サイト


スマフォ用サイトの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 29 30 31


カテゴリ一覧

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

競馬+POG(1270)
当たらない予想と反省会(699)
POGネタ(58)
競馬について考える(17)
競馬もろもろ(180)
ダービーウィーク!(14)
2011年競馬場訪問記(27)
2012年競馬場訪問記(53)
2013年競馬場訪問記(61)
2014年競馬場訪問記(40)
2015年競馬場訪問記(44)
2016年競馬場訪問記(25)
2017年競馬場訪問記(36)
2018年競馬場訪問記(7)
ひとくち馬主(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年5月(7)
2018年4月(19)
2018年3月(3)
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年、新年明けましておめでとうございます(去年の目標を振り返り、今年の目標を!) (アオヤギ)

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



ネタの検索



管理人の競馬観戦記録


(2018年)

JRA中山競馬場
1月6日 (中山金杯)
3月3日 (オーシャンS)

船橋競馬場
3月16日
5月2日 (かしわ記念)

大井競馬場
1月24日 (TCK女王盃)
4月17日 (ブリリアントC)
5月9日 (羽田盃)

川崎競馬場
4月4日 (クラウンC)

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


管理人の競馬家計簿


(最近14日分)

2018年5月16日川崎
11勝  回収率:250.0%

2018年5月16日門別
116勝  回収率:144.0%

2018年5月17日門別
32勝  回収率:206.7%

2018年5月18日園田
10勝  回収率:90.0%

2018年5月20日東京
40勝  回収率:0.0%

2018年5月23日大井
11勝  回収率:1,470.0%

2018年5月23日門別
62勝  回収率:148.5%

2018年5月25日大井
10勝  回収率:0.0%

2018年5月25日園田
21勝  回収率:58.5%

2018年5月26日東京
123勝  回収率:91.5%

2018年5月26日京都
20勝  回収率:0.0%

2018年合計
669149
勝率:22.3%  回収率:74.0%
(万馬券:20本的中)

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)]  人気ブログランキングへ 
[広告です] JRAのネット投票なら楽天銀行+即PAT!

また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)]  人気ブログランキングへ 
[広告です] 地方競馬をひとつに集約!全場買える【 楽天競馬 】

blogリニューアルの反響

まったくなし(笑)

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

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

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

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

話が支離滅裂。

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