Webデザイン

CSSのコメントアウト注意点

Webデザイン

CSSファイルを一つのファイルで管理しているとものっすごい長くなってしまうと思うのですが、そういった時に管理をしやすくためにコメントアウトを適宜利用していることと思います。

私はいつもクラス名とかを忘れてしまうので、必ずコメントアウトをつけるようクセをつけています。
では早速CSSのコメントアウトをつける時の注意点をご紹介します。

閉じタグの前は絶対に半角英数字かスペースを

実はこの注意点、私自体が最近まで知らなかったことです…。

今まで特に問題なくCSSが効いていたので気にしたことなかったのですが、どうやらブラウザによっては*/の直前が全角になっていると閉じタグとして認識しないとのこと。

半角文字や半角スペースを置くとちゃんと閉じタグとして認識してくれるようなので日本語でコメントアウトをつける時は、

/* コメント */
/*コメント */

こんな感じで半角スペースを入れてコメントアウトを書けばOK。

大文字と小文字を区別する

CSSではid名やclass名を作るときに大文字と小文字を区別してくれます。
ですが、慣れないうちは小文字に統一して記述するようにしておくといいかもです。

大文字と小文字を使った書き方の例はこんな感じです。

<div id="Content">
<div class="NaviMenu">
#Content {
・・・
}
.NaviMenu {
・・・
}

使用できる文字の種類

id名やclass名に使える文字についてですが、開始は必ずアルファベットで記述します。
使える文字に関しては下記の通りです。

  • a - z
  • A - Z
  • ( _ ) , ( - ) ※アンダーバーとハイフン
#Content-Menu
.Content_Menu

オリジナルのわかりやすいコメントをつける

コメントアウトは自分や一緒にお仕事をしている人が管理しやすいようにつけるものです。
なので、オリジナルのわかりやすいコメントアウトを付けて、効率アップしちゃいましょう。

ちなみに私はこんな感じでコメントアウトを付けています。

/* =ヘッダー
----------------------------------------------- */

色々なサイトのソースを覗かせてもらうついでに、CSSのコメントアウトの書き方もチェックしてみて「お、これいいかも!」と思ったものを真似てみるのもありかもしれませんね♪

comment

タイトルとURLをコピーしました