css cssの書き方

cssの書き方コメントが知りたいならこの記事をどうぞ。

投稿日:2019年12月4日 更新日:

Pocket

どうも、チャーさんです。

 

この記事ではcssの書き方の1つ、

コメントについて書いてます。

 

具体的には、

・そもそもコメントとは?

・コメントを書く方法

・実用的なコメントの方法

 

など書いてます。

 

 

なのでこの記事をあなたが読めば、

cssのコメントについて疑問は完全解決

するでしょう。

 

という事で、cssのコメントについて、

知りたければこのまま下にスクロールして

読んでみてください。

 

スポンサードサーチ

cssの書き方にあるコメントとは?

 

でコメントとは?ということを

まず説明しときます。

 

コメントとは、

style.cssファイルの中に書いておく、

説明文やメモ書きの事です。

 

というのも、cssの記述が並ぶと、

この部分って何のデザインだったっけ?

となることがあります。

 

 

そんなときに、ここはボタンのデザイン

などとメモ書きしてあればわかりやすいです。

 

なので、cssでいうコメントとは、

説明文やメモ書きをファイルの中に

残しておくものだと思ってください。

 

スポンサードサーチ

cssの書き方:コメントを残す方法

 

cssでコメントを書きたい場合、

style.cssの中に、コメントにしたい部分を、

/*と*/で囲ってやればokです。

 

というのも、cssでのコメントアウトは、

//ではなく/**/で機能するようになってます。

 

なので、あなたがコメントを書きたいところで、

/**/で囲ってやると、

 

cssの書き方コメント

 

このようにコメントを書くことが

可能です。

 

コメントした部分はcssとして読み込まれない

 

ちなみにここは大事な部分ですが、

/**/で囲ってコメントにした部分は、

cssとして読み込まれません。

 

なので、例えば、

/*

.text {

color:red;

}

*/

 

みたいにcssを書いても、

/**/で囲ってる中に記述があった場合、

そこはcssとして機能しません。

 

 

なので、コメントする時は、

不必要にcssの部分をコメントの/**/で

囲ってしまわないようにしましょう。

 

1行のコメントをしたい場合

 

でコメントには1行、

複数行とコメントがあります。

 

そして1行でコメントアウトしたい場合、

上で話したように/**/で囲えばokです。

 

特にhtmlみたいに特に1行用には、

これ!みたいなものはないです。

 

複数行のコメントを残したい場合

 

で次に複数行でコメントアウトしたい場合、

そちらも/**/で囲えばokです。

 

というのもcssでは1行だろうが、

複数行だろうが/**/でコメントアウト

できるようになってます。

 

その証拠に、

 

cssの書き方コメント複数行

 

複数行でも/**/で囲えばコメントアウト

されてますね。

 

なので1行でも複数行でも、

/**/で囲えばコメントはokです。

 

 

スポンサードサーチ

cssの書き方:web制作時のコメント方法

 

今cssを学んでるあなたは、

今後webページを作ることになるでしょう。

 

その時あなたが実際にweb制作するときに

「どうコメントを書けばいいのか?」

と思うかもしれません。

 

なのでそちらにも答えます。

 

 

結論

 

結論が遅くなりましたが、

web制作する時は、

パーツごとにコメントしましょう。

 

 

パーツごとにとは例えば、

 

/*ヘッダー部分*/

cssの記述

 

/*ナビゲーションメニュー*/

cssの記述

 

などのようにwebページの

セクションごとに分けるようにしましょう。

 

 

その理由は、パーツごとにコメントすると、

あなたもどこに何のcssを書いたか

わかりやすくなりますし、

 

他の人があなたのcssコードを見たときにも

わかりやすいからです。

 

 

例えば、webページを作る時は、

あなた一人で最初から最後まで

作ることもありますが、

 

他の人と共同で作ることがあります。

 

 

そんな時、パーツごとにコメント

を書いてないと、あなたにはわかるかも

しれませんが、

 

人がみたときに分からず、

制作が遅くなります。

 

 

また逆に、パーツごとにコメントがなければ、

あなたが人のcssの記述をみたときに、

このクラス名、どこの何?となることがあります。

 

また、あなた一人で作っていたとしても、

部分ごとにコメントを書いておけば、

後からデザインを修正したりするときなどに、

 

該当箇所を見つけやすいです。

 

 

なので、cssでコメントをする時は、

パーツごとに名前をつけるように

コメントを書いておくのが実用的です。

 

web制作に役立つので、

やってみてください。

 

 

という事で、cssの書き方、

コメントについては理解したと思うので、

次はcssの書き方を網羅的に知りましょう。

 

するとあなたのcssレベルが上がりますよ。

 

cssを上達させたい場合は、

cssの書き方をまとめました「よく使う内容を網羅」

をどうぞ。

 

それでは読んでもらってありがとうございました。

 

チャーさん

 

 

-css, cssの書き方


スポンサードサーチ

関連記事

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。