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の書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

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

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

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

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

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

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

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

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

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

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

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

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

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

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

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

最新記事

チャーさん

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

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

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