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の書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

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

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

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

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

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

no image

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

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

no image

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

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

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

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

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

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

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

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

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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