css cssの書き方

cssの書き方cssはまとめて書いて楽をしましょう。

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

Pocket

うも、チャーさんです。

 

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

まとめて書くについてお話ししてます。

 

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

今までより、「より早く、より効率的に、より楽に」

cssをまとめて書く事ができるようになります。

 

 

cssをまとめて書きたい場合、

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

 

スポンサードサーチ

cssの書き方:値をまとめて書く

 

まずcssはまとめて書く事が可能です。

 

というのも、cssでは別個に指定と、

まとめて指定とができるからです。

 

marginをまとめて書く書き方

 

例えば、

marginでは

margin:10px 20px 15px 30px;

などのようにまとめて書く事ができます。

 

(ちなみにこれは左からtop,right,bottom,left、

とそれぞれの数値を指定してることになります。)

 

 

marginはまとめて書かない場合、

 

margin-top:10px;

margin-right:5px;

margin-bottom:30px;

margin-left:3px;

 

 

などのようにバラバラに書くことに

なるのですが、上でお話ししたように、

まとめて1行で書く事もできるのです。

 

で、このように書けるのには他には、

padding、border、などがあります。

 

paddingをまとめて書く書き方

 

paddingはmarginと同じでして、

padding:10px 20px 15px 30px;

などとかけまして、

 

数値は時計回りで、top,right,bottom,leftの

順に数値を指定する形です。

 

 

ちなみに書き方はいくつかありまして、

例えばpadding:10px 20px;と書くと、

上下が10px 、左右が20pxという意味になります。

 

また、padding:10px 20px 5px;

などと書くと、上が10px、左右が20px、

下が5pxとこういうまとめ書きの方法もあります。

 

 

borderをまとめて書く書き方

 

で、話に出たので、borderも話すと、

こちらもmarginやpaddingと同じでして、

border:1px solid black;などとかけます。

 

このように書いた場合、

 

border-top:1px solid black;

border-right:1px solid black;

border-bottom:1px solid black;

border-bottom:1px solid black;

 

と書いたのと同じ意味になります。

 

cssではまとめて書くと、

時間と手間の短縮になりますので、

まとめて書いて大いに楽をしましょう。

 

スポンサードサーチ

cssの書き方でまとめて書く:セレクタ編

 

でまとめるついでにもう一つですが、

cssではセレクタを複数指定して、

まとめるという書き方もできます。

 

例えば、

.class1, .class2, .class3 {

font-size:15px;

}

 

などのようにクラスをまとめて

書く事ができます。

 

(クラスってなに?という場合は、

cssの書き方class編(初学者向け)を読みましょう)

 

 

で上記のように書くと、

 

.class1 {
font-size:15px;

}

 

.class2 {
font-size:15px;

}

 

.class3 {
font-size:15px;

}

 

と書いたのと同じ意味になります。

とはいえ、上記のように同じことを

何度も書くのは面倒です。

 

 

なので、

 

.class1, .class2, .class3 {

font-size:15px;

}

このようにカンマで切ってやれば

まとめて書く事ができるので、

時間短縮したい場合はバンバン使いましょう。

 

 

時間短縮できるカンマについて、もう少し知りたい場合は、

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

を読んでおくと良いですよ。

 

スポンサードサーチ

まとめ

 

cssの書き方のまとめるについて

書きましたが、cssはまとめた方が

時間短縮できて良いです。

 

共同して書く場合、他の人にも

メリットなのでぜひまとめる事を意識

してみましょう。

 

 

また他人と共同してcssを書く場合、

コメントをちゃんと扱えると、あなたは

重宝されるので、人と一緒にcss書くなら

 

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

に一瞬だけ目を通しておきましょう。

 

また、cssの書き方について、

網羅的に知りたい場合は、

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

 

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

 

チャーさん

 

-css, cssの書き方


スポンサードサーチ

関連記事

no image

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

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

no image

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

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

no image

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

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

no image

cssの書き方class編(初学者向け)

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

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

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

最新記事

チャーさん

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

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

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