スタイルシートのコメントの記載方法

 スタイルシートにコメントを入れてみよう。

 スタイルシートをカスタマイズするときにコメントの入れ方を覚えておくと「どこをどうカスタマイズしたか忘れた!」なんてことが無くなる。

スポンサーリンク

コメントまたはコメントアウトとは

1、スタイルシートが何を意味しているかの説明を入れる。

2、サイト表示上は表示されない(のでコメントアウトというらしい)ので、基本的にはスタイルシートのカスタマイズなどのときの覚書として使う。

3、ソース上には表示される。

*サイト上には表示されなくても、ソースを見ると誰でもコメントを見ることができるので、あまり変なことは書かないほうが良いけどね。

スタイルシートのコメントの記載方法

スタイルシートのコメントの基本は「/*+コメント+半角スペース+*/

/* 1行コメント */

/* コメント1
  コメント2
 */

 コメントと*/の間は、半角スペースまたは半角英数字をいれる。

半角スペースが入らないとどうなる?

 */の前に半角スペースなどが入らないと、次に「半角スペースなど*/」の記載があるまでのスタイルシートの記述をコメントとみなしてしまう。

 結果、スタイルシートがコメントとみなされて、サイト上に表示されないというトラブルが起こる。

/***1行コメント***/

/***コメント1
  コメント2
***/

 ↑のような書き方をしても[*]が半角であれば大丈夫。

コメントは入れ子にして使わない

 スタイルシートのコメントは入れ子にして使うことはできない。

NG例
/***1つ目のコメント/***2つ目のコメント***/***/

スタイルシートのコメントの使い方

/∗ p要素の文字色 ∗/
p{color:#000000;}

 のようにスタイルシートの始まりにコメントを入れる。

p{color:#000000;} /∗ p要素の文字色 ∗/
div{color:#ffffff;} /∗ div要素の文字色 ∗/

 のように、スタイルシートの横に書くこともできる。

スタイルシートのコメントwordpress初心者の覚書

・スタイルシートのコメントの前後には半角スペースを入れる癖をつけるか奇数の*をつける。

  • にほんブログ村 ブログブログ ブログノウハウへ
    にほんブログ村
  • FC2ブログランキング
  • このエントリーをはてなブックマークに追加

関連記事

HTMLとスタイルシート

テキストリンクの記載方法

 テキストにリンクを貼るリンクの指定方法にもいろいろある。  今日はテキストリンクのHTMLの記載

記事を読む

HTMLとスタイルシート

HTMLの「id」「class」とスタイルシートの「#」「.」

 外部スタイルシートを見てみると#で指定されたものと.で指定されたものがあるのに気がつくと思う。

記事を読む

wordpressカスタマイズ

子カテゴリーの前に擬似要素で記号をつける

 子カテゴリーにリストマークらしきものをつける。  リストマークは種類が少ないのでスタイルシー

記事を読む

リンクボタン

スタイルシートで角の丸いリンクボタンを作ろう

 スタイルシートで角の丸いリンクボタンを作って見よう。  画像のリンクボタンを利用するよりサイ

記事を読む

HTMLとスタイルシート

画像をクリックすると別のページに飛ぶようにしてみる

 今日は画像にリンクを張ってみよう。  普通なら画像をクリックするとその画像が拡大表示される。

記事を読む

HTMLとスタイルシート

取り消し線(打ち消し線)のHTMLタグ

 HTMLの取り消し線(打ち消し線)には表示以外には何か意味があるんだろうか?  単純に文字の装飾

記事を読む

Message

メールアドレスが公開されることはありません。


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)


follow us in feedly

応援してね⇒にほんブログ村 ブログブログ ブログノウハウへにほんブログ村

ワードプレスのテキストとビジュアルのタブの切り替えができない

 しばらくぶりにブログを更新しようと思ってみたら、ワードプレスの更新や

プラグインを使わずにソースコードを表示させる方法

 ソースコードを表示させるのに便利なのはプラグインの利用。  で

ソースコードの解説にCrayon Syntax Highlighter

 Webサイト上でHTML/CSSやプログラミングのコードを解説す

ウィジェットが豊富で使いやすいWordPressテーマSimplicity

 SimplicityというWordpressテーマを使ってみた。

お客様のホームページがアップロードされていない状態です

 Wordpressの手動インストールで無事インストールできたのに

WordPressテーマGush2のTOPページアーカイブページに要約を表示する

 Wordpressの無料テンプレート(テーマ)Gush2はすっき

FC2ブログとWordPressのURLの構造法則と変数

 記事数の多いFC2ブログを変数を使ってWordpressに引越し

記事数の多いFC2ブログの引越しは変数で作業時間短縮

 FC2ブログからWordpressへの引越し第二段。  FC2

プラグインの内容をメモできるWordPressプラグイン

 Wordpressのプラグインは便利だが、説明文が英語のせいで中

WordPressのカテゴリーの管理画面にIDを表示できるようにするカスタマイズ

 Wordpressのカテゴリーの管理画面に記事のIDを表示できる

海外スパムをシャットアウト「Throws SPAM Away」日本産プラグイン

 Wordpressでブログを運営していると英語のスパムコメントが

→wordpress初心者・STINGER3カスタマイズ中の記事をもっと見る

Googleでブログを作ろう 
 Googleの無料ブログサービスBloggerで作っているブログ。
 Bloggerの設定やカスタマイズ方法などを載せている。

使える無料ソフト&無料サービス
 高いパソコンに入ってるようなソフトは必要ない!をコンセプトに無料ソフトや無料のWEBサービスをご紹介。

  • コメントテスト

  • PAGE TOP ↑