suzrinブログ
HTML,CSS,Javascript,Nikon D5000での撮影記録あとPCパーツ大人のゲームなどなど
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
ie8のlist-styleにおけるバグ発見
まぁ世界は広いので誰かしらは書いてると思うけど
自分用にメモ
前提としてw3cのCSS2 Specificationにはlist-styleに関して
The 'list-style' property is a shorthand notation for setting the three properties 'list-style-type', 'list-style-image', and 'list-style-position' at the same place in the style sheet.
(超適当日本語訳)「list-style」プロパティは「list-style-type」「list-style-image」と「list-style-position」三つを同時に指定する短縮型です
とあり、
A value of 'none' for the 'list-style' property sets both 'list-style-type' and 'list-style-image' to 'none':
(超適当日本語訳)値を「none」に指定した場合は「list-style-type」と「list-style-image」ともに「none」を指定したことになる
とあります
なのにたとえば
li {
list-type:url(hogehoge);
}
li {
list-style : none ;
}
としても画像が消えてくれない罠がーーーーーーー
もちろんセレクタを足してカスケーディングの優先度を上げても駄目
IE8は標準準拠です(笑)
自分用にメモ
前提としてw3cのCSS2 Specificationにはlist-styleに関して
The 'list-style' property is a shorthand notation for setting the three properties 'list-style-type', 'list-style-image', and 'list-style-position' at the same place in the style sheet.
(超適当日本語訳)「list-style」プロパティは「list-style-type」「list-style-image」と「list-style-position」三つを同時に指定する短縮型です
とあり、
A value of 'none' for the 'list-style' property sets both 'list-style-type' and 'list-style-image' to 'none':
(超適当日本語訳)値を「none」に指定した場合は「list-style-type」と「list-style-image」ともに「none」を指定したことになる
とあります
なのにたとえば
li {
list-type:url(hogehoge);
}
li {
list-style : none ;
}
としても画像が消えてくれない罠がーーーーーーー
もちろんセレクタを足してカスケーディングの優先度を上げても駄目
IE8は標準準拠です(笑)
PR
IE8で文字が下にすっとぶぜ?
IETester上だけど怪奇現象を発見したのでメモ
IE8でみると文字がしたにすっとぶ
<!DOCTYPE hoge>
<html>
<head>
<title>piyo</title>
<style>
a:hover {
backgrouned : #fff0f0 ;
}
img {
vertical-align : middle ;
}
</style>
</head>
<body>
<p><a href="">わふー</a><img src=""><a href="">わふーわふーわっふー</a><img src="" height="100"></p>
</body>
</html>
おためしあれ
IE8でみると文字がしたにすっとぶ
<!DOCTYPE hoge>
<html>
<head>
<title>piyo</title>
<style>
a:hover {
backgrouned : #fff0f0 ;
}
img {
vertical-align : middle ;
}
</style>
</head>
<body>
<p><a href="">わふー</a><img src=""><a href="">わふーわふーわっふー</a><img src="" height="100"></p>
</body>
</html>
おためしあれ
時流に乗ってGoogle chromeメインのお話
PCでインターネットをしている人の中で、世界中の半分のひとはブラウザ?何それ?見られれば一緒でしょ?
というライトユーザー層で、特にアジア圏ではマイクロソフトのインターネットエクスプローラー(以下IE)
を使用している人がぶっちぎりで多いわけですが、
今話題の新しいブラウザGoogle Chromeは何が凄いのか?
という話を主軸に最近思ったことをだらだら書いてみましょう
まず、ブラウザーというのはインターネットをするために必要なメインソフトなのですがスタートメニュー→インターネットと選ぶと起動するソフトですね。
実はこのとき起動するブラウザーというソフトは世界中で何十種類も有るのです。
マイクロソフトはインターネットをするために自社ソフト(IE)をOSにバンドルするという形で普及させて、自分の都合のいい規格をデファクトスタンダードにしやすくしました。
PCを初めて買ってインターネットをすると言う人にとって、他のブラウザを入れるなんて言う概念は今となってはほとんど有りませんからね。
ネットバンクのページやオンラインゲームのHP等IEでしか見られないページが有るのがそれらの良い例でしょう。
そうすることによって莫大な利益が転がり込んでくると言う経営戦略ですね。
(非合法すれすれの戦略で欧州では裁判沙汰になり、多額の賠償金を支払っていますが)
一方IE以外で(特に上記の経緯もあるでしょうが)欧州等でよく使われているブラウザがモジラファウンデーションのFirefoxと呼ばれるブラウザ(以下FF)です。
特にノルウェーやドイツなどでは企業単位で使われているそうです。
これらのブラウザーの原型はMOSICと言う同一のソフトで元々有料で配布されていた物でしたが
MSがIEをOSに無料でバンドルしたことから無料が当たり前になりました。
ところが最近まで優勝で配布されていたブラウザがOpera社の「Opera」です。
聞いたことがない人がほとんどだと思いますが、
実は主にAUの携帯電話でインターネットをするときに起動する「PCサイトビューアー」がOpreaです。
もちろん携帯電話用に多少機能はそぎ落とされていますが、モバイル分野でとてもよく使われているブラウザーです。
他にもアップルのMACを使っている人が世界で10%弱居ますが、この人たちが標準で使っているソフトにアップルがOSに標準搭載している「Safari」と言うソフトが有ります。
IEのMAC版が昔はあって、それがそこそこ使われていたのですがMSの経営方針の転換により開発がうち切られたために今ではSafariが標準になっています。
IEはWindowsが入っているPC、特にIE7なWindowsXPとWindowsVISTAでしか使えませんからこの違いは大きいですね。
ところで、なぜ、全く違う機器、全く違うソフトで同じページを見ることが出来るのか?
というと、このインターネットとブラウザーの表示させる規格を決めているW3Cと言う団体が有るためです。
(他にも規格を決めている権威有る団体はいくつもありますがここでは省略させていただきます)
日本の慶応大学がホスト団体の一つとして参加しています。
ところがつい最近までMSはこのW3Cに参加して、その規格でイイですよと言っておきながらIEでは全く違った方式でしか表示できないようにブラウザを作っていました。
みんな横並びになってしまってはIEを使う理由が無くなり利益が減ると経営陣が判断していたんでしょうね。
3~4年前まではそれでもユーザーやWebページを作っている人達からはあまり文句はありませんでした。
それは一重にIEでしか実現できない魅力的な機能があったためでしょう。
ところが携帯電話やPDA等のスマート携帯が普及するに従って、またFirefoxやSafari等のIEより使いやすいブラウザーの登場また普及によって、主にWebページを作っている人達の不満が爆発しました。
IE用のイレギュラーなページとそれ以外のW3Cが決めている企画に沿った標準のページ、両方作る手間が有るため当然の結果ですよね。
当然不満を持った人達はライトユーザーや個人サイトの運営者への啓蒙活動に俄然熱が入ります。
「IEは標準ではないから、FirefoxやSafari・Operaをみんな使いましょう。」
とか、IE用のページしか公開してないサイトに
「あなたのサイトは標準規格ではないのでIE以外では正しくみれないですよ、標準準拠になおしませんか?」
等と呼びかけ始めたのです。
それらがいわゆる「ウェブスタンダード」と言う言葉で流行り始め、IEを徐々に使う人が減って来ました。
統計では一時期IEは全世界の9割以上の人が使っていたのですが、今では6割~7割と言われています。
インターネットをする人口は世界で何億人もいますから、実に一千万人単位でMSはユーザーを失ったわけです。
そして去年から今年、いよいよお尻に火がついたMSは大胆な方針転換を発表しました。
それが
「2008/11に発表するIE8は標準準拠のサイトが正しく見られるようにします」
11月といえば最大でも3ヶ月を切っているのです。
そこで、このタイミングでグーグルが暖めていた奥の手「Google Chrome」と言う手札を切ったのです。
というライトユーザー層で、特にアジア圏ではマイクロソフトのインターネットエクスプローラー(以下IE)
を使用している人がぶっちぎりで多いわけですが、
今話題の新しいブラウザGoogle Chromeは何が凄いのか?
という話を主軸に最近思ったことをだらだら書いてみましょう
まず、ブラウザーというのはインターネットをするために必要なメインソフトなのですがスタートメニュー→インターネットと選ぶと起動するソフトですね。
実はこのとき起動するブラウザーというソフトは世界中で何十種類も有るのです。
マイクロソフトはインターネットをするために自社ソフト(IE)をOSにバンドルするという形で普及させて、自分の都合のいい規格をデファクトスタンダードにしやすくしました。
PCを初めて買ってインターネットをすると言う人にとって、他のブラウザを入れるなんて言う概念は今となってはほとんど有りませんからね。
ネットバンクのページやオンラインゲームのHP等IEでしか見られないページが有るのがそれらの良い例でしょう。
そうすることによって莫大な利益が転がり込んでくると言う経営戦略ですね。
(非合法すれすれの戦略で欧州では裁判沙汰になり、多額の賠償金を支払っていますが)
一方IE以外で(特に上記の経緯もあるでしょうが)欧州等でよく使われているブラウザがモジラファウンデーションのFirefoxと呼ばれるブラウザ(以下FF)です。
特にノルウェーやドイツなどでは企業単位で使われているそうです。
これらのブラウザーの原型はMOSICと言う同一のソフトで元々有料で配布されていた物でしたが
MSがIEをOSに無料でバンドルしたことから無料が当たり前になりました。
ところが最近まで優勝で配布されていたブラウザがOpera社の「Opera」です。
聞いたことがない人がほとんどだと思いますが、
実は主にAUの携帯電話でインターネットをするときに起動する「PCサイトビューアー」がOpreaです。
もちろん携帯電話用に多少機能はそぎ落とされていますが、モバイル分野でとてもよく使われているブラウザーです。
他にもアップルのMACを使っている人が世界で10%弱居ますが、この人たちが標準で使っているソフトにアップルがOSに標準搭載している「Safari」と言うソフトが有ります。
IEのMAC版が昔はあって、それがそこそこ使われていたのですがMSの経営方針の転換により開発がうち切られたために今ではSafariが標準になっています。
IEはWindowsが入っているPC、特にIE7なWindowsXPとWindowsVISTAでしか使えませんからこの違いは大きいですね。
ところで、なぜ、全く違う機器、全く違うソフトで同じページを見ることが出来るのか?
というと、このインターネットとブラウザーの表示させる規格を決めているW3Cと言う団体が有るためです。
(他にも規格を決めている権威有る団体はいくつもありますがここでは省略させていただきます)
日本の慶応大学がホスト団体の一つとして参加しています。
ところがつい最近までMSはこのW3Cに参加して、その規格でイイですよと言っておきながらIEでは全く違った方式でしか表示できないようにブラウザを作っていました。
みんな横並びになってしまってはIEを使う理由が無くなり利益が減ると経営陣が判断していたんでしょうね。
3~4年前まではそれでもユーザーやWebページを作っている人達からはあまり文句はありませんでした。
それは一重にIEでしか実現できない魅力的な機能があったためでしょう。
ところが携帯電話やPDA等のスマート携帯が普及するに従って、またFirefoxやSafari等のIEより使いやすいブラウザーの登場また普及によって、主にWebページを作っている人達の不満が爆発しました。
IE用のイレギュラーなページとそれ以外のW3Cが決めている企画に沿った標準のページ、両方作る手間が有るため当然の結果ですよね。
当然不満を持った人達はライトユーザーや個人サイトの運営者への啓蒙活動に俄然熱が入ります。
「IEは標準ではないから、FirefoxやSafari・Operaをみんな使いましょう。」
とか、IE用のページしか公開してないサイトに
「あなたのサイトは標準規格ではないのでIE以外では正しくみれないですよ、標準準拠になおしませんか?」
等と呼びかけ始めたのです。
それらがいわゆる「ウェブスタンダード」と言う言葉で流行り始め、IEを徐々に使う人が減って来ました。
統計では一時期IEは全世界の9割以上の人が使っていたのですが、今では6割~7割と言われています。
インターネットをする人口は世界で何億人もいますから、実に一千万人単位でMSはユーザーを失ったわけです。
そして去年から今年、いよいよお尻に火がついたMSは大胆な方針転換を発表しました。
それが
「2008/11に発表するIE8は標準準拠のサイトが正しく見られるようにします」
11月といえば最大でも3ヶ月を切っているのです。
そこで、このタイミングでグーグルが暖めていた奥の手「Google Chrome」と言う手札を切ったのです。
スタイルシートのみでのポップアップを作るこつ
CSS(スタイルシート)のみでイージーにマウスカーソルを載せたときに
ポップアップを作るこつをメモ
<a>判定部分<span>ポップアップ内容</span></a>
まず受けるHTMLの方はこういう入れ子構造にしておく
IE6を対応から切れるなら<a>じゃ無くても可能
で、
position:absolute;
を<span>に適応して
描画の流れから取り除いたら画面外にとばすか
visiblity:hidden;で見えなくしておく
で以下が肝心の判定部分
a:hover span{}
これでオンカーソル時の内容を指定しておく
ポップアップを作るこつをメモ
<a>判定部分<span>ポップアップ内容</span></a>
まず受けるHTMLの方はこういう入れ子構造にしておく
IE6を対応から切れるなら<a>じゃ無くても可能
で、
position:absolute;
を<span>に適応して
描画の流れから取り除いたら画面外にとばすか
visiblity:hidden;で見えなくしておく
で以下が肝心の判定部分
a:hover span{}
これでオンカーソル時の内容を指定しておく
正しいHTML・CSSを書いて5年戦えるページを作ろう講座~初級編~(2)
はりきって第二回目いきましょう
と思ったら
1/22にW3CからHTML5草案の発表があったのをしりました
でもそんなの関係ねぇ!!
第二回目はなぜCSSを使うのか?というはなしです
W3CはHTMLを構造・意味をマークアップするだけにとどめて
デザインやレイアウトはCSSで指定するように推奨しています
CSSを使いHTML部分を簡素化することによって
いろいろなプラットフォームから利用しやすくするとか
なんか色々建前がありますが
簡単で便利だから
の一言につきると思います
しかし、M$のせいで使いにくいことも事実です
ということで次回からはFirfoxで表示を確認しながら実際に
ページを書いていきたいと思います
短いですが今回は以上で
と思ったら
1/22にW3CからHTML5草案の発表があったのをしりました
でもそんなの関係ねぇ!!
第二回目はなぜCSSを使うのか?というはなしです
W3CはHTMLを構造・意味をマークアップするだけにとどめて
デザインやレイアウトはCSSで指定するように推奨しています
CSSを使いHTML部分を簡素化することによって
いろいろなプラットフォームから利用しやすくするとか
なんか色々建前がありますが
簡単で便利だから
の一言につきると思います
しかし、M$のせいで使いにくいことも事実です
ということで次回からはFirfoxで表示を確認しながら実際に
ページを書いていきたいと思います
短いですが今回は以上で
正しいHTML・CSSを書いて5年戦えるページを作ろう講座~初級編~(1)
ブログのネタがないので
「正しいHTML・CSSを書いて5年戦えるページを作ろう講座~初級編~」
なるものを
まぁ自分の忘備録兼なんですが
注:別に専門家とかプロでは無いので間違った内容がかかれてる事もあります
そんなことは無いようににしますが・・・
ですので気をつけてください
あと、別にW3C至上主義・CSS最高まんせーな訳ではありあせん
テーブルデザインも必要なら使いますし、セルにwidthがあってもいいじゃないと思っている人間なんで
そのところを考慮してご覧ください。
前置きは以上にして
まずHTMLとブラウザの基礎知識、正しいHTMLとは?
現在のHTMLの立ち位置等から説明したいと思います
HTMLとは
「HyperText Markup Languageの略。
Webページを記述するためのマークアップ言語。
W3Cが作成している規格で、最新版はHTML 4.01。」
引用元:IT用語辞典 e-Words(G-Rated)
http://e-words.jp/w/HTML.html
です。
各々語句を詳しく説明します
「webページ」とはブラウザで閲覧するオンラインのファイルの事ですね。
マークアップ言語とは今回解説するHTMLに代表されるテキストを「タグ」と呼ばれる
「<html>なんとかかんとか</html>」
とマークアップする仕様のことです
「W3C」とはWorld Wide Web Consortiumの略でいろいろなweb関連の規格を決めているところです
HTMLの規格もW3Cに寄って細かく決められています
「HTML4.01」とは1999年に上記のW3Cが決めた規格のバージョンです
HTMLと名前が付くものではこのバージョンが一番新しくなっています
現在ホームページを作ろうと思った際に、
使う選択肢にはいるのはHTML4.01がXHTML1.0になると思いますが
今回はHTML4.01+CSSについて解説します
ちなみに日本の首相官邸HPはHTML4.01、
アメリカのホワイトハウスHPはXHTML1.0でかかれています
なぜHTMLのバージョンなんて気にするのか?という話ですが、
いままでHTMLは全世界で普及するに当たって常にIEとNNのシェア争いにさらされてきました
そこで、各ブラウザはセールスポイントとしてHTMLとは言いながらも独自機能をたくさん盛り込んできました
ところが、NNがシェアほぼ100%だったものをたかだか10年たらずでIEは駆逐してしまったわけですが
逆の事が起きないとは限りません
それに、HTMLはあくまで公共の規格であって
「IEだけで正しく表示される」
ものであってはいけないんですね
ですからHTML4.01では多くのIE・NN独自のタグは規定されていませんし、使うことができませんが、
将来でてくるブラウザ、(IE8等)でも既存のファイルを大きく変更せず正しく表示させせる
「五年戦える」
ページを作るにはW3Cの規格を守って書くことが一番の近道な訳です
なので
「正しいHTML・CSSを書いて5年戦えるページを作ろう」
となるわけです
で、
正しいHTML≒ฺHTML4.01+CSS
なので今回解説しますよとなるわけです
今回はここまでで、第二回から具体例を出しつつHTMLの書き方を解説します
「正しいHTML・CSSを書いて5年戦えるページを作ろう講座~初級編~」
なるものを
まぁ自分の忘備録兼なんですが
注:別に専門家とかプロでは無いので間違った内容がかかれてる事もあります
そんなことは無いようににしますが・・・
ですので気をつけてください
あと、別にW3C至上主義・CSS最高まんせーな訳ではありあせん
テーブルデザインも必要なら使いますし、セルにwidthがあってもいいじゃないと思っている人間なんで
そのところを考慮してご覧ください。
前置きは以上にして
まずHTMLとブラウザの基礎知識、正しいHTMLとは?
現在のHTMLの立ち位置等から説明したいと思います
HTMLとは
「HyperText Markup Languageの略。
Webページを記述するためのマークアップ言語。
W3Cが作成している規格で、最新版はHTML 4.01。」
引用元:IT用語辞典 e-Words(G-Rated)
http://e-words.jp/w/HTML.html
です。
各々語句を詳しく説明します
「webページ」とはブラウザで閲覧するオンラインのファイルの事ですね。
マークアップ言語とは今回解説するHTMLに代表されるテキストを「タグ」と呼ばれる
「<html>なんとかかんとか</html>」
とマークアップする仕様のことです
「W3C」とはWorld Wide Web Consortiumの略でいろいろなweb関連の規格を決めているところです
HTMLの規格もW3Cに寄って細かく決められています
「HTML4.01」とは1999年に上記のW3Cが決めた規格のバージョンです
HTMLと名前が付くものではこのバージョンが一番新しくなっています
現在ホームページを作ろうと思った際に、
使う選択肢にはいるのはHTML4.01がXHTML1.0になると思いますが
今回はHTML4.01+CSSについて解説します
ちなみに日本の首相官邸HPはHTML4.01、
アメリカのホワイトハウスHPはXHTML1.0でかかれています
なぜHTMLのバージョンなんて気にするのか?という話ですが、
いままでHTMLは全世界で普及するに当たって常にIEとNNのシェア争いにさらされてきました
そこで、各ブラウザはセールスポイントとしてHTMLとは言いながらも独自機能をたくさん盛り込んできました
ところが、NNがシェアほぼ100%だったものをたかだか10年たらずでIEは駆逐してしまったわけですが
逆の事が起きないとは限りません
それに、HTMLはあくまで公共の規格であって
「IEだけで正しく表示される」
ものであってはいけないんですね
ですからHTML4.01では多くのIE・NN独自のタグは規定されていませんし、使うことができませんが、
将来でてくるブラウザ、(IE8等)でも既存のファイルを大きく変更せず正しく表示させせる
「五年戦える」
ページを作るにはW3Cの規格を守って書くことが一番の近道な訳です
なので
「正しいHTML・CSSを書いて5年戦えるページを作ろう」
となるわけです
で、
正しいHTML≒ฺHTML4.01+CSS
なので今回解説しますよとなるわけです
今回はここまでで、第二回から具体例を出しつつHTMLの書き方を解説します
続、<col> <colgroup>にalign系がFirefoxで効かない話
前に書いた話の続きなんですが
げっこー系のレンダリングエンジンがおしなべて効かないらしい
理由らしきものを発見
というのは
「CSS2.0以降だと規定がないから」
で、W3Cの翻訳してるサイトで確認したところ確かにない
cssじゃ無ければHTML4.01で非推奨扱いだけどあるんだから
align=""くらい効いてもいいじゃない(つд`)
げっこー系のレンダリングエンジンがおしなべて効かないらしい
理由らしきものを発見
というのは
「CSS2.0以降だと規定がないから」
で、W3Cの翻訳してるサイトで確認したところ確かにない
cssじゃ無ければHTML4.01で非推奨扱いだけどあるんだから
align=""くらい効いてもいいじゃない(つд`)
カレンダー
01 | 2025/02 | 03 |
S | M | T | W | T | F | S |
---|---|---|---|---|---|---|
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 |
ブログ内検索
ツイッター
フリーエリア
18歳未満には不適切な内容がある場合が有ります閲覧にはご注意ください。
詳しくはりーどみーをご覧くださいお願いします
blogに関する連絡はこちらまで"suzrinあっとまーくmail.goo.ne.jp"
blogに関する連絡はこちらまで"suzrinあっとまーくmail.goo.ne.jp"
カテゴリー
最新記事
(09/15)
(07/25)
(04/24)
(03/08)
(02/06)
(01/22)
(11/19)
(06/01)
(05/09)
(05/07)
最新トラックバック
カウンター