CSSのコメントアウトはスタイル無効以外にも管理者にとって重要な用途がある
CSSのコメントアウトは、/**/で囲った部分をプログラムとして無効にする機能です。
スタイルの範囲や特定セレクタとプロパティ部分のみを無効にすることができます。
コメントアウトを使って管理者が迷わないようにCSS設定のメモや注意書きを入れるのが一番重要です。
CSSのコメントアウト機能
CSSのコメントアウト機能は、「CSSコード」や「書いたメモ・説明部分」を、専用タグで囲う事で反映されます。
コメントタグで囲まれたCSSコードや文章は、プログラム上無視され効果を発揮しなくなります。
CSSコードの一部分あるいは特定範囲を無効にしたり、ファイルを開いた人に見てもらいたい説明を残す際に使われます。
コメントアウトの書き方
実際には以下の様に先頭と末尾をコードで挟みます。
/* この中にコードや説明が入ります。 */
/* */で挟む事で、間に入ったコードや文章は無効になります。
/*--- ---*/
上記は「-」が入っています。/**/の内側であれば、全角スペース半角スペースも自由です。
/* コメント文章が入ります。 コメント文章が入ります。 コメント文章が入ります。 */
この様に改行してあっても、コメントとして機能します。
コードの無効化
コメントアウトした個所はCSS効果が無効になります。
クラス全体の無効化
/* .contents{ margin: 0; padding: 10; background: #fff; border: solid 1px #cc0000; }*/
上記の場合、.contentsクラス自体が無効になります。
特定セレクタ部分の無効化
.contents{ margin: 0; padding: 10; /* background: #fff; */ border: solid 1px #cc0000; }
上記の様にセレクタとプロパティの部分だけを囲う事も有効です。
背景が白でなくなるだけで、他は有効です。
メモや覚書の記載
コメントアウトはCSSコードを無効にする以外に、「メモ書き」や「その設定をした理由」を書くために使われる事が多いですね。
この中であればどれだけ日本語文章を書いても、CSSの動作には影響しない訳です。
その意味でコメントアウトは、プログラムのためでなく管理者のためにあると言えるでしょう。
コードの設置理由を書いた例
/* --------------------------------------------------- 本来はstyle.cssの100行目で管理。 スポットでstaff.htmlの一か所のみ色を変更している。 --------------------------------------------------- */
上記は---を並べています。/**/の内側であればすべて無効なのでこういったな装飾ができる訳です。
コメントアウトを書く理由
CSSを書いているとソースコードがやたら長くなる事がありますよね。
どこにどの様な記述・命令を入れたのか、長くなればなる程わかりにくくなるものです。
そんな時に随所にコメントをつけておくと、迷わずに済みます。
後からファイルを開いた時思い出せるか
CSSでコントロールする際は、注意しておかなければならない部分が少なからず出てきます。
書いている時は覚えていても、しばらくすれば必ず忘れますよね。
後からCSSファイルを開いたとき、その仕組みや注意点を思い出せなければなりません。
コメントアウトはそのためにあると言って良いでしょう。
後からCSSファイルを開いた人がそのコード部分の意味を理解できる様、誰が見てもわかりやすいコメントにする必要があります。
CSSファイルの共有
特に他の管理者とCSSを共有する場合は、相手が書いたCSS記述の意図を把握するのには大変な時間を要します。
こんな時にCSS上にコメントで、それがどこに機能する部分なのか、その様にしている理由などを書いておくのです。
そうする事で複数の担当者の中で情報を共有する事ができます。
コードだけを見るよりも、「日本語による補足情報」を見た方が何倍もわかりやすいですしね。
コメントアウトは、CSSを扱う管理者の手助け・サポートをする大事な機能と言えます。
コメントアウトで何を書く？
コメントアウトで書く内容については基本的に自由です。
しかしあまり意味の無いことを書いても仕方ありませんよね。
その設定の理由や影響について
まず重要なのはその様に設定している理由や、ここを変更した場合に影響する範囲などでしょう。
まずコメントが書いてあれば、簡単に変更したり消したりはしなくなりますよね。
「そこを変更する際は注意が必要」と書いておけば、未来の自分や他人がそれをみて用心する訳です。
コメントによるナビゲート
例えば以下の様にコメントしておく事で、編集者をナビゲートできる訳ですね。
/*-- 下を修正する場合 color.cssの10行目もセットで変更が必要 --*/ .contents{ …記述されているCSSスタイル }
このコメント見た管理者はきっとcolor.cssの10行目を確認する事でしょう。これで変更によるミスが少なくなります。
CSSはどんな変更でも静かに反映される
一番まずいのは、その部分を気軽に変更した事で他のところに大きく影響した事に気づかない場合です。
対象部分を一か所変更したかっただけなのに、いつの間にか「複数の個所でレイアウトが変わった」なんて事がよくある訳です。
CSSは意図しないところが変わっても何らエラー警告が出ませんので、注意が必要です。
変更履歴として使う
これは私もよく実践していますが、「以前どのような設定だったか」を残しておく事です。
コメントアウトはCSSの効果を部分的に無効にできると同時に、無効にする前に何かが書いてあったのかの履歴にもなります。
ひとつ前の状態に戻す
例えばクライアントからの指示でWEBページのCSSスタイルを変更したとしましょう。
でもその後しばらくして、「やっぱり元に戻してほしい」と再度依頼される事がよくある訳です。
そんな時にコメントアウトが役に立ちます。
・前の設定部分をコメントアウト
・新しい設定を書く
そうする事で以前はどのような設定だったのかを知る事ができる訳です。
コメントアウトしておけば、ひとつ前の設定に戻る事ができます。そういった履歴として使う事もできるのです。
元に戻す様な修正依頼自体あまり無いかも知れませんが、そういう傾向があるクライアントだと知っていれば注意が必要ですよね。
複数スタイルをテストする
コメントアウトは、WEBサイト制作中にAとBの2種類のスタイルから良い方を選びたい場合にも役立ちます。
従来のA案をコメントアウトして、一旦新しいB案の設定を入れてみる訳です。
それがダメだったらAに戻せば良いのですが、ここでAスタイルを残していないと元の状態に戻り切れない事があります。
私は以前の設定はできるだけコメントアウトで残すようにしています。
コメントアウトを書く場所
CSSファイルに書く
通常はCSSファイルの中に/**/で囲んで書き込んでおきます。
/**/の中であれば記号やスペースも自由ですし、長い文章になっても問題はありません。
コメントアウトは何度書いても良いのです。
HTMLのheadタグ内に書く
コメントアウトはCSSだけでなくHTMLソース上にも書けます。
headタグ内に<style></style>で直接CSSコードを入れている場合もコメント機能は有効です。
通常通り/**/でコメントアウトして文章を入れる事ができます。
headタグ内記述例
… <style type="text/css"> /*--- 常に100％幅で画像を敷き詰める設定 ---*/ img.w100{ min-width: 100%; } </style> </head> <body>
HTMLのbodyタグ内に書く
インラインでCSSを直接bodyタグ内に記述するケースもありますが、こんな場合は注意が必要です。
bodyタグ内では通常の/**/が使えないためです。
非表示タグを使う
bodyタグ内に直接書くCSSに対し、どうしてもコメントをつけたい場合は非表示タグを使いましょう。
<!-- ここにコメントを入れる --> <div style="background-url: (images/bg3.png);"> …
<!---->は、CSSのコメントアウトではなくHTMLの非表示用のコードタグです。
中に入れた文章は「非表示扱い」となり、HTMLのレンダリングに全く影響しません。
主にコンテンツのある部分を丸ごと非表示にする場合によく使われます。
ただしWEBページのソースを開くと誰でも見れてしまうので、本来その様な使い方をするべきではありません。
コメントアウトのショートカットキー
エディタによってはキーボードのショートカットを使って、コメントのタグを自動挿入する事ができます。
Macの場合…commandキーを押しながら「/」キー
Windowsの場合…Ctrlキーを押しながら「/」キー
コメントアウトする場合は、以下のようにコメントアウトする行を選択して操作します。
逆にコメントがついた行を選択して同じ操作をすると、コメントが解除されます。
使っているエディタごとに操作が違うはずなので調べてみて下さい。手で入力するよりは断然楽です。
