ブラウザ
ブラウザシェアと画面解像度のランキング 2012年3月期
現在自分の管理している4サイトでのブラウザシェア及び画面解像度
期間：2012/3/1-2012/3/31
前回計測からもう１年半経ってしまいましたが、ブラウザシェアと解像度のランキングです。
■ 地方のシネコン
1. Internet Explorer8.0—24.08%
2. Android Browser 533.1—21.14%
3. Internet Explorer9.0—15.96%
4. Safari 7534.48.3—10.79%
5. Internet Explorer7.0—5.29%
6. Internet Explorer6.0—3.98%
7. Safari 6533.18.5—3.29%
8. DoCoMo 2.0—2.83%
9. Mozilla Compatible Agent5.0—1.59%
10. Android Browser 530.17—1.22%
11. Chrome 17.0.963.79—1.15%
12. Firefox 10.0.2—1.15%
13. Firefox 11.0—0.80%
14. Chrome 17.0.963.56—0.74%
15. Chrome 17.0.963.83—0.70%
16. Safari 534.52.7—0.47%
17. Safari 6531.22.7—0.38%
18. Safari 533.19.4—0.34%
19. NetFront 3.5—0.30%
20. Android Browser 534.13—0.28%
21. Safari 534.53.10—0.27%
22. Chrome 17.0.963.78—0.24%
23. Safari 533.22.3—0.22%
24. Safari 534.54.16—0.18%
25. Chrome 17.0.963.66—0.17%
1. 320×480 —13.68%
2. 1366×768 —11.39%
3. 1280×800 —9.04%
4. 1024×768 —8.66%
5. 1280×1024 —6.54%
6. 1920×1080 —4.25%
7. 480×854 —2.82%
8. 1440×900 —2.52%
9. 800×1220 —2.15%
10. 1680×1050 —2.13%
■ Yahoo!ショッピング 寝具ショップ
1. Internet Explorer8.0—27.93%
2. Internet Explorer9.0—22.94%
3. Android Browser 533.1—6.89%
4. Internet Explorer7.0—6.51%
5. Safari 7534.48.3—6.36%
6. Firefox 10.0.2—5.83%
7. Internet Explorer6.0—3.71%
8. Firefox 11.0—3.48%
9. Chrome 17.0.963.79—2.27%
10. Safari 534.52.7—1.67%
11. Chrome 17.0.963.8—31.59%
12. Safari 534.53.10—1.29%
13. Safari 6533.18.5—0.83%
14. Chrome 17.0.963.56—0.76%
15. Chrome 17.0.963.78—0.76%
16. Safari 534.48.3—0.68%
17. Opera 11.61—0.61%
18. Safari 533.22.3—0.61%
19. Android Browser 530.17—0.45%
20. Mozilla Compatible Agent5.0—0.45%
21. Safari 533.20.27—0.38%
22. Safari 534.54.16—0.38%
23. DoCoMo 2.0—0.30%
24. Chrome 17.0.963.66—0.23%
25. Safari 531.21.10—0.23%
1. 1366×768 —14.31%
2. 1280×800 —13.47%
3. 1024×768 —9.77%
4. 1280×1024 —7.80%
5. 1920×1080 —7.42%
6. 1920×1200 —5.15%
7. 320×480 —4.69%
8. 1440×900 —3.71%
9. 1680×1050 —3.63%
10. 768×1024 —3.26%
■ ブログ（これ）
1. Firefox 10.0.2—18.46%
2. Firefox 11.0—13.85%
3. Chrome 17.0.963.79—10.15%
4. Internet Explorer8.0—9.85%
5. Chrome 17.0.963.83—5.85%
6. Internet Explorer9.0—5.85%
7. Chrome 17.0.963.56—5.23%
8. Chrome 17.0.963.66—3.38%
9. Firefox 3.6.27—1.85%
10. Internet Explorer7.0—1.85%
11. Firefox 9.0.1—1.54%
12. Internet Explorer6.0—1.54%
13. Safari 534.52.7—1.54%
14. Chrome 17.0.963.78—1.23%
15. Chrome 18.0.1025.142—1.23%
16. Firefox 3.6.28—1.23%
17. Firefox 4.0.1—1.23%
18. Firefox 3.6.24—0.92%
19. Firefox 8.0.1—0.92%
20. Opera 11.61—0.92%
21. Chrome 18.0.1025.140—0.62%
22. Chrome 18.0.1025.45—0.62%
23. Chrome 18.0.1025.56—0.62%
24. Firefox 3.6.23—0.62%
25. Firefox 7.0.1—0.62%
1. 1280×1024 —24.31%
2. 1920×1080 —19.69%
3. 1366×768 —8.92%
4. 1280×800 —8.62%
5. 1920×1200 —8.62%
6. 1680×1050 —8.31%
7. 1440×900 —5.85%
8. 1600×1200 —5.54%
9. 2560×1440 —2.46%
10. 1024×768 —1.85%
■ アメブロ（プライベート）
1. Internet Explorer8.0—32.35%
2. Internet Explorer7.0—14.71%
3. Internet Explorer9.0—8.82%
4. Firefox 11.0—5.88%
5. Lunascape6.5.4.24433—5.88%
6. Safari 534.52.7—5.88%
7. Chrome 14.0.814.0—2.94%
8. Chrome 17.0.963.56—2.94%
9. Chrome 17.0.963.79—2.94%
10. Firefox 4.2a1pre—2.94%
11. Firefox 9.0a2—2.94%
12. Internet Explorer6.0—2.94%
13. Opera 11.10—2.94%
14. Safari 533.22.3—2.94%
15. Safari 7534.48.3—2.94%
1. 1280×768 —26.47%
2. 1280×800 —14.71%
3. 1280×1024 —11.76%
4. 1366×768 —8.82%
5. 1093×614 —5.88%
6. 1192×670 —5.88%
7. 1680×1050 —5.88%
8. 1024×640 —2.94%
9. 1024×768 —2.94%
10. 1252×704 —2.94%
IEバグ：overflowを設定したボックス内のposition指定した要素が動かない
サイトの特性上、あまり今までoverflow:auto やoverflow:scroll-y などを使うことが無かったのですが、ここにきてIEのバグに遭遇しました。
まずバグの概要ですが、
・親ボックスはoverflow:scroll-yとheightを設定していて、内容物が高さを超えると縦スクロールバーが出るようにしていた。
・内包要素にはpositionによって配置されるパーツがあり、relativeとabsoluteによって配置していた。
・IE6,7,8,9でバグが発覚。position:relativeを指定した要素が親ボックスのスクロールに連動せず、頑なにその位置から動こうとしない。
という状態になりました。
解決方法
overflow:scroll-y;を設定した要素にposition:relative;を追加する。
ということで解消です。
2012年に発見するようなバグでもないかもしれませんがメモしておきます。
Chromeでフォントサイズ10px相当の場合にリンク下線が消える
こんなバグが上がってきたのでメモ。
【現象】
10pxのテキストリンクをマウスオーバーした場合の下線が表示されません。
※Chromeで発生。ブラウザの拡大/縮小が100%の状態で表示されません。(110%では表示されます。)
【期待値】
Chrome使用時、テキストリンクをマウスオーバーした場合の下線が表示されること
まずリンクへのtext-decolationの設定は、このようにしていた。
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active{text-decoration:underline;}
a:focus{text-decoration:underline;}
この設定が入っていたにもかかわらず、10pxのテキストリンクにマウスカーソルが乗ってもリンク下線が出なかった。
しかし、他の場所にある同じ条件のリンクでは、下線が出るケースがある。。。。。
スタイルの影響が考えられるとすれば…
line-hightか、paddingか、marginか、font-sizeか、font-familyか…
しかし、この辺り変えてしまうと他のブラウザにも影響があるので、Chromeだけ何とか対応したいが、調べていくとどうもChromeのバグっぽい。
それぞれのプロパティを少しずつ変えてみたところ、
line-hight…変えても効果なし
padding…padding-bottom: 1px;を入れると下線が出た。
margin…変えても効果なし
font-size…9pxでは下線が出ないが、11pxなら出る。
font-family…arialを指定したら下線が出た。sans-serifやMS Pゴシックでは下線が出ない。
という結果に。
余白やフォント設定が影響している感じはするが、どうにもつかみどころのない感じ。
しかもついでに違うバグまで見つかってしまった。。。。。。。。。。
「10pxのテキストリンクで、通常時とオンマウス時でリンク色を変えている場合にオンマウス時に下線の色だけ通常時の色になる！」
もう知りません。
IEでoutlineの領域が広がる
IE6,7でword-wrap:break-word;を適用したところ、とある問題（バグ？）に遭遇しました。
横幅指定のあるボックス内にテキストが入るような状況で、半角英数記号が連続する場合に、これまでは
word-break:break-all;
でIEには折り返しの対応をしていましたが、今回は
word-wrap:break-word;
で対応してみることにしました。
すると、折り返す半角英数記号がリンクの場合、outlineだけ右にはみ出てしまうのです。
かといって、クリッカブル領域もその分広がるのかというと、そうではないようです。
残念な表示をしてくれるIEのために、結局これまでどおりの
word-break:break-all;
をIEのみに適用することにしました。残念。
ちなみにFireFoxなどのモダンブラウザではoverflow:hiddenないしはword-wrap:break-word;でこれまで対応してきました。
FireFoxで半角英数の折り返し処理を適用できるようになっただけでもまだマシということで…
overflow:auto;にしたtextareaでスクロールバーが出ない
overflow:auto;を設定し、入力エリアより長く文章が入った場合に自動的にスクロールバーが出るように設定したtextareaで、こんな問題に遭遇した。
FireFoxで見たとき、文章が多くてもスクロールバーが出ないといわれた。
調べてみたところ、どうやらtextareaの高さが足らなかったため、スクロールバーの▲▼の描画エリアを確保できなかっただけっぽい。
なので高さを追加した、解決。。。。
最低でもwindowsでは高さ34pxくらい必要だった。
ちなみにmacはというと56pxくらい必要になります。
ブラウザシェアと画面解像度のランキング 2010年1月期
現在管理している4サイトでのブラウザシェア及び画面解像度
期間：2010/01/01-2010/01/31
前回計測からすでに８ヶ月程度経って、ブラウザシェアと解像度にも変化が出てきました。
以下のデータの中からはグルメ検索サイトがUU,PVともにトップで統計としてはそこが一番役に立つのではないでしょうか。
傾向としては、IE7からIE8への移行が多く、IE7よりもIE6を使用している人の方が多くなっているという現象や、横長のディスプレイを使用している人が増えてきたこと、そしてやはりスーマートフォンユーザーが少しずつ増加しているということでしょうか。
■ブログ(プライベート・アメブロ)
1. Internet Explorer—–70.78% 前回78.18%
—7.0 60.55% 前回79.73%
—6.0 22.02% 前回19.93%
—8.0 17.43% 前回0.33%
2. Safari—–12.34% 前回6.75%
3. Firefox—–7.14% 前回11.95%
4. Lunascape—–7.14%
5. Chrome—–2.60% 前回0.52%
1. 1280×800 —–27.92% 前回29.87%
2. 1024×768 —–24.68% 前回34.81%
3. 1680×1050 —–12.99% 前回5.19%
4. 1093×614 —–9.09% 前回5.19%
5. 1280×768 —–7.14% 前回3.64%
6. 320×396 —–5.84% 前回5.19%
7. 1400×1050 —–3.25% 前回3.38%
8. 1280×1024 —–1.95% 前回4.16%
9. 1366×768 —–1.30% 前回6.49%
10. 1440×900 —–1.30% 前回2.60%
■地方のシネコン
1. Internet Explorer—–86.47% 前回89.80%
—8.0 47.48% 前回2.88%
—7.0 26.60% 前回58.45%
—6.0 25.47% 前回37.61%
—5.5 0.29% 前回0.69%
—5.0 0.12% 前回0.10%
2. Firefox—–4.17% 前回3.82%
3. Safari—–3.97% 前回2.25%
4. NetFront —–2.28% 前回2.37%
5. Chrome—–1.22% 前回0.59%
6. Opera—–0.89% 前回0.86%
7. Lunascape—–0.45% 前回0.86%
8. Mozilla Compatible Agent —–0.34% 前回0.86%
9. Playstation 3—–0.09% 前回0.86%
10. Playstation Portable —–0.03% 前回0.86%
1. 1024×768 —–30.45% 前回37.44%
2. 1280×800 —–20.46% 前回20.03%
3. 1280×1024 —–16.70% 前回19.98%
4. 1440×900 —–4.91% 前回4.64%
5. 1366×768 —–4.72% 前回1.31%
6. 1680×1050 —–4.66% 前回4.05%
7. 1920×1080 —–2.08%
8. 1280×768 —–1.82% 前回2.32%
9. 320×396 —– 1.57%
10. 1920×1200 —–1.10% 前回0.95%
■地域グルメ検索サイト
1. Internet Explorer—–88.75% 前回91.14%
—8.0 42.31% 前回2.36%
—6.0 32.19% 前回42.84%
—7.0 25.08% 前回53.76%
—5.5 0.40% 前回0.62%
—5.01 0.01%
2. Firefox—–5.19% 前回4.38%
3. Safari—–3.62% 前回2.81%
4. Chrome—–1.26% 前回0.57%
5. Opera—–0.58% 前回0.83%
6. Lunascape—–0.21%
1. 1024×768 —–32.71% 前回40.66%
2. 1280×800 —–21.93% 前回20.45%
3. 1280×1024 —– 18.59% 前回20.69%
4. 1366×768 —–4.32% 前回0.82%
5. 1440×900 —–4.24% 前回4.01%
6. 1680×1050 —–4.17% 前回3.91%
7. 1280×768 —–1.72% 前回2.30%
8. 1920×1080 —–1.69%
9. 1920×1200 —–1.19% 前回0.79%
10. 320×396 —–1.03%
■Yahoo!ショッピング 寝具ショップ
1. Internet Explorer—–84.85% 前回86.37%
—8.0 52.69% 前回3.93%
—6.0 24.85% 前回37.70%
—7.0 22.21% 前回57.87%
—5.01 0.10%
—5.0 0.05% 前回0.18%
2. Firefox—–7.27% 前回7.89%
3. Safari—–4.65% 前回4.10%
4. Chrome—–1.27% 前回0.90%
5. Lunascape—–1.15%
6. Opera—–0.35% 前回0.47%
1. 1024×768 —–26.45% 前回36.90%
2. 1280×800 —– 21.75% 前回19.68%
3. 1280×1024 —–15.97% 前回17.69%
4. 1440×900 —–5.20% 前回5.47%
5. 1680×1050 —–5.16% 前回5.54%
6. 1366×768 —–4.37% 前回1.17%
7. 1280×720 —–3.67% 前回2.07%
8. 1920×1200 —–2.31% 前回2.34%
9. 1920×1080 —–2.23%
10. 1280×768 —–2.06% 前回2.23%
overflow:auto;を指定した要素の背景画像が固定できない件
ある特定のボックスであるdivの高さと横幅を固定とし、テキストがその領域からはみ出る場合にスクロールバーが出る設定を以下のようにした。
div#messageArea{
width:600px;
height:150px;
overflow:auto;
padding:12px 10px;
border:1px solid #CCC;
background:#FCFCFC url(http://xxxx.jp/img/sampleaimage.gif) no-repeat 0 0;
}
まずこれでIE以外のブラウザでは背景画像をdivの領域内で固定できた。
このままだと、IEで背景画像はスクロールで消えてしまうため、
ここにさらにbackground-attachment:fixed;を追加。
div#messageArea{
width:600px;
height:150px;
overflow:auto;
padding:12px 10px;
border:1px solid #CCC;
background:#FCFCFC url(http://xxxx.jp/img/sampleaimage.gif) no-repeat 0 0;
background-attachment:fixed;
}
こうした場合、IE6以外のブラウザで背景画像の開始位置の解釈が変わり、ウインドウの左上が開始点となってしまった。
そのため、IE6専用にハックをつける。
div#messageArea{
width:600px;
height:150px;
overflow:auto;
padding:12px 10px;
border:1px solid #CCC;
background:#FCFCFC url(http://xxxx.jp/img/sampleaimage.gif) no-repeat 0 0;
_background-attachment:fixed;
}
ここまでで、FireFox3.6,Safari4,IE6には対応できた。
が、IE7では背景画像は出るが、固定はできていない状態。
ここまでが限界だったため、いろいろ調べてみたところ、
ここの一番下に探し求めていた情報がありました。
背景画像を固定しない場合
・背景画像を設定したボックス内の左上が0%位置となる。
・IEも同様。背景画像を固定した場合
・背景画像の0%位置は閲覧領域（自分の場合はウインドウの左上）となる。
・IEの場合、body要素とhtml要素に背景画像を指定した場合は上と同様。
・IE6でそれ以外の場合は背景画像を設定したボックス内の左上が0%位置となる。
・IE7でそれ以外の場合は閲覧領域（ウインドウ）の左上が0%位置となる。
ただ、自分の場合についてはdiv要素の位置が常にウインドウの左右中心で、上から200pxの位置にあったため、以下のように無理やり背景位置を固定とした。
div#messageArea{
width:600px;
height:150px;
overflow:auto;
padding:12px 10px;
border:1px solid #CCC;
background:#FCFCFC url(http://xxxx.jp/img/sampleaimage.gif) no-repeat 0 0;
*background-attachment:fixed;
*background-position:50% 200px;
_background-position:0 0;
}
IE以外のブラウザでは背景固定を設定しない（fixedにしなくても背景が固定されるから）で背景位置を００ポジションに設定。
IE6,IE7は背景画像を固定し、ウインドウの左上を始点として背景画像の位置を設定。
IE6は背景画像を固定にしても、背景画像の開始位置がdiv要素の左上になるためウインドウではなく、divボックスの左上を背景画像開始点とする。
ブラウザシェアと画面解像度のランキング 2009年4月期
現在管理している4サイトでのブラウザシェア及び画面解像度
期間：2009/04/01-2009/04/30
■ブログ(プライベート)
1. Internet Explorer—–78.18%
—7.0 79.73%
—6.0 19.93%
—8.0 0.33%
2. Firefox—–11.95%
3. Safari—–6.75%
4. Netscape—–2.08%
5. Chrome—–0.52%
6. Opera—–0.52%
1. 1024×768 —–34.81%
2. 1280×800 —– 29.87%
3. 1366×768 —–6.49%
4. 1680×1050 —–5.19%
5. 1280×1024 —–4.16%
6. 1280×768 —–3.64%
7. 1400×1050 —–3.38%
8. 1920×1200 —–2.86%
9. 1440×900 —–2.60%
10. 800×600 —–1.82%
■地方のシネコン
1. Internet Explorer—–89.80%
—7.0 58.45%
—6.0 37.61%
—8.0 2.88%
—5.5 0.69%
—5.0 0.10%
2. Firefox—–3.82%
3. NetFront —–2.37%
4. Safari—–2.25%
5 Opera—–0.86%
6. Chrome—–0.59%
1. 1024×768 —–37.44%
2. 1280×800 —– 20.03%
3. 1280×1024 —–19.98%
4. 1440×900 —–4.64%
5. 1680×1050 —–4.05%
6. 1280×768 —–2.32%
7. 1366×768 —–1.31%
8. 240×400 —–1.07%
9. 1400×1050 —–1.02%
10. 1920×1200 —–0.95%
■地域グルメ検索サイト
1. Internet Explorer—–91.14%
—7.0 53.76%
—6.0 42.84%
—8.0 2.36%
—5.5 0.62%
—5.0 0.19%
2. Firefox—–4.38%
3. Safari—–2.81%
4. Opera—–0.83%
5. Chrome—–0.57%
6. Netscape—–0.05%
1. 1024×768 —–40.66%
2. 1280×1024 —– 20.69%
3. 1280×800 —–20.45%
4. 1440×900 —–4.01%
5. 1680×1050 —–3.91%
6. 1280×768 —–2.30%
7. 1152×864 —–1.10%
8. 1400×1050 —–1.02%
9. 1366×768 —–0.82%
10. 1920×1200 —–0.79%
■Yahoo!ショッピング 寝具ショップ
1. Internet Explorer—–86.37%
—7.0 57.87%
—6.0 37.70%
—8.0 3.93%
—5.0 0.18%
—5.5 0.18%
2. Firefox—–7.89%
3. Safari—–4.10%
5. Chrome—–0.90%
6. Opera—–0.47%
4. Netscape—–0.04%
1. 1024×768 —–36.90%
2. 1280×800 —– 19.68%
3. 1280×1024 —–17.69%
4. 1680×1050 —–5.54%
5. 1440×900 —–5.47%
6. 1920×1200 —–2.34%
7. 1280×768 —–2.23%
8. 1280×720 —–2.07%
9. 1366×768 —–1.17%
10. 1400×1050 —–0.86%
カテゴリー
- browser (22)
- Chrome (2)
- Fire Fox (12)
- Internet Explorer (13)
- webkit (1)
- css (8)
- design (1)
- History (5)
- html / xhtml (5)
- JavaScript (2)
- Links (1)
- memo (3)
タグ
confidelic-logについて
アーカイブ
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
| 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 | ||||