では、途中でわかんなくなった、崩れた、このCSSの指定、何処に効いているのかわからない。
そういう場合に役立つ小技と、よくあるミスの紹介です。
- 突然、CSSが効かなくなった。
→大抵の場合、入れておくべき、; } が抜けているか、入っちゃいけないところに半角スペースが入っていたり、あるいは半角であるべきところが全角になっていたりというのが原因です。
bodyとリンクの色までは効いているのに、トップ部分の指定が効かなくなったなら、トップ部分かリンクの色の部分に上記のミスがあります。
ミスの直後からCSSが効かなくなる場合がほとんどだからです。
- 一カ所だけ、修正が反映されない。
→何かで上書きしていないかチェックします。
多いのはまず、例えば、marginを修正したのだが、その後にもう一度marinの指定が入っていて、前の部分は打ち消されているのに、前の方ばかり修正しているというパターンです。
もう一つは、内容が入れ子になっていて、表に出ている方を修正していないパターンです。
例えば、TDの中にDIVを入れており、その背景色を変えたいならば、DIVの背景色を変えなくてはいけません。
何故ならTDの背景色はDIVの色で覆い隠されるからです。
その場合、DIVの背景色指定を消すか、DIVの背景色を変えないといけません。
- どこにCSSが効いているのかわからない。
→怪しいと思う箇所のCSS指定に、border :1px red solid; という枠線の指定を加えます。
tableを組んでいるなら、HTMLのtableタグに、border=1と入れます。
そうするとその指定範囲が枠で囲まれて表示されます。
- 修正が反映されているのかどうか、よくわからない。
→marginやpaddingなど微妙な数字の変更は、上手く効いているのかわからないことがあります。
その時は、数字を思い切って100pxなど大きくしてみます。
それでどかんと空白が増えれば効いているので、改めて数値を指定し直します。
それでも反映されない場合、一度ブラウザを落とすか、キャッシュを消してから読み込み直してみます。
キャッシュが残って、見た目反映されていないということが、ことにIEの場合、よくあります。
- ここを変更したいのだが、どこを弄ればいいかわからない。
→エディタの検索機能を有効活用します。
まずHTMLやCSSを一旦、エディタにコピーペーストします。
次にブラウザ上の画面で変更したい箇所を見ます。
例えば、Adminというリンクの辺りを変更したいならば、先に保存したエディタのファイルで、Adminという文字を検索してみます。
そうすると、一発で修正すべき場所が見つかります。複数見つかった場合は、前後の言葉で判断します。
変えたい内容がCSSならば、見付けた場所を囲っているタグや、そのタグへのCSSのクラス指定の文字を見ます。
そして、今度はそのタグやクラスの名前で、CSSの方を検索してみます。
そうすれば、変えたい場所に関して指定しているCSSの箇所が直ぐ見つかります。
- 同じような箇所が他にないか探してみる。
例えば一部だけリンクの色を変える方法などは、大抵ブログタイトル部分のCSS指定などに使ってあります。
自分がやりたいことが、既にされている箇所がないか考え、あればその箇所を探し出して真似してみて下さい。
そのままで上手くいかないなら、その箇所のタグやプロパティを、紹介したサイトで調べてみましょう。
どのように応用したらいいかわかるはずです。
- ブログ固有タグを自分で確認する。
→FC2 テンプレート機能一覧
→エキサイト スキンタグ集
ブログによって固有のタグがあり、その設定によって出来る事と出来ない事があります。
それはブログのタグ一覧を見れば、必ずわかります。
例えば、FC2では、<%url> （ブログURL）と<%blog_name> （ブログタイトル）が別々の固有タグになっています。
ですから、タイトルだけ表示させ、自分のブログへのリンクはTOPという文字でリンクさせるなどが可能です。
ところが、エキサイトでは、<$header$> （リンク付きブログタイトル）、<$blogurl$> （リンク付きブログURL）という固有タグしかありません。
タイトルだけ、URLだけというタグがないのです。
従って、タイトルやURLだけ出したい、リンクはさせたくないという場合、タイトルやブログのURLは直接に文字を入れなくてはいけません。つまりブログタイトルを変更しても、自動的に変更はされないので、自分で編集画面で書き直す必要がありますし、公開した場合、当然、自分のブログのタイトルになっていて、他の人のブログのタイトルに変わったりもしません。
こういうことは、ブログの固有タグ説明を見ればわかることです。
それを見もしないで、○○できますか？という質問は止めましょう。
- ソースの格好良さは二の次と諦める。
デザイン目的でtableを使うのはよくないなどと、よく説明サイトに書いてありますが、tableを組まずに、様々な環境でも表示を崩れないように設定するのはとても難しいです。
無理はせず、tableを組んで作りましょう。
- HTML内の指定も有効活用しましょう。
IEなどセンタリング関係のCSS指定を綺麗に無視するブラウザがありますので、CSSが駄目なら、HTMLの方に<center>タグを入れておくのも手です。
ただしCSSとHTMLの指定が矛盾しないようにすることです。
CSSでは左寄せを指定、HTMLではセンタリングなどとしていては意味がありません。
- 絶対値の指定は最低限にしましょう。
幅を○pxなど絶対値で指定していると、モニタのサイズが変わると横スクロールが発生したり、えらく空白が大きくなったりします。
画像の幅と揃えたいなど、どうしても絶対値が必要な場合以外は、%など相対値指定にしておきましょう。
内容が入りきれずにはみ出す危険がぐっと下がります。
- 基本はまず内容が読めることです。
それ以上の微妙な配置の拘りなどは、ブラウザやモニタによって、どうせ思った通りに表示されるケースは少ないですし、しばらくやって駄目なら諦めましょう。
それ以上に拘るなら、それは自己満足と自覚し、自力で出来る範囲で止めておくか、ひたすら試行錯誤しましょう。
- 一晩寝かせましょう。
どうしても駄目と煮詰まったら、それはそのままにして一晩ゆっくり眠りましょう。
冷静になって、頭もすっきりしてから見直すと、なんだ、簡単ってことはよくあります。
- 人のHPのソースを見る癖をつけましょう。
これいいな〜と思ったら、あるいは困ったな、このサイトのようにしたいのにと思ったら、まずソースを見ます。
そして、それを参考にさせてもらいましょう。
- 外部ファイルでCSSを指定している場合（FC2ブログもこの形式です）必ずページhead部分にそのCSSファイルへのリンクがあります。
そのリンク先を見てみましょう。
Click for your forutne! 