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の書き方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の書き方

スポンサードサーチ

関連記事

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

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

no image

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

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

no image

max-widthとmin-widthの違いについてわかりやすく説明します

どうも、チャーさんです。 あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

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

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

no image

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

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

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

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

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

no image

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

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

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

最新記事

チャーさん

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

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

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