トラックバック、リンクは自由。報告も自由です。

 
カテゴリ:このブログの紹介( 1 )
このブログの紹介
a0007841_7490.jpg


■ 2004年3月31日更新

このブログでは、スタイルシート(CSS、サイト制作用のプログラム言語)でウエッブサイト制作中の作者の苦労が、現在進行形で描かれています(スタイルシートダメダメ日記)

2003年の9月、HTML初心者のレベルから初め、約一ヶ月後からCSSを導入して現在に至っています。参考書と解説サイトを頼りに作成してきました。

苦労のほとんどが、いろいろあるブラウザの種類やヴァージョンで、同じレイアウトで反映させることです。それほど、ブラウザにはCSSの解釈のちがいがあり(ダメダメ!)、バグも多いです(2004年3月現在)。

タイトルの「スタイルシートのバグにもうダメダメ」てのはブラウザのバグのことです。CSS自体には罪はないみたい。

右にある「カデゴリ」でジャンルわけしていますので、気になるものをクリック!

以上、Bravo でした。650いらね。

最近サイト制作サボって、このブログに雑文書いてますw だってアクセス多いんだも~んw



■ 2004年3月21日現在。征服したっぽいブラウザ

OS 「Windows Me」 (おれ)
WinIE6.0、Win Netscape4.7(CSSを読み込ませない)、Win Netscape6.2、Win Netscape7.1、Win Opera7.23、Win Mozilla1.6

OS 「Windows Me」 (PCショップ)
WinIE5.5

OS 「Windows XP」 (ネットカフェ)
WinIE6.0

OS 「Mac 9.2.2」 (友人Hさん)
MacIE5.1、MacNetscape7.02

OS 「Mac X 10.3(パンサー)」 (友人Hさん)
MacIE5.1、MacNetscape7.1、



■ 残すは、Mac X 10.3(パンサー)、Safari、のみ!?




SAFARI (MacIE 5.1 対策前) (・∀・)イイ!




