Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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

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

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

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

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

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

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

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

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

cssの効率的な学習方法を知りたいなら読んでください。

  どうも、チャーさんです。   あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記 …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

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

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

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

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

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

最新記事

チャーさん

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

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

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