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月2日 更新日:

Pocket

うも、チャーさんです。

 

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

カンマについて書いてます。

 

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

cssのカンマについての疑問が解消され、

さらにコーディングが早くなるでしょう。

 

 

という事で、cssのカンマについて知りたいなら、

このまま下にスクロールして読んでみてください。

 

スポンサードサーチ

cssの書き方でカンマ書くとどうなる?

 

cssの書き方でカンマ ,←これ

が使えるのですが、これは、複数に

cssを適用させるときに使います。

 

というのもcssではカンマで区切ることで、

クラスやタグの複数選択ができるからです。

 

 

例えば、見出しの文字を全部太字に

したい場合、以下のように

 

h1,h2,h3 {

font-weight:bold;

}

 

と書くと、h1もh2もh3も全部太字になります。

 

 

また

.class1,class2,class3 {

color:red;

}

 

などのようにクラスもカンマで区切る事で、

複数に一括指定することができます。

 

またこの場合、

class1,2,3全てに

赤文字になるcssが適用できます。

 

 

なので、cssではカンマを使うと、

cssを適用したい要素を複数一気に指定

できるというわけです。

 

カンマの使い道

 

ちなみに、これの使い道ですが、

 

webページの制作などでは、

とりあえずまずはじめにある程度

文字のサイズとか見出しのデザインとか、

 

そういうのをまとめてcss書きます。

なので、そういうときに使用される感じですね。

 

スポンサードサーチ

まとめ

 

という事でまとめですが、

cssの書き方の一つにカンマがありますが、

これを使うと要素を複数指定できます。

 

1つ1つのタグやクラスに対して

css書いてると手間なので、

同じ内容のcssの時はカンマを使って複数指定しましょう。

 

またcssの書き方は色々なものがあるので、

 

cssを学びたいなら、

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

を読みましょう。

 

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

 

チャーさん

 

 

 

 

-css, cssの書き方

スポンサードサーチ

関連記事

no image

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

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

no image

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

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

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

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

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

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

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

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

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

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

no image

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

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

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

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

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

no image

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

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

no image

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

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

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

最新記事

チャーさん

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

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

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