プロフィール
 

中尾英司

Author: 中尾英司
Doing(させる,働きかける)ではなく、Being(共にある,見守る)―半歩あとから


カウンセリング申込み要領

中尾真智子ブログ

ホ・オポノポノ to IC―
「ごめんね」「ゆるしてね」
「ありがとう」「愛している」

 
ピックアップ目次
最近の記事+コメント
 
 
カレンダー(月別)
 
02 ≪│2017/03│≫ 03
- - - 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 -
 
カテゴリ
 
 
全ての記事を表示する
RSSフィード
 
 

ブログの型崩れの原因 解決!

2011/01/11(Tue) Category : ネット・パソコン
Firefoxでサイトを開くと型崩れしているのが気になっていたが、じっくり取り組む暇もなく、ようやくこの年末に原因を調べ解決できました。


■1、Firefoxで型崩れ--------------------------------------------

「Firefox 型崩れ」で検索すると、下記に回答が載っていた。
http://oshiete.goo.ne.jp/qa/4368327.html

ここで初めて、Firefoxが正しくてIEの方にバグがあると知り、へぇ~IEの方が世界的な基準を満たしていないんだ~、と驚く。
padding(余白)の解釈がIEとその他のブラウザでは真逆なのだ。

世界基準は外側に余白を取るが、IEは内側に余白を取るので、width(幅)とpadding(余白)を同時に指定するとボックスの幅が変わってくる。
たとえばあるボックスについて{width: 100px;padding: 10px;}と指定した場合、全体の横幅は次のようになる。

基準 120px
IE  100px

あ~、これでIEではまともに見えるのに、Firefoxでは横に突き出して型崩れするのね~、と思った。どのブラウザでも型崩れしないで見えるようにするためには、width(幅)とpadding(余白)を別々に設定しなくてはならない。

というわけでFC2の管理画面を開いて、テンプレートのCSSを弄くってみたわけだがうまくいかない。



■2、IE6対策----------------------------------------------------

上記の解答の中にあってちんぷんかんぷんなので読み飛ばしていた「DOCTYPE宣言」や「XML宣言」などにも関係しているのだろうかと、「CSSによる段組(マルチカラム)レイアウト講座」も読んでみた。

DOCTYPE宣言というのは、いわばきちんとしたCSSの形式で書かれていますよ、と冒頭に書く(宣言する)こと。これが冒頭に書かれていればCSSも世界基準で書かれているものとみなしてCSSの通りに表示しますよ、それが書かれていなければ間違いを補完するモードで表示しますよ、ということのようだ。テンプレートには、それが書かれているから問題ないのだろう。

「XML宣言」というのは冒頭に書かなければならないが、なくてもよさげなものらしい。それにIE6にはDOCTYPE 宣言より前に何か書かれていると、DOCTYPE 宣言なしとみなして自動的に補完モードになってしまうバグがあるため、書かない人もいるようだ。 

「XML宣言の省略条件まとめ XHTML+IE6で起きる問題とは」

へぇ~、そうなんだ―というわけで、見に来られている方の中にはIE6の方も15%ほどいらっしゃるので、外すことにした。



■3、他のテンプレートと比較------------------------------------

さーて、そんなことしてても一向にFirefoxの型崩れは直らない。
他のテンプレートを参考にしてみよう、ということでFC2の共有テンプレートを2,3ダウンロードして目を皿にする。

すると、中に『490px-10px-10px=470px paddingの分を引く』という記載を見つけた。あ~なるほど、横に突き出していると思われる要素の部分についてはその左右のpadding(余白)分を引くという手もあるのかなぁ、とともあれやってみることにする。……はい、変化なしでした(--;)。

そこで原点に立ち返って、再度原初のテンプレートとの比較をすることに(最初っからそれやれよ、って話なんですが… ^^;)。カスタマイズした部分を慎重にチェック。
う~ん、それでもダメ…。



■4、フォントに秘密があった!----------------------------------

そしてふと気づいたのが、フォント。
そう、いつぞや「font-family」を変えたのです。

font-familyが、どのような意味を持つのかについては下記の記事が参考になります。
「ヒラギノとMS Pゴシックとメイリオの悩ましい関係」

もしかして…これ??
原初のテンプレートではArialが一番最初に来ている。でも、Arialがあまり好きではなかったので、それを消して、その次のLucida Grandeを最初に持ってきたのだった。そちらの方が英数字が読みやすかったのだ。

そこで、Arialを一番最初に戻した。
と……な~んとまぁ、直っているではないの!?

な~んだ…
あれだけ時間をかけて試行錯誤して、結局、フォントかい?!

そーいえば、フォントを変えるだけで「---------」の長さが変わるよねー。そーいうことだったんだぁ。





★無意識に避けていた?------------------------------------------

さて、一連を振り返って思うこと。
「あ~、人間って、一番触れたくないことは無意識にスルーしているんだなぁ」ということ。

フォントを変えることによって、たとえば同じ「12px」でもヨコの長さが変わってくることは体験していた。気づいてみれば、「あー、そーだったよね~」とすぐに思い当たる。

けれど、自分にとって読みやすいなぁと感じていたので、フォントを変えたくなかったのだろう。だから、フォントに原因を求めることを無意識にスルーしていたのだ。

そして、あれやこれやとあちらこちらに原因を求めて捜し歩き、そして何かを見つける都度、その目の前のことに飛びついて時間をつぶした。

もうここまでやったからいいかと投げ出しそうにもなったが、型崩れのまま放置するのも気持ちがスッキリしないので粘った結果、フォントに“たどり着かざるを得なくなった”わけだ。



あー、この迷走具合って……

なぜ、あれこれと時間をかけて悩むかといえば、問題の本質にたどり着きたくないからなんですよね~(--;)。
なぜなら、その本質部分を変えたくないから。

そして、気づいてしまったら変えなくてはならないから。



こういう風に、気づきたくないから延々と試行錯誤を続ける場合もあります。そして、やるだけやったからもういいでしょと自分に言い聞かせて自分をあきらめさせる―私も、まんまと自分をごまかすところでした。

でも、その場合もどこかで自分をごまかしたことを自分が知っているから、苦しみは続くんだよね。結局、イヤでも問題の本質と向き合わない限り、スッキリと晴れた日常を送ることはできません。



あーー、こうして冷静に振り返るとなんとまぁ無駄な時間を過ごしたことかと思うわけですが、一方でそうやって時間をつぶしつつ問題の本質にぶち当たるための心の準備をしていたともいえるわけで、過ぎてしまえばみ~んなマルです。





…というわけで、1月1日からFirefoxでの型崩れは直り、本文の文字は大きくなって以前よりも見やすくなっていると思います(^^)。


【追記】
その人の持っているパソコンによってインストールされているフォントが違ったり、ブラウザで表示されるフォントの優先順位が違ったりします。私がFirefoxで見たときに型崩れしていたのは、私がフォントからArialを抜いたからで、それをしていない方は型崩れしていなかったかもしれません。
そうなると、自分がそう見えているから、他の人にもそう見えているんだろうと思っていたわけで、つくづく独り相撲ですよね~(^^;)。



関連記事
 
Comment0  |  Trackback0
 
 

Trackback

 

Trackback URL :
この記事にトラックバックする(FC2ブログユーザー)

 
 

Comment

 
    
 
Home | Top ▲
 
はじめにお読み下さい
 

読まれる上での留意点
自分を取り戻す方法総目次
*全記事リンクフリーです

 
ブログ内検索
 
Google

Web このブログ
 
会場でお会いしましょう(^^)
風化させまいカレンダー
 
 
著作
わが子を守るために
記事
写真/動画集はこちら↓
 
 
お問い合わせなどあれば↓
 

名前:
メール:
件名:
本文:

 
ブックマークに追加
 
 
月齢
 
Today's Moon phase
 
↓このパーツを設置すると14本の苗木を植えられます
QRコード
 
QRコード