もうかれこれ１０年以上。
テキストメニュー
■馬鹿発言(451件)
■ショートぼやき(13件)
■普通日記(120件)
■ゲーム実況(48件)
+ キャプテン翼2(41件)
+ ドラゴンボール大魔王復活(5件)
+ 平成新・鬼ヶ島(1件)
■クソゲー？クリアレポート(48件)
+ 星をみるひと(8件)
+ ウィザードリィ(7件)
+ シャドウゲイト(12件)
+ ディジャブ(1件)
+ 正義の味方(13件)
+ ドラゴンクエスト１(7件)
■無駄ゲーム(28件)
■無駄世界(43件)
+ 友人Ｋ体験レポート(13件)
■普通のゲームレビュー(11件)
■俺ソフト（RPGツクール）(4件)
■レトロゲーを楽しむ(3件)
■パチ報告(1件)
■参加型企画(8件)
+ テキスツ下克上(8件)
■ショートぼやき(13件)
■普通日記(120件)
■ゲーム実況(48件)
+ キャプテン翼2(41件)
+ ドラゴンボール大魔王復活(5件)
+ 平成新・鬼ヶ島(1件)
■クソゲー？クリアレポート(48件)
+ 星をみるひと(8件)
+ ウィザードリィ(7件)
+ シャドウゲイト(12件)
+ ディジャブ(1件)
+ 正義の味方(13件)
+ ドラゴンクエスト１(7件)
■無駄ゲーム(28件)
■無駄世界(43件)
+ 友人Ｋ体験レポート(13件)
■普通のゲームレビュー(11件)
■俺ソフト（RPGツクール）(4件)
■レトロゲーを楽しむ(3件)
■パチ報告(1件)
■参加型企画(8件)
+ テキスツ下克上(8件)
最新テキスト
■カーシェア・ラプソディ(06/28)
■会ったことのない友人の噂(07/19)
■もう時効だろうから毒吐くわ(07/04)
■ゲーム実況の苦悩・PS2編(02/28)
■ゲーム関連のネット番組の裏方やる事に(01/09)
■会ったことのない友人の噂(07/19)
■もう時効だろうから毒吐くわ(07/04)
■ゲーム実況の苦悩・PS2編(02/28)
■ゲーム関連のネット番組の裏方やる事に(01/09)
コメント
■夏の日の１９９３
+ 乃愛(02/01)
+ 乃愛(02/01)
■もう時効だろうから毒吐くわ
+ 元新人(08/31)
+ めいぱぱ(08/31)
■遂にやってしまいましたよ・・・
+ 元新人(10/27)
+ 乃愛(02/01)
+ 乃愛(02/01)
■もう時効だろうから毒吐くわ
+ 元新人(08/31)
+ めいぱぱ(08/31)
■遂にやってしまいましたよ・・・
+ 元新人(10/27)
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
| 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 |
| 29 | 30 | 31 |
月別テキスト
人気テキスト
- 歴史は繰り返される (25)
- 星野鉄郎の変遷 (22)
- カーシェア・ラプソディ (19)
- ゲーム実況の苦悩・PS2編 (18)
- ひぐらしのなく頃に祭〜カケラ遊び〜 (16)
リンク
検 索
プロフィール
ログイン
現在のモード: ゲストモード
俺つぶやき
なんか買うてやー
月１万はイケるね
月１００万とか夢みたいなこと
言ってないで、目先の１万円に
飛びついたらいいと思います。
俺は大体月２万くらい、これで
稼いでます。パソコンで文章を
打つのが得意だったら、絶対に
おすすめ。月１万はでかいよー
お知らせ
2009,06,02 / 21:30
昨日から何時間、HTMLやCSSと向き合った事か。何時間borderとmarginとpaddingとwidthとdivで悩んだ事か。もうしばらくCSS見たない・・・orz
でもまあ折角色々いじって何とかなったんで、今回勉強になった事をつらつらと羅列していこうかなと。なんでHTMLやCSSに全く興味がない人は、読む気しないと思います。しかもかなりな長文。とにかく形に残したいという自己満足ですイェー。
■!DOCTYPEが相当重要
HTMLの頭に書く宣言ですが、HTMLだけならそう意識しなくてもいいっていうか、書かなくてもなんとかなるんですが、CSS使う人にはめっちゃ重要。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">みたいな感じのやつです。HTML書いた人なら見たことあるかと。
俺はこれを全く理解してませんでした。挨拶みたいなもんかと思ってたわけで。でもこの!DOCTYPEによって、ブラウザのCSSにおける解釈が、標準準拠モードと後方互換モードに切り替わります。
わかりやすく言っちゃうと、標準準拠モードは折り目正しいマニュアル君なだけに融通が利かない、後方互換モードは融通が利くが、多少の間違いも勝手に解釈してしまうクセがあると、こんな感じですね。
CSSをしっかり正しくやりたいのであれば、迷わず標準準拠モードの!DOCTYPE宣言をしましょう。さきほど書いたタグがそれにあたります。俺はそれを知らなかった為に、今回の間違いを起こしました。
■FireFox3での不可思議な現象？
今回の俺は、ブログスキン制作の際、どのブラウザでも後方互換モードになるよう宣言してた（後で知ったんですけどね）わけです。しかし不思議な事に、IE6や7では後方互換で解釈されるのに、なぜかFireFox3では、標準準拠で解釈されていました。
これが今回のレイアウト崩れの最大の原因でした。だったら、IEでも標準準拠モードで認識されるようにすれば・・・と宣言しなおしたら、今度はIEがレイアウト崩れ発生・・・しかもFireFox3でもさほど崩れは治らず・・・orz
■borderとpadding
この２つの要素が今回最大の難敵。今まで俺が使ってたCSS、つまり後方互換モードにおける動向と、今回採用した標準準拠モードにおける動向とでは全く異なります。これを知らないとまず間違いなくレイアウト崩れを起こします。
例えばwidthで300px指定したブロックがあるとしましょうか。
後方互換でそのブロックにborderで1pxの線を引くと、そのブロックの横幅は合計で302pxになります。罫線はブロックの外側に引かれるという事。
でも標準準拠では、罫線はブロックの内側に引かれ、その分ブロック自体が外に押し広げられる事に。結果としては同じですが、標準準拠の場合、borderだけではなく、paddingでも同じ。
幅が300pxで、1pxのボーダーで囲われた、左右のpaddingの合計が10pxのブロックを作りたい場合のwidthの値は
１．後方互換・・・298px（左右の罫線1px、合計2pxをマイナス）
２．標準準拠・・・278px（左右の罫線及び、左右のパディング、合計2px＋20px=22pxをマイナス）
つまり、標準準拠の場合、paddingもブロック内に押し込められ、かつ数値分そのブロックが押し広げられるという感じ。
・・・なーんか変なの。width指定してんのに、他の要因で指定したwidth通りにならないって。一般的に正しいとされてるのは、標準準拠らしいんですけど、後方変換のほうがわかりやすいしめんどくさくないんだけどなあ。
幅300pxのブロック
width278px、padding10pxの表示
width298px、padding10pxの表示
※当ブログでは、標準準拠モードで見えるように!DOCTYPE宣言してる為、ほとんどの方が、上のブロックが300pxに見えていると思います。
■CSSファイル編集時のインデント
テキストエディタでCSSファイルを編集している際に
.menu_bar{
font-size:12px;
background-color:#FFFFFF;
}
こんな感じに、TABキー1回押して、左端に半角2文字分のインデントをつけて、ソースを読みやすくしてるんですが、まさかこれがネックになるとは思ってもみませんでした。
IEではこれで全然問題ないんですが、どうもFireFoxだとうまく読み取ってくれません。インデントとしてではなく、全角1文字として認識しちゃってんのかも。
試しに全部インデント消して、代わりに半角1文字分のインデントに修正したら、直ったんですねこれが。これに気づくまでが一番時間かかったし。
・・・というわけで、やたら時間はかかりましたが、一応IEでもFireFox3でも見た目ほとんど同じってところまで修正しました。ネット検索しても、なかなか知りたい情報を得られなかったのが最大の敗因。
IEでキレイに表示されてても、FireFox3では目も当てられないという状況はちょいちょいあるようで。ブロガーは一度FireFox3ダウンロードして、自分のブログ見てみるといいです。
試しにFC2でブログやってる友達のサイトみたら、罫線がほとんど表示されておらず、まっちろなページでした。うわー。業者側で用意したブログスキンにも不具合でてんのか。こりゃ大変だ。
なんで、まずFireFox3で見た目を確認して、IEで検討したほうが、作業が少なくて済むと思います。２日間でこんだけHTMLとCSSの勉強したのはじめてだわ。報告くれたSANITY君、ありがとーう！
・・・て長。こんなん誰が読むんだ・・・orz
■同カテゴリ最新記事■
ええ。憔悴しきりました。若干気持ち悪くなってきました。でも達成感が半端じゃねえっす。これやったからって何かもらえるわけでもないのに、気が済まずについ・・・
アクセス解析みてみても、FireFox使いって決して無視できない数字なんです。だからなんていうかこう、さにてぃくんが見られないからなんておこがましい考えじゃなくてね。誰も使ってなかったら「ごめん！IEつかSleipnir使って！」とか言いそうな勢いでしたからええ！
今回は本当にCSSの勉強になったし、さにてぃくんも喜んでるんだからまあ一挙両得とでもいいましょうか。結果よければ全て良しの方向で！
アクセス解析みてみても、FireFox使いって決して無視できない数字なんです。だからなんていうかこう、さにてぃくんが見られないからなんておこがましい考えじゃなくてね。誰も使ってなかったら「ごめん！IEつかSleipnir使って！」とか言いそうな勢いでしたからええ！
今回は本当にCSSの勉強になったし、さにてぃくんも喜んでるんだからまあ一挙両得とでもいいましょうか。結果よければ全て良しの方向で！
元新人 | EMAIL | URL | 09/06/03 00:53
コメントする
この記事のトラックバックURL
http://rouhi.jp/tb.php/396
Copyright © ジカンノロウヒペイジ All Rights Reserved.
綺麗に直っているのを見てびっくりすると同時に
憔悴しきった様子の元新人さんを見てあわあわしてる私です。
普段使いがFirefoxなのですよ。
色々なブラウザ使って、結局ここに戻ってきて。
IEがないとWindows関連のアップデートができないので
IEも一緒に入れてはいるんですが…。
な、何か余計な手間をかけさせてしまったようで申し訳なく…（ガタガタ）
でも、これでブラウザ切り替えずに快適に楽しむことができます。
ありがとうございます＆本当にお疲れ様でした！