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

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

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

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

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

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

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

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

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

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

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

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

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

最新記事

チャーさん

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

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

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