さて、今日はHTMLにCSSを記述したときのトラブル防止についてです。
・CSSがうまく表示されない！
・ブラウザにCSSが表示されちゃってる！
・どこになんのCSSを書いたかわからなくなった！
など場合の対処法をご紹介します！
コメント扱いにする場合の記述方法
HTMLファイル内にCSSを記述した場合、
表示するブラウザが”CSS未対応”だと、
CSSで記述した部分が本文としてWebページ上に表示されてしまうことがあります。
これを防止するために、
”コメント扱いにする”という方法があります。
HTMLファイルにコメントを記述する
・<!–○○○–>
HTMLファイルにコメントを記述するには、
「<!–」～「–>」でコメントにしたい部分を囲みます。
「<!–」～「–>」で囲まれた部分はブラウザに反映されないため、
補足を入れる場合などに使用します。
CSSファイルにコメントを記述する
・/*○○○*/
CSSファイルにコメントを記述するには、
「/*」～「*/」でコメントにしたい部分を囲みます。
「/*」～「*/」で囲まれた部分はブラウザに反映されないため、
補足を入れる場合などに使用します。
例）
CSSを見返したとき、どこに何を書いたのか、
前回どんな変更をしたのか、
正直、見直しても思い出せません(笑)
上記のコメントの記述を使って、
/*4月6日色変更*/
/*ヘッダー画像の背景*/
など書き込むことで、
過去の修正履歴やCSSの記述場所をすぐに見つけることが出来るので便利です＾＾
CSSファイルで文字コードを指定
上記の場合と同じく、CSS未対応のブラウザでWebページを開いた場合や、
CSSファイルの文字コードが正しく判別できない場合、
指定通りの表示がされない場合があります。
こういったことを防止するために、
CSSファイルでも文字コードの指定をすることがベストです。
文字コードはCSSファイルの文頭（一番最初）に記述します。
・@charset “文字コード“
CSS記述の工夫
実際にCSSファイルをみてみるとわかると思いますが、
とにかく英数字と記号の羅列が続きます。
初めて見たら、目がチカチカします(笑)
そんなCSSをより見やすく、
そしてミスや記入漏れを防ぐためにも、
改行、タブ、半角空白を使って記述します。
改行、タブ、半角空白がブラウザ上の表示に影響することはありません。
スタイルごとに改行、
スタイルの最初にはタブ、
スタイルの最後には「;（セミコロン）」
を付けることが、一般的です。
ツールを使ってホームページをつくり、
そのCSSを編集しようとした場合には、
既にたくさんのCSSが記述されています。
スペースの入れ方や改行の仕方はツールごとにそれぞれ異なります。
基本的にどうやって記述してもCSSは反映されますが、
既存の書き方に合わせて記述をすると後ほど変更する場合なども見やすいので、
それぞれに合った記述をしてみてください＾＾
【個人的なお話】
週末は通院の為、みなとみらいまで行ってきました！
夜は同級生であり、シンママ友達でもある友人のお宅にお邪魔して、
たっぷり飲んで、たっぷり話してきました(笑)
私、お酒はめっぽう弱いんですが、
お酒自体は大好きなんです♡
ダーツバーで働いていたのもあって、
お家でカクテルを作って楽しんだりしてます。
この投稿は、以前運営していた同名のブログに当時書いたものを再掲載しています。
そのため、現在はデータがない画像などもあります。ご了承ください。
また、アフィリエイトやホームページの情報についてのブログですが、情報としても古いものが多いです。
過去の記事を改めて更新する予定はございませんので、ご承知おきください。