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

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

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

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

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

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

最新記事

チャーさん

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

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

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