SAFARI (MacIE 5.1 対策後) ヽ(*`Д´)ノゴルァ



■ 下の画像 → SAFARI (MacIE 5.1 対策後) のデータ

HTML


CSS


@charset "shift_jis";
body {
background:
url("../images/bgtile12a.jpg")
#2c2a24
fixed
left top;
color: #333333;
margin-top: 25px;
margin-right: 0px;
margin-bottom: 60px;
margin-left: 0px;
padding: 0px;
text-align: center;
}

/* 
widthの計測法を、NN7がWINIE5.5に会わせる
http://www.fromdfj.net/html/border2.html
*/

* { box-sizing : border-box}/* CSS 3 の記述。 MacIE 5 で有効。 */
* { -moz-box-sizing : border-box}/* Mozilla 用の記述。 N 6 で有効。 */

div {
padding: 0px;
text-align: left;
}

/* バナー */
div.banner {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px 37px 0px 37px;
width: 77%;
text-align: right;
}
p.update {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: auto;
line-height: 120%;
font-size: 75%;
color: #eeeeee;
text-align: right;
}
img.title_top {
margin-top: 0px;
margin-right: 0px;
margin-bottom: -3px;
margin-left: 0px;
padding: 0px;
}

/*ヘッダー*/
div.header {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
/*min-height: 40px; Netscape 7.1対策 */
height: 65px;
padding: 13px 47px 13px 37px;
width: 77%;
background-color: #bbbbbb;
border-top: solid 4px #555555;
border-right: solid 4px #555555;
border-bottom: solid 2px #999999;
border-left: solid 4px #555555;
}
div.data_title_ja {
height: 36px;
width: 80%;
float: left;
border: solid 2px #555555;
}
div.rew {
max-width: 78px;/* Netscape 7.1対策 */
height: 30px;
width: 78px;
padding: 0px;
float: right;
border: solid 2px #33cccc;
background-color: #ffffff;
text-align: right;
}

/* テキスト */
div.text {
clear: both;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 30px 37px 60px 37px;
width: 77%;
background-color: #ffffff;
border-right: solid 4px #555555;
border-left: solid 4px #555555;
}
/*
MacIE5.1対策スタート。
http://cgi2.html.ne.jp/~n_1_2_3/ie5cssbugsj.html#relative-inheritance
スクロールでちょっと上。
*/
p {
clear: both;
margin-top: 1.5em;
margin-bottom: 1.5em;
font-size: 90%;
line-height: 130%;
width: 100%;
border: solid 2px #ffcc33;
}
/*
以上「p」、MacIE5.1対策用スタイルおわり。
以下、他のプラウザ用スタイル。
¥*/
p {
clear: both;
margin-top: 1.5em;
margin-bottom: 1.5em;
font-size: 90%;
line-height: 130%;
letter-spacing: 0.1em;
text-align: justify;
text-justify: distribute;
width: 100%;
border: none;
}
/*
対策おわり。
MacIE5.1はこのコメントの終点を前のコメントの終点と見なし読み込まない。
*/
p.jyuuyou {
clear: both;
font-size: 80%;
padding: 14px 23px;
padding: 1em 1.5em;
line-height: 140%;
background-color: #eeeeee;
color: #222222;
border: solid 1px #cccccc;
text-align: left;
}
p.date {
margin-top: 20px;
margin-right: auto;
margin-bottom: -12px;
margin-left: auto;
padding: 1px 1px 1px 1px;
line-height: 110%;
color: #808080;
font-weight:bold;
border-bottom: solid 1px #c0c0c0;

}
p.chuu {
margin-top: 15px;
margin-right: 25px;
margin-bottom: 15px;
margin-left: 25px;
font-size: 80%;
color: #808080;
line-height: 125%;
}

/* フッター */
div.footer {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: center;
padding: 13px 37px 8px 37px;
width: 77%;
background-color: #bbbbbb;
border-top: solid 2px #999999;
border-right: solid 3px #555555;
border-bottom: solid 3px #555555;
border-left: solid 3px #555555;
}
pre {
margin-top: 8px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px 37px;
width: 77%;
line-height: 130%;
font-size: 70%;
color: #dddddd;
text-align: center;
text-decoration: none;
}
p.title_bottom {
margin-top: 3px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px 37px;
width: 77%;
text-align: center;
text-decoration: none;
}

/*以下最後までリンク*/
a:link {
color: #444444;
text-decoration : none;
border-bottom : 1px #222222 dashed;
}
a:visited {
color: #444444;
text-decoration : none ;
border-bottom : 1px #222222 dashed;
}
a:active {
color: #444444;
text-decoration : none ;
}
a:hover {
color: #444444;
text-decoration : none ;
}

a.none:link {
border-bottom : 0px dashed;
}
a.none:visited {
border-bottom : 0px dashed;
}
a.none:active {
border-bottom : 0px dashed;
}
a.none:hover {
border-bottom : 0px dashed;
}

/* 戻るボタン リンク部 */
a.rew_top {
background-color: #bbbbbb;
display: block;
width: 78px;
padding: 3px 0px 1px 2px;
color: #555555;
font-weight: bold;
text-align: center;
}
a.rew_top:link {
border-top: 2px solid #eeeeee;
border-right: 2px solid #555555;
border-bottom: 2px solid #555555;
border-left: 2px solid #eeeeee;
}
a.rew_top:visited {
border-top: 2px solid #eeeeee;
border-right: 2px solid #555555;
border-bottom: 2px solid #555555;
border-left: 2px solid #eeeeee;
}

a.rew_top:active {
color: #ffffff;
background-color: #aaaaaa;
border-top: 2px solid #555555;
border-right: 2px solid #eeeeee;
border-bottom: 2px solid #eeeeee;
border-left: 2px solid #555555;
}
a.rew_top:hover {
color: #ffffff;
background-color: #aaaaaa;
border-top: 2px solid #555555;
border-right: 2px solid #eeeeee;
border-bottom: 2px solid #eeeeee;
border-left: 2px solid #555555;
}


/* 「戻る」ボタン */
a.rew_end {
background-color: #bbbbbb;
display: block;
width: 78px;
margin: 0px auto 0px auto;
padding: 3px 0px 1px 2px;
color: #555555;
font-weight: bold;
text-align: center;
}
a.rew_end:link {
border-top: 2px solid #eeeeee;
border-right: 2px solid #555555;
border-bottom: 2px solid #555555;
border-left: 2px solid #eeeeee;
}
a.rew_end:visited {
border-top: 2px solid #eeeeee;
border-right: 2px solid #555555;
border-bottom: 2px solid #555555;
border-left: 2px solid #eeeeee;
}
a.rew_end:active {
color: #ffffff;
background-color: #aaaaaa;
border-top: 2px solid #555555;
border-right: 2px solid #eeeeee;
border-bottom: 2px solid #eeeeee;
border-left: 2px solid #555555;
}
a.rew_end:hover {
color: #ffffff;
background-color: #aaaaaa;
border-top: 2px solid #555555;
border-right: 2px solid #eeeeee;
border-bottom: 2px solid #eeeeee;
border-left: 2px solid #555555;
}
img.right {
float: right;
}
img.title_end {
}
[PR]
by bravo650 | 2004-03-07 05:48 | このブログの紹介