フロートボックスを水平方向に並べたとき、マージンが２倍に計算される//IE6のバグ対応
floatを指定したボックスに、マージンも合わせて指定すると、
IE6では、floatプロパティを指定した方向と同方向のマージンが２倍になって計算されてしまいます。
これは、並べたフロートボックスの、先頭に位置するボックスのみ、
マージンが２倍に計算されるというIE6特有のバグです。
このバグのために、正しくXHTMLやCSSを書いているのに、
IE6で表示してみたらレイアウトが崩れまくっていた、ということが起こってしまいます。
CSSでレイアウトをしはじめたとき、
誰もが必ずぶつかる現象だと思います。
これは、IE6対策として、必ず使う回避テクニックなので、必ず覚えておきましょう。
side{
float: left;
widht: 200px;
display: inline; /* for IE6 */ ←これを追加します。
margin-left: 20px;
}
↓ よろしかったら、ペタしてください。
IE6では、floatプロパティを指定した方向と同方向のマージンが２倍になって計算されてしまいます。
これは、並べたフロートボックスの、先頭に位置するボックスのみ、
マージンが２倍に計算されるというIE6特有のバグです。
このバグのために、正しくXHTMLやCSSを書いているのに、
IE6で表示してみたらレイアウトが崩れまくっていた、ということが起こってしまいます。
CSSでレイアウトをしはじめたとき、
誰もが必ずぶつかる現象だと思います。
これは、IE6対策として、必ず使う回避テクニックなので、必ず覚えておきましょう。
side{
float: left;
widht: 200px;
display: inline; /* for IE6 */ ←これを追加します。
margin-left: 20px;
}
↓ よろしかったら、ペタしてください。
ホームページ制作初心者のための (X)HTML、CSSとは(2)
前回の続きです。
Webページを表示できるのは、パソコンに「ブラウザ」がインストゥールされているからです。
Webブラウザでよく使われているのは、WindowsであればIE（Internet Explorer）、MacであればSafariや、あるいはどちらにも共通して最近よく使われるようになったのが、Firefoxなどでしょう。
最近は、GoogleのChromeなんかも普及してきました。
あまり使ったことないんですが、いいみたいですね。
ちなみに僕は、Firefoxとサファリ、両方を使ってますが、どっちが本当にいいか、と聞かれたら、Firefoxと答えます。
理由はいろいろあるのですが、それはまた別の機会に書くことにします。
さて、それらのブラウザが、なぜ世界共通にwebページを表示できるかといえば、HTMLで書かれた文書構造を解析し、表示する事ができるから、ということになります。
ホームページで使われるhtmlやcss、またJavaScriptやphp、Flashなどは、世界共通の言語なのです。
では、誰がそんな世界共通の言語を作ったのか？
それは、ここでは書きませんが、いろいろなところに書かれているので是非調べてみて下さい。
ようするにホームページを作るHTML言語は、世界中、どこからでも、どんな人でも、情報を発信することが出来、そしてそれを世界中の人が見ることが出来る、ということです。
2002年ぐらいまで、ホームページをレイアウトするのは「テーブル」が主流でした。
僕も2000年ぐらいに始めて自分のホームページを作った時には、やはりテーブルでせっせとレイアウトをしていました。
テーブルで３等分ぐらいのレイアウトボックス（テーブル）を作り、そのなかにメニューなどを並べるための子テーブルを作り、さらにその中に、写真を並べるための子テーブルをつくり、ボタンを配置するために子テーブルをつくり・・・・、と際限なく複雑なテーブルを作っていたものです。
CSSでレイアウトすることが主流となり，それに慣れてしまった今となっては、ずいぶん懐かしくすら感じます。
このテーブルを使ったレイアウトは、グリッドをベースにしたレイアウトであり、感覚的にわかりやすく、また当時のwebブラウザとの相性も良かったことから、瞬く間に世界中に広まりました。
7,000円ぐらいのホームページビルダーなどのアプリケーションを使えば、誰でも手軽にホームページが持てるようになったのでした。
しかし、webページを作るHTML言語は、もともと学術機関で生まれたものです。
研究者はそれまで、みなそれぞれ異なるコンピュータで、異なるシステムで文書を作成していたため、文書を互いに閲覧したりすることは非常に難しく、これを解決するために生まれたのが「WWW（World Wide Web)」です。
そして、HTMLで書かれたWWWは、世界中のどこから、どんなパソコンでも、
しかしテーブルレイアウトによって爆発的にホームページ作りが広まった結果、テーブルによる装飾的なレイアウトによる見栄えが優先され、謝ったタグや構造のホームページがあふれかえり、文書構造が正しく理解できない、あるいは何がタイトルで、何が重要な見出しで、何がその本文なのか、そもそも最初からマークアップされていない、また一部のブラウザでしか表示できない、などのホームページが、非常にたくさん生まれることになりました。
そこで2000年に勧告されたのが、XHTMLです。
これは、文書構造として「XHTML」を使用し、見栄えを指定するためには、「CSS（スタイルシート）」を使おうという、新しく定義されたWEB標準です。
XHTMLとは、HTML4.01を、XMLで再定義された言語です。
そして、XHTMLには、HTMLよりも厳密な決まり事が作られることになりました。
たとえば、
WEBブラウザのCSSへの対応など、いろいろと問題はあったものの、2004年以降は、多くの主要なブラウザで標準サポートするようになりました。
現在では多くのWEBサイトが、テーブルレイアウトからCSSレイアウトへ移行を終え、多くの人たちが、WEBスタンダードに準じてウェブサイトを制作するようになりました。
Webページを表示できるのは、パソコンに「ブラウザ」がインストゥールされているからです。
Webブラウザでよく使われているのは、WindowsであればIE（Internet Explorer）、MacであればSafariや、あるいはどちらにも共通して最近よく使われるようになったのが、Firefoxなどでしょう。
最近は、GoogleのChromeなんかも普及してきました。
あまり使ったことないんですが、いいみたいですね。
ちなみに僕は、Firefoxとサファリ、両方を使ってますが、どっちが本当にいいか、と聞かれたら、Firefoxと答えます。
理由はいろいろあるのですが、それはまた別の機会に書くことにします。
さて、それらのブラウザが、なぜ世界共通にwebページを表示できるかといえば、HTMLで書かれた文書構造を解析し、表示する事ができるから、ということになります。
ホームページで使われるhtmlやcss、またJavaScriptやphp、Flashなどは、世界共通の言語なのです。
では、誰がそんな世界共通の言語を作ったのか？
それは、ここでは書きませんが、いろいろなところに書かれているので是非調べてみて下さい。
ようするにホームページを作るHTML言語は、世界中、どこからでも、どんな人でも、情報を発信することが出来、そしてそれを世界中の人が見ることが出来る、ということです。
2002年ぐらいまで、ホームページをレイアウトするのは「テーブル」が主流でした。
僕も2000年ぐらいに始めて自分のホームページを作った時には、やはりテーブルでせっせとレイアウトをしていました。
テーブルで３等分ぐらいのレイアウトボックス（テーブル）を作り、そのなかにメニューなどを並べるための子テーブルを作り、さらにその中に、写真を並べるための子テーブルをつくり、ボタンを配置するために子テーブルをつくり・・・・、と際限なく複雑なテーブルを作っていたものです。
CSSでレイアウトすることが主流となり，それに慣れてしまった今となっては、ずいぶん懐かしくすら感じます。
このテーブルを使ったレイアウトは、グリッドをベースにしたレイアウトであり、感覚的にわかりやすく、また当時のwebブラウザとの相性も良かったことから、瞬く間に世界中に広まりました。
7,000円ぐらいのホームページビルダーなどのアプリケーションを使えば、誰でも手軽にホームページが持てるようになったのでした。
しかし、webページを作るHTML言語は、もともと学術機関で生まれたものです。
研究者はそれまで、みなそれぞれ異なるコンピュータで、異なるシステムで文書を作成していたため、文書を互いに閲覧したりすることは非常に難しく、これを解決するために生まれたのが「WWW（World Wide Web)」です。
そして、HTMLで書かれたWWWは、世界中のどこから、どんなパソコンでも、
- タイトル
- 見出し
- 本文
- リスト
しかしテーブルレイアウトによって爆発的にホームページ作りが広まった結果、テーブルによる装飾的なレイアウトによる見栄えが優先され、謝ったタグや構造のホームページがあふれかえり、文書構造が正しく理解できない、あるいは何がタイトルで、何が重要な見出しで、何がその本文なのか、そもそも最初からマークアップされていない、また一部のブラウザでしか表示できない、などのホームページが、非常にたくさん生まれることになりました。
そこで2000年に勧告されたのが、XHTMLです。
これは、文書構造として「XHTML」を使用し、見栄えを指定するためには、「CSS（スタイルシート）」を使おうという、新しく定義されたWEB標準です。
XHTMLとは、HTML4.01を、XMLで再定義された言語です。
そして、XHTMLには、HTMLよりも厳密な決まり事が作られることになりました。
たとえば、
- 必ず開始タグと終了タグで囲む（空要素は必ず / で閉じる）
- 属性名・要素名は小文字で記述する
WEBブラウザのCSSへの対応など、いろいろと問題はあったものの、2004年以降は、多くの主要なブラウザで標準サポートするようになりました。
現在では多くのWEBサイトが、テーブルレイアウトからCSSレイアウトへ移行を終え、多くの人たちが、WEBスタンダードに準じてウェブサイトを制作するようになりました。
InternetExplorerで、clearプロパティを指定したボックス上部の余白発生を防ぐ
こんにちは。
ちょっといきなり上級編ぽい感じですが、順不同で、思いつくまま書いて行きたいと思います。
書く順番が多少でたらめでも、長く続けられれば、いずれちゃんとそれなりに、内容が充実してくるんじゃないか、と楽観的に思っています。うまくいけば。
ということで、今回のテーマは、
「IE6、7で、clearプロパティを指定したボックス上部の余白発生を防ぐ」です。
IE6.0、7.0では、Clearプロパティを指定したボックス上部にわずかな余白が発生してしまうというバグがあります。
バグをふせぐためには、clear: bothで回りこみを解除したボックスに、幅を指定する必要があります。
#contents{
clear: both;
width: 100%; /* for IE6,7 */
}
コンテンツのあとに来るフッターエリアにも必ず指定しておきましょう。
#footer{
clear: both;
width: 100%; /* for IE6,7 */
}
ーーーーーーーーーーーーーーーー
IE6には、CSSを正しく解釈できないバグが非常に多いのですが、そのため僕自身もさんざん泣かされました。
さまざまなバグがあり、回避する方法もあるのですが、それらをすべて覚えておくのはけっこう大変です。
調子良く作業を進めていると、ついうっかり忘れてしまったりします。
サイト制作においては、まだまだIE6を完全に切り捨てられないので、IE6対策用のハック技を、いつでも参照できるようにしておくと便利です。
当ブログで継続的に書いて行くつもりですので、一つのリファレンス的な存在にしてもらえたらと思います。
ちょっといきなり上級編ぽい感じですが、順不同で、思いつくまま書いて行きたいと思います。
書く順番が多少でたらめでも、長く続けられれば、いずれちゃんとそれなりに、内容が充実してくるんじゃないか、と楽観的に思っています。うまくいけば。
ということで、今回のテーマは、
「IE6、7で、clearプロパティを指定したボックス上部の余白発生を防ぐ」です。
IE6.0、7.0では、Clearプロパティを指定したボックス上部にわずかな余白が発生してしまうというバグがあります。
バグをふせぐためには、clear: bothで回りこみを解除したボックスに、幅を指定する必要があります。
#contents{
clear: both;
width: 100%; /* for IE6,7 */
}
コンテンツのあとに来るフッターエリアにも必ず指定しておきましょう。
#footer{
clear: both;
width: 100%; /* for IE6,7 */
}
ーーーーーーーーーーーーーーーー
IE6には、CSSを正しく解釈できないバグが非常に多いのですが、そのため僕自身もさんざん泣かされました。
さまざまなバグがあり、回避する方法もあるのですが、それらをすべて覚えておくのはけっこう大変です。
調子良く作業を進めていると、ついうっかり忘れてしまったりします。
サイト制作においては、まだまだIE6を完全に切り捨てられないので、IE6対策用のハック技を、いつでも参照できるようにしておくと便利です。
当ブログで継続的に書いて行くつもりですので、一つのリファレンス的な存在にしてもらえたらと思います。
菅原真樹さんの公式サイト「閉息」、本日アップしました
今年のお正月ぐらいから手がけさせてもらってきたwebサイト、菅原真樹さんの公式サイト「閉息」 を本日、正式にアップロードしました。
スキューバダイビングの世界では有名な方で、テレビなんかにもよく出ていらっしゃった方です。
フリーダイビングトレーナー、コーチとして、日本女子フリーダイビングチャンピオンを育て、２００２年日本フリーダイビングナショナルチームの監督としてトップアスリートをコーチ、ハワイ島コナで開催されたフリーダイビング世界選手権にて女子総合２位、男子総合３位としてアジアの国々として初の快挙に貢献する・・・などなど。
サイト上に、詳しくプロフィールが掲載されています。
菅原さんは現在、スキューバダイビングの講師であるとともに、ハワイの恵まれた自然環境に根ざした、自然療法を行っていらっしゃいます。
菅原真樹公式サイト「閉息」
はじめに (X)HTML、CSSとは
webは、「(X)HTML」というコンピュータ言語を使って作成します。
(x)HTMLとは、文書構造をマークアップした言語です。
本と同じように、１つの文書には、複数の要素
本と違うのは、ここに映像や音楽、Flashという動的コンテンツも含まれてくるということですが、いずれにしても、これらの各要素をコンピュータに認識させ、webブラウザで表示させるには、(X)HTML、CSSという言語を使って、文書の構造を記述する必要があります。
構造を指定することを「マークアップ」と呼びます。
「このまとまりはタイトル」
「このまとまりは、一番重要な見出し」
「このまとまりは、各商品の見出し」
「このまとまりは、サイドカラムのメニューのリスト」
といったように、それぞれのまとまりを、それにふさわしく指定するということです。
つづく
(x)HTMLとは、文書構造をマークアップした言語です。
本と同じように、１つの文書には、複数の要素
- タイトル
- 段落ごとの見出し
- 表
- リスト
- 画像
本と違うのは、ここに映像や音楽、Flashという動的コンテンツも含まれてくるということですが、いずれにしても、これらの各要素をコンピュータに認識させ、webブラウザで表示させるには、(X)HTML、CSSという言語を使って、文書の構造を記述する必要があります。
構造を指定することを「マークアップ」と呼びます。
「このまとまりはタイトル」
「このまとまりは、一番重要な見出し」
「このまとまりは、各商品の見出し」
「このまとまりは、サイドカラムのメニューのリスト」
といったように、それぞれのまとまりを、それにふさわしく指定するということです。
つづく