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

 
カテゴリ:スタイルシートダメダメ日記( 30 )
2004年3月22日 HTML 光と風と夢
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<head> 略 </head>

<body>

<!-- バナー -->
<div class="banner">
<p class="update">
最終更新 略)
<a class="none" href="../../index.html"><img src="../../images/title-b.gif" class="title_top" alt="Bra-net Title Logo" border="0" width=104,height="24"></a>
</p>
</div>

<!-- ヘッダー -->
<div class="header">
<div class="data_title_ja">
<p class="data_title_ja">
光と風と夢
</p>
</div>
<div class="rew">
<a class="rew_top" href="../index.html">戻 る</a><!-- ★注意 -->
</div>
</div>

<!-- テキスト -->
<div class="text">

<p class="jyuuyou">
略)四角の中
</p>

<p>
略)本文
</p>

</div>

<!-- フッター -->
<div class="footer">
<a class="rew_end" href="../index.html">戻 る</a>
</div>

<!-- アドレス -->
<pre>
<script language="JavaScript" src="../../script/address2.js"></script>
</pre>

<p class="title_bottom">
<a class="none" href="../../index.html"> <img src="../../images/title-b.gif" alt="Bra-net Title Logo" class="title_end" border="0" width=104,height="24"></a>
</p>

</body>
[PR]
by bravo650 | 2004-03-22 09:53 | スタイルシートダメダメ日記
春だな~~

なんか、サイト製作、いつまでかかってるんだろな~~

9月から初めて、HTMLもろくに知らないのに、スタイルシート始めちゃって。

いろんなこと覚えなきゃなんないので、ノイローゼなって。

同時に、オリジナルの録音も、ひさしぶりにはじめて、自分のスキルの低さにノイローゼになって。

おまけに、録音機材も買い替え、使い方もわからず、本録りに入って、これまたノイローゼ。

やっと録音出来たら、こんどはアップするのにmp3だのrmだのwmaだのプロレスか、つーの。

探しに探しまくってソフト見つけアップしようとしたら、自作CDからアップするやりかたがわかんねえ。

パニくりそーなので、これは (/_・)/ おいといて、またもやサイト製作。

スタイルシートに戻ってくると、なんやら、プラウザかえればWin Netscape 4.7で開くとクラッシュする始末。

(とてつもなく略)


いろいろあって、ようやくWinIE 5.5、WinIE 6.0、Win Netscape 4.7、Win Netscape 6.2、Win Netscape7.1、Win Opera 7.23、Win Mozilla 1.6、MacNetscape 7.1、MacNetscape7.02、Safari でデザイン統一達成したら、最後の MacIE 5.1 に3週間かかりっきり。左の人さし指が疲れたよ。

あまりにもストレスで、現在運営中ここでは非公開の自分のサイトでぼやいても誰も相手にしてくれず、ついに見かねたリアル友人が「ほんとは楽しいんじゃないの」と掲示板に書き込む始末。それでこのサイトアップしたら、現在運営中ここでは非公開の自分のサイトの4倍のアクセス。ても40くらいだけど ・・・・ (;´Д`)

なんだかねえ。動いてたCGIもいつのまにかぶっ壊れてるし。

で、MacIE 5.1 もようやくクリア。
もう、ほんと、よろこんでいいやら、なんかよくわからなかったよ。





でもね ↓










SAFARI
MacIE 5.1 対策前









SAFARI
MacIE 5.1 対策後







  _、_( ,_ノ` )y━・~~~










春かぁ・・・・







バイクでどっか行こかな~








[PR]
by bravo650 | 2004-03-16 19:18 | スタイルシートダメダメ日記
MacIE 5.1 完璧・・・・・でも・・・・・・・
前回、MacIE 5.1 において念願のBOX(枠で仕切られた空間をCSSではこういう)の崩れは完璧に修正した。MacもってないのでHさんにテストしてもらい、メールのやりとりが一日一回なので、3週間かかった。

前回やり残したことが、

1 四角で囲ったなかの(水色の背景)文字の半角スペースが横に広がる




MacOS X 10.3(パンサー)  Safari


2 本文がBOX右にはみ出す




MacOS 9.2.2、MacIE5.1


これに対処することにする。

1 は、わけがわからずテンパり、半角指定を独特の記号を使わなかったせいか、などと考えパニくったが(そうだと、60~70あるテキストページ、すべて書換え → 地獄w)フォントへの{text-align: justify; text-justify: distribute;}がどうやら原因らしいということを突き止めた、てより推理した(このプロパティを指定するとIEだけ、文章の右端がそろい、カッコよくなる)。

対処法は、{text-align: justify; text-justify: distribute;}を削除。

2 は、{letter-spacing}をつかうとMacIE 5×ではおかしくなるという情報をすでに検索で見つけている(参照)。

このプロパティ、文字と文字との横の間隔を調整するというありがたいもの(Winバージョンのプラウザではどれも詰まりすぎ)。

対処法は、MacIE 5.1だけこれを読み込ませないことにする。以前書いた、MacIE 5.1だけに読み込ませない呪文、あれ、あとから検証すると使えてたことがわかったので、採用する。目印に、MacIE 5.1だけ、文字の周りに朱色のborderがつくようにする。

1、2を実行し、サーバーにアップ(テスト運行中)。
そしてHさんにメール。
Hさんから画像が届く。Hさんの環境 MacOS 9.2.2、MacIE5.1。

注) 今回の画像のアップ法ちくわやさんを参考にした。画像複数アップの裏業とセンターよせ。さんきゅ。













  うっしゃっ!







およ。
今度は safari も送ってきてるぞ・・・・。

















ヽ(`Д´)ノウワァァン!!


[PR]
by bravo650 | 2004-03-15 15:02 | スタイルシートダメダメ日記
★★ MacIE 5.1への対応、ほぼ達成 !!! ★★
 おれはいま失業中で24時間自由営業なのだが、朝6時頃に寝て、起きたのが夕方の5時過ぎ。
 普通だったら午後1時頃に起きるのだが、爆睡した。ひさしぶりの熟睡だ。

 ふへ~~。やっとおわったぜ。MacIE 5.1への対応。

 今回の解決もグーグルによる検索だった。

 同時に2つの対策をした。
 検証するときは、ひとつづつが良いが、なんせ MacIE 5.1 が手元にないのでいちいちそんなことやってられねえ。
 あっ、そうそう、これを見てるひとに断っとくが、スタイルシートでのレイアウト、趣味じゃねーですw テキストページだけでも6~70くらいあるサイトを作ろうとしたとき、デザインを一括でコントロールできるスタイルシートに飛びついたわけです・・・・そのときはバグのこと知らなかったので、こんな運命が待っていよーとは・・・・。

 【対策 1】/* CSS・スタイルシート質問スレッド【28】 */ らへんで拾った(よく覚えてないw)、「float した要素に margin を指定するとMacIE 5.1 ではおかしくなる(おもいっきり要約w)」てバグに対処。

 ヘッダ内の「div.data_title_ja」と「div.rew 」から margin を外す。もちろんバグ対策したあとは各ブラウザでチェック。問題なし(下手したらバグ対策をしたことによる他のブラウザでのレイアウトの崩壊を解決するため数時間かかることもある)。

 【対策 2】「float した要素の次の要素」にclear: rightをかけてfloatを解除しようとしていたのだが(おれの場合div.text)、clear: bothにして、念のためそのあとに続く要素div、pの全てに掛けた(どこまでかければいいんだ?)。

 で、アップしてHさんにメール
 昨夜、送られてきた画像。環境 MacOS 9.2.2、MacIE5.1。

a0007841_215313.jpg


・・・・・・・・・・・・・・・・・・・・・・なんて表現してよいやらわからん。
長かった。うれしい。むなしい。ほっとする・・・・

すぐにHさんにメール。

bravoです

ま、まじ??

し、信じられないwww



あ、ありがとうございまいた <(_ _)>

でも、中の文字が右に出てるので、対処します。
このバグは対策あり。

あと、「songs index」のほうは、どうですか?

[PR]
by bravo650 | 2004-03-12 21:54 | スタイルシートダメダメ日記
またバグ、めっけ
MacIEにおけるCSS表示の問題点  より

letter-spacingを使うと、ボックス要素との関係がおかしくなる(文字のはみ出し等)
"text-align:justify" を指定すると、なんか変(←おいっ)

両方とも・・・・


   使ってるよぅ


boxの横に文字がはみ出してる。


   ダメじゃん!! 


でもよう、letter-spacingが使えないスタイルシートって・・・・
あとひとつ、つながりないけど、fixedの使えないスタイルシートって・・・・
何か、人生の貴重な時間が無駄に使われてるような・・・・・
てか、納得ずくの無駄なことに使いたい・・・・
[PR]
by bravo650 | 2004-03-11 20:47 | スタイルシートダメダメ日記
Hさんへのメール
BRAVO です

またあらたに検索し、バグ対策しました。
http://ふりかけ/さささ.html

「songs index」の
http://ふりかけ/index.html
「8-2 Transitional float width 指定 」です。

「MacIE5」、スタイルシートを厳格に採用と、一部のサイトでは褒められてるんですけど、いろいろ検索すると、疑問。

これがスタイルシートの厳密な解釈だとしたら、素人には手も足もでないよな・・・・w

ぼやきすんませんw

お忙しいなか、いつもすみませんが、よろしくです。
[PR]
by bravo650 | 2004-03-11 19:16 | スタイルシートダメダメ日記
width、指定してみた
残すはこの「Mac IE5.1 」のみ。

 「Win Netscape4.7」 「Win Netscape6.2」「Win Netscape7.1」 「Win Opera 7.23」 「Mozilla 1.6」「Win IE5.5」「Win IE6.0」」「MacNetscape7.02」「MacNetscape7.1」」「Safari」

以上のプラウザでは、意図したデザインからほとんど崩れなかった(「Win Netscape4.7」には読み込ませないことで対処)。

今回は、関係ありそなスタイルシート、全部書き出してみた。


/* ボディ */
@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 {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
text-align: left;
}

/* バナー 「最終更新」と「BRA-NET」ロゴ */
div.banner {
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 {
min-height: 40px;/* Netscape 7.1対策 */
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 {

width: 80%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 0px;
float: left;
border: solid 2px #555555;
}

/* 「光と風と夢」 */
p.data_title_ja {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 0px;
padding: 1px;
font-family: "MS 明朝",serif;
font-weight: bold;
font-size: 170%;
letter-spacing: 0em;
line-height: 100%;
color: #333333;
border: solid 2px #cc6633;
}

/* 「戻るボタン」を囲む */
div.rew {
max-width: 78px;/* Netscape 7.1対策 */
width: 20%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: -30px;/* WinIE6.0でactiveとhover時bottomのmarginが30px程増える問題に対処 */
margin-left: auto;
padding: 0px;
float: right;
border: solid 2px #33cccc;
background-color: #ffffff;
text-align: right;
}

/* 「戻るボタン」のリンク 以下は省略 */
a.rew_top {
background-color: #bbbbbb;
display: block;
width: 78px;
margin: 0px 0px 0px auto;
padding: 3px 0px 1px 2px;
color: #555555;
font-weight: bold;
text-align: center;
}

/* テキスト */
div.text {
clear: right;
padding: 30px 37px 60px 37px;
width: 77%;
background-color: #ffffff;
border-right: solid 4px #555555;
border-left: solid 4px #555555;
}

/* 文章 */
p {
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%;
}

/* 四角で囲んだ文章 */
p.jyuuyou {
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;
text-justify: auto;
}

/* フッター 「戻る」ボタンを囲む */
div.footer {
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;
}



    で


サイトにアップし、H氏にメールし、テストしてもらった。
送られてきた画像。 MacOS 9.2.2 「MacIE5.1」








a0007841_43936.jpg







        ダメじゃん!!




          (;´Д`)



[PR]
by bravo650 | 2004-03-11 04:40 | スタイルシートダメダメ日記
width、指定してね~じゃん! 洒落に非ず
おれが現在悩んでる問題って(Mac IE5.1でboxの表示が崩れる)、これ?
2ちゃんの/* CSS・スタイルシート質問スレッド【28】 */ で拾った。

width 明示なしのブロック要素を float

floatを入れたら、widthの値を指定しなきゃならん、てことだ。


    で


スタイルシートを見てみると・・・・

div.data_title_ja {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 0px;
border: solid 2px #cc6699;
}
div.rew {
max-width: 78px;/* Netscape 7.1対策 */
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: auto;
border: solid 2px #cc6699;
background-color: #ffffff;
}



    width ね~じゃん!!



どうなることやら。
[PR]
by bravo650 | 2004-03-10 01:15 | スタイルシートダメダメ日記
前回の忘れ物
前回の書き込みのスタイルシート・・・・

/*
今度のコメントは、普通の終点を持つコメントです。
IE はこのコメントの終点を前のコメントの終点と見なします。
*/

これを最後に入れるの忘れてるな。
ひょっとして本番も?

・・・・忘れよ。


で・・・・スタイルシート 鉄の掟に追加。



   心をこめてコピペせよ

[PR]
by bravo650 | 2004-03-09 11:03 | スタイルシートダメダメ日記
Mac IE5.1、呪文でやっつけろ!
前回のMacIE5.1テストで大崩れだったので、検索をかけ、対処法を見つけた。コメント内のバックスラッシュでハック(ちょっと上にスクロール)。


ううっ、おれごのみの呪文系


ねすけ対策の呪文、感動もんだったなあ。


ようするに/* ¥*/これだな(わかりずらいが、ようするに円マーク)。


今回のバグ、floatプロパティが怪しそうなので、それをこの呪文でエスケイプすることにする。
で、スタイルシートに組み込む。ヘッダ内の要素のスタイルシート。

/*  スタイル : MacIE用
http://cgi2.html.ne.jp/~n_1_2_3/ie5cssbugsj.html#relative-inheritance
 */
div.data_title_ja {
margin: 0px auto 0px 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 0px;
border: solid 2px #cc6699;
}
div.rew {
max-width: 78px;/* Netscape 7.1対策 */
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: auto;
border: solid 2px #cc6699;
background-color: #ffffff;
}
/*
以上、MacIE5.1対策用スタイルおわり。
コメントの終点がエスケープされたコメントです。以下のスタイルは MacIE にはコメントの一部と見なされて読み込まれません。
以下、他のプラウザ用スタイル。

¥*/

div.data_title_ja {
margin: 0px auto 0px 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 0px;
float: left;
border: solid 2px #555555;
}
div.rew {
max-width: 78px;/* Netscape 7.1対策 */
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: auto;
float: right;
border: solid 2px #555555;
background-color: #ffffff;
}


で、サイトにアップし、H氏にメールし、テストしてもらう。
送られてきた画像。MacOS 9.2.2 「MacIE5.1」

a0007841_25143.jpg



       ダメじゃん!!




         (;´Д`)



[PR]
by bravo650 | 2004-03-09 02:52 | スタイルシートダメダメ日記