テキストエディタはCSSカスタマイズの必需品

とあるブログのコメント欄にCSSの誤りについて書き込んだのですが、gooブログのコメント欄には書式指定のないプレーンテキストしか書けないのでどこが間違いなのかや、どう修正すべきなのかをハッキリさせる事が難しい。

ということで、記事にしちゃいましたよ（わは）。

では、早速本題に入ります。今回の最大の敗因（失敗の原因）は、CSSというテキストの編集にテキストエディタを使用しなかったと思われることです。

ここで、テキストエディタってなに？って方のためにちょっとだけ説明すると、テキストエディタはテキストを編集するための専門のソフトウェア（アプリケーション）で、一字一句間違いなく入力しなければならないコンピュータプログラムのソースファイルや、プレーンテキストの代表である電子メールの編集などに適しています。
＃ 統合開発環境や電子メールに特化したエディタもあったりしますがそれは置いといて

それからテキストエディタというのは一般名詞であって、gooブログの編集画面にある「TEXTエディター」（固有名詞）とは全く別物ですから、間違わないでくださいね。

今回のCSSも、一字一句間違いなく入力しなければならないという点では、コンピュータプログラムのソースファイルと同様なのです。

例えば、「1」（アラビア数字の一）と「l」（英小文字のエル）と「I」（英大文字のアイ）や「 」（英字の空白）と「　」（漢字の空白）など、文字を正確に区別できなければなりませんし、「どこに改行コードや水平タブコードがあるか」など制御コードさえも明確でなければなりません。
＃ 改行の位置や;（セミコロン）の有無が致命傷になったりします

ここで、今回の問題？となったコメントをちょっと見てみましょう。

CSS誤り (かつを) 2006-06-01 21:23:23

記事と関係のないコメントで申し訳ありません。

なんかスッキリしたテンプレートだなぁと思ったら、違いました。
カスタムブルーのCSSを編集されたようですが、タイトルの背景画像がきちんと指定されていないようです。

【誤】
/* ブログのタイトル部上 */
.headerLight {
 background-image: url(http://blogimg.goo.ne.jp/user_image/49/dd/6dfe775b63cb4c4b3b3b0321e06
1b60c.jpg);
         top right no-repeat;
（5行、background-imageの行が分割されている、次の行に意味のない「top right no-repeat;」がある）

　↓
【正1】（backgroundプロパティで一括指定）
/* ブログのタイトル部上 */
.headerLight {
 background: url(http://blogimg.goo.ne.jp/user_image/49/dd/6dfe775b63cb4c4b3b3b0321e061b60c.jpg) left top no-repeat;
（3行）

【正2】（backgroundを細かく指定）
/* ブログのタイトル部上 */
.headerLight {
 background-image: url(http://blogimg.goo.ne.jp/user_image/49/dd/6dfe775b63cb4c4b3b3b0321e061b60c.jpg);
 background-position: left top;
 background-repeat: no-repeat;
（5行）

こんな間違ったCSSで出鱈目に表示しちゃうInternet Explorerって、最低ですね…。
とはいっても、手元に他のブラウザがなくて見栄えのチェックできないのかも知れません。
そういうときには、以下のサイトでチェックしてみることをお勧めします。

http://www.snugtech.com/safaritest/
（Safariでの見栄えを確認できる）

＃ 本当はFirefoxとかOperaとかをインストールして確認することをお勧めしますけど

かつを

魔女の儀式…（のコメント欄） - 京女のハマリゴト
赤太字と青太字は、引用者による。

ここは記事なので、問題箇所と修正内容の部分を（コメント欄ではできない）強調してみたんですが、それでもまだ分かりにくい。その理由は、どこに改行コードがあるか明確ではないからです。

テキストエディタに貼り付けてみた試しに、このコメントをテキストエディタに貼り付けてみました。あと、比較のためにWindowsのメモ帳にも（わは）。

書式（強調部分）は当然消えてしまいますが、テキストエディタなら改行コードがドコにあるのかはっきり分かりますよね。

メモ帳に貼り付けてみたそれに比べてメモ帳は…、行が長いから右端で折り返されているのか改行コードがあるのか全く区別できませんし、「 」（英字の空白）と「　」（漢字の空白）の違いも分かりません。

これでは、画像のURLの途中に改行コードがあるのか、単に折り返されているのか、分からないのも当然ですね。
＃ 今回CSS編集がうまくいかなかった原因は、ここら辺にあるのかも

Unknown (京女。) 2006-06-02 10:20:43

（中略）
【正１】でかえるとOKなのですが、【正２】ではうまくいきませんでした。画像が消えてしまいました。。。
うーん、いろいろ検索してみたのですが、イマイチ分かりません。。。。

魔女の儀式…（のコメント欄） - 京女のハマリゴト

え～とですね、今のCSSを見る限り、【正1】とか【正2】の修正内容をきちんと適用されていないと思うのです。

/* ブログのタイトル部上 */ .headerLight {  background-image: url(http://blogimg.goo.ne.jp/user_image/2a/d6/7275a458562dfcbc07e583d085930beb.jpg); left top no-repeat;   (中略) }

もしも、【正1】背景のプロパティを一括指定するのなら、background-imageではなく、backgroundです。また、url(画像のURL)の直後の;も不要な（あってはいけない）のです。

逆に【正2】背景のプロパティを細かく指定するのなら、left top no-repeatのキーワードを並べるだけでは駄目で、background-position: left topとbackground-repeat: no-repeatを（論理的な）別の行に書かなければなりません。
＃ CSSでは;（セミコロン）の前後が論理的には別の行となります

今のCSSでは、正しいbackground-positionポジションの指定がされていないために、意図した位置に背景画像が表示されないのでしょうね、きっと。
＃ SafariのCSS解釈について明るくはないですけど、右寄せされているように見えます

ということで、CSSカスタマイズする際には、メモ帳のような簡易テキストエディタではなく、もう少しだけまともなテキストエディタを使われた方が良いかと。フリーのテキストエディタもあることだし。
＃ 勿論、メモ帳でも細心の注意を払えば大丈夫ですが、そんなのは文明の利器に頼ってもよいと思う

---

魔女の儀式… - 京女のハマリゴト 2006年06月01日10:58
サクラエディタ