よく使うCSSのプロパティーをまとめて記述する方法

復習も兼ねて、margin、border-radiusなどのよく使うCSSの値をまとめて記述する方法をまとめました。

箇条書きに簡単にですが、出てくるプロパティも説明しながら紹介しようと思います。

プロパティってなに？

セレクタ
  ↓　　指定する値
.test {　↓
 color:#ffffff;
  ↑
 プロパティ名
}

プロパティとは、セレクタに値を適用させるコードの事です。

上を例にすると、.testというセレクタにcolorという文字に色を付けるプロパティを使って、#ffffffという値を適用させるという事になります。

このプロパティの中には、指定する値をまとめて記述できるものが多くあります。

この記事では、その中でも使う機会の多いプロパティーに絞って紹介していきます。

marginとpadding

.margin {
  margin-top: 25px;
  margin-left: 20px;
  margin-bottom: 10px;
  margin-right: 5px;
}

.margin {
  margin: 25px 20px 10px 5px;
  /* 上　右　下　左 */
}

全部違う時です。

まとめた時の値の方向は、左から「上・右・下・左」です。

.margin {
  margin-top: 25px;
  margin-left: 10px;
  margin-right: 10px;
　margin-bottom: 20px;
}

.margin {
  margin: 25px 10px 20px;
  /* 上　左右　下 */
}

左右が同じで上下が違う時です。

まとめた時の方向は左から「上・左右・下」です。

３つにまとめる方法は、このパターンしかありません。

.margin {
  margin-top: 25px;
  margin-bottom: 25px;
  margin-left: 10px;
  margin-right: 10px;
}

.margin {
  margin: 25px 10px;
  /* 上下　左右 */
}

上下と左右がそれぞれ同じ時です。

まとめた時の方向は左から「上下・左右」です。

.margin {
  margin-top: 25px;
  margin-bottom: 25px;
  margin-left: 25px;
  margin-right: 25px;
}

.margin {
  margin: 25px;
  /* すべて */
}

最後は、全部同じ時です。

border

.border {
  border-width: 2px; 
  border-style: solid;
  border-color: #333;
}

.border {
  border: 2px solid #333;
}

まとめた時に太さから記述していますが順番は自由です。

border-radius

.border-radius {
  border-top-left-radius: 25px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 10px;
}

.border-radius {
  border-radius: 25px 20px 15px 10px;
  /* 左上 右上  右下 左下 */
}

全部違う時です。

まとめた時の値の方向は、左から「左上・右上・右下・左下」です。
左上から時計回りと覚えて置くと良いでしょう。

.border-radius {
  border-top-left-radius: 25px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 10px;
}

.border-radius {
  border-radius: 25px 20px 10px;
  /* 左上 右上左下 右下 */
}

右上左下が同じで左上と右下が違う時です。

まとめた時の値の方向は、左から「左上・右上左下・右下」です。

3つにまとめる方法は、このパターンしかありません。

.border-radius {
　border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.border-radius {
　border-radius: 25px 10px;
  /* 左上右下 右上左下 */
}

左上右下と右上左下それぞれ同じ時です。

まとめた時の値の方向は、左から「左上右下・右上左下」

.border-radius {
　border-top-left-radius: 25px;
  border-bottom--radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
}

.border-radius {
　border-radius: 25px;
  /* すべて */
}

最後は、全部同じ時です。

font

.font {
  font-style: italic;
  font-family: 'ＭＳ ゴシック';
  font-weight: bold;
  font-size: 18px;
  line-height: 1.7;
}

.font {
  font: italic bold 18px/1.7 'ＭＳ ゴシック';
}

background

.background {
  background-image: url("../image.jpg");
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
  background-size: cover;
}

.background {
  background: url("../image.jpg") #ffffff no-repeat top center/cover fixed ;
}

background-imageから記述していますが、順番は基本自由です。

ただし、background-sizeを指定する時は、一緒にbackground-positionの値も指定し、 ２つの値の間に「/」 を入れてください。

list-style

.list-style {
  list-style-image: url("../image.jpg") ;
　list-style-type: disc ;
  list-style-position: outside ;
}

.list-style {
  list-style: disc outside url("../list-icon.png");
}

list-style-typeから記述していますが、 順番は自由です。

transition

.list-style {
  transition-property: all ;
  transition-duration: 0.5s ;
  transition-timing-function: ease-in-out ;
  transition-delay: 5s ;
}

.list-style {
  transition: all 0.5s ease-in-out 5s;
}

まとめる時は、

1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay

の順で記述します。

以上、まとめでした。