前前回までの復習

CSSはボックスモデルでできている。(divボックス)
ボックスの幅＝中身の幅 + 余白の幅 + ボーダーの幅 + マージンの幅
(ボックス背景色＝マージン領域に表示されないことがある)＝最新版Safariではこの問題は起きない。
IDセレクタ＝1ページに1回だけ。クラスセレクタ＝複数回使用可能。

前回の復習

CSSをリンクして適用する
グループ化　 ＝文字(見出し)・本文・コピーライト・段落をdivボックスに入れる。
2段組みの方法＝フロートに左・右を入れる。 
クラス設定したCSSスタイルを、スタイルメニューから適用(プロパティの項目から)
フロートしたものの次の要素に解除(clear)を指定

子孫セレクタについて  
利点：特定の構造環境でのみ有効なルールを定義できる

例

lesson4 の時は

body { backgroundcolor: #999;}

#container {padding: 20px; margin-right: 50px; margin-left: 50px;  border: 0px ; backgroundcolor: #FFF;}

#keyword {text-align: right; margin: 0px;    padding: 0px;}

h1{font-size: x-large; 〜}


h2{font-size: medium;  〜}

#figbox { padding: 12px; border: 0px ;}

#figure { float: left; margin-right: 1em;}

address { clear: left;}

 



子孫セレクタと呼ぶ表記では、親が決まっているタグを書くときは、 
次のように書きます。 

body { backgroundcolor: #999;} 
 body #container {padding: 20px; margin-right: 50px; margin-left: 50px;   border: 0px ; backgroundcolor: #FFF;}
body #container #keyword

{text-align: right; margin: 0px;    padding: 0px;}  

body #container h1{font-size: x-large; 〜} 




body #container h2{font-size: medium;  〜} 
body #container #figbox { padding: 12px; border: 0px ;}
body #container #figbox #figure { float: left; margin-right: 1em;}

  
body #container address { clear: left;}

表示されない原因が
ブラウザの異常の場合の対処法

(Safariの場合のみ有効)

1.Finderに切り替えて

2.左上の青いりんごマークから「システム環境設定」を選択

3.システムの中の「ソフトウェア・アップデート」を選択し、

4.「今すぐ確認」ボタンをクリック

5.項目の中に[Safari]又は[Java for MacOSX]が有る場合、

6.作業中のデータをすべて保存し、「項目をインストール」をクリック

★まずは表示確認
ブラウザごとの表示の違いを確認する方法
Browsershots http://browsershots.org/

Browsershots とは
Browsershotsは、様々なオペレーティングシステムやブラウザであなたのウェブデザインのスクリーンショットを作成します。
これは開発者の皆さんに、ウェブブラウザの互換性を一度にテストできる便利な手段を提供する、フリーでオープンソースのウェブアプリケーションです。
あなたのウェブアドレスをサブミットするとジョブキューに追加されます。たくさんのコンピュータが分担してあなたのウェブサイトを各ブラウザで開きます。
そしてスクリーンショットを取得し、中央の専用サーバにアップロードしたものをあなたがレビューできます。

ブラウザーテスト[Adobe BrowserLab]
https://browserlab.adobe.com/ja-jp/
Adobe BrowserLabを使用すると、ブラウザー互換性を簡単にテストし、
主要ブラウザーでのWebページをプレビューできます。今すぐ体験を。

★確認してみて、ブラウザによってズレている場合は？
ブラウザごとにCSSを振り分ける方法

htmlもCSSもきれいに書いてるつもりでも、最後にブラウザチェックしてみるとブラウザごとに見え方が微妙に違って
最後の調整で意外と時間をかかってしまうことがあります

Internet Explorer6.0とFirefoxでは、きれいに見えるのに、Internet Explorer7.0でみるとズレていた。
同じページがSafariではさらにズレていた。

しかも、修正していくにつれてどんどんズレていく。
こっちのブラウザにあわせたら、あっちのブラウザでズレる。
厳密にレイアウトを統一しようとすればするほどこのような
経験にぶちあたるでしょう。

ブラウザごとにCSSを書く方法が必要になります。

例えば”test”と名前付けたクラスにCSSを書く。

.test{margin: 0;padding: 0;font-size: 12px;color: #333;}

↑通常このように書きます。

同じものを

1. Internet Explorer6.0に反映させるCSS

* html .test{margin: 0;padding: 0;font-size: 12px;color: #333;}

↑と書けばInternet Explorer6.0に反映させられます。

2. Internet Explorer7.0に反映させるCSS

*:first-child+html .test{margin: 0;padding: 0;font-size: 12px;color: #333;}

↑と書けば、Internet Explorer7.0にだけ反映させられます。

3. Firefoxに反映させるCSS

html>body .test{margin: 0;padding: 0;font-size: 12px;color: #333;}

↑と書けば、Firefoxに反映させられます。

4. Safari & Operaに反映させるCSS

html:first-child .test{margin: 0;padding: 0;font-size: 12px;color: #333;}

↑と書けば、Safari & Operaに反映させられます。

このCSSを全部書けばそれぞれのブラウザごとにだけ、
CSSが反映するので、ブラウザごとに修正できます。

★ブラウザごとにかき分けたものをどうやって適用させるのか
@import 規則を利用した例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
...
省略
...
<link rel=stylesheet type="text/css" href="http://style.com/cool.css">
<meta http-equiv="content-style-type" content="text/css"><style type="text/css">

</style>
</head>
<body>
<h1>headline is blue</h1>
<p style="color: green">while the paragraph is green.</p>
</body>
</html>
<meta http-equiv="Content-Style-Type" content="text/css">は、
この文書内で用いるスタイル・シートが、CSSであることの宣言。

(インライン・スタイルで CSS を使う文書には必ず入れる。)

★インラインスタイルって？

CSS の適用方法HTMLファイルへの style sheet の導入には、三つの方法があります。
３つとは？

1.外部スタイル・シートを <link rel="stylesheet" type="text/css" href="URL"> で参照

2.その HTML 文書の head 要素内に style 要素として記述
3.その HTML 要素の style 属性の属性値としてスタイル宣言を記述（=インライン・スタイル）

2の例 (XHTML1.0/1.1 の場合)

<head>

...省略

body {padding: 1em 5%;background: #ccf}
　p {margin: 0.5em 0;padding: 1em;text-indent: 1em;line-height: 1.5;background: #eef}　
</style>
</head>

3の例
このような部分的な文字色の変更(このページのこの場所にしか適応しない場合)
HTML内に
<span style="color: #ff0000" class="Apple-style-span">
このような部分的な文字色の変更(このページのこの場所にしか適応しない場合)</span>

実際には、これら三つを組み合わせることになるでしょう

複数の HTML 文書で使いまわせる一般的なスタイルは
→ 外部スタイルシートに用意して link 要素で読み込み、

そのHTMLファイル内のみで利用する特殊なスタイルは
→head 要素内に style 要素として記述。

更に、或る特定の（ただ一つの）要素にだけ働かせたい特別なスタイルは、要素の style 属性として記述します。

★優先順位に注意

この時、 Cascade 処理の優先順位は、外部スタイル・シートよりも、
head 要素内の style 要素内の宣言の方が高くなり、
更に、 style 要素よりも style 属性の方が優先順位は高くなります。

具体的な例

DOCTYPEは以下にする。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

■import.css
↓Firefoxなど、モダンブラウザ系に使用（これがベース）
@import "style.css";

↓Mac IE5.ｘ用
/*\*//*/
@import "mac_ie5x.css";
/**/

↓Windows　旧IE5.0～5.5用
@media tty {
i{content:"\";/*" "*/}} @import 'win_ie5x.css'; /*";}
}/* */

■HTML
↓Windows　IE6専用


↓Windows　IE7専用


あとは、ハックなどを使いながらブラウザ毎に読み込む属性を変更したりするなど。
この他にも色々な方法があります。
ちなみに、

より細かい記述を把握したい場合は↓を参照

ブラウザごとのeventオブジェクトの違いを理解する
クロスブラウザスクリプト作成時に問題となる、eventオブジェクトの用法とプロパティ
http://codezine.jp/article/detail/2390

ブラウザ互換について-外部CSS-

http://rich.pleasure911.com/hp_tech/hp_tech08.html

ページ

2012年9月10日月曜日

WEB 第2回 2学期

★確認してみて、ブラウザによってズレている場合は？
ブラウザごとにCSSを振り分ける方法

具体的な例

ブラウザ互換について-外部CSS-

このブログを検索

ブログアーカイブ

ページ

2012年9月10日月曜日

WEB 第2回 2学期

★確認してみて、ブラウザによってズレている場合は？ ブラウザごとにCSSを振り分ける方法

具体的な例

ブラウザ互換について-外部CSS-

このブログを検索

ブログ アーカイブ

★確認してみて、ブラウザによってズレている場合は？
ブラウザごとにCSSを振り分ける方法

ブログアーカイブ