CSSWEB

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

CSS

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

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

プロパティってなに?

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

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

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

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

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

オコサバット
オコサバット

CSSとかって出てくる用語が難しいんですよね…

marginとpadding

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;
  /* 上 左右 下 */
}

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

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

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


.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;
  /* すべて */
}

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

  • margin-topは、上方向の外側の余白の値を指定するプロパティです。
  • margin-bottomは、下方向の外側の余白の値を指定するプロパティです。
  • margin-leftは、左方向の外側の余白の値を指定するプロパティです。
  • margin-rightは、右方向の外側の余白の値を指定するプロパティです。
  • marginは、全方向の外側の余白値をまとめて指定するプロパティです。

border

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

  • border-widthは、線の太さを指定するプロパティです。
  • border-styleは、線の種類を指定するプロパティです。
  • border-colorは、線の色を指定するプロパティです。
  • borderは、線に関する様々な値をまとめて指定するプロパティです。

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

オコサバット
オコサバット

まとめてない事の方が少ないですね

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;
  /* すべて */
}

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

  • border-top-left-radiusは、左上の角を丸める値を指定するプロパティです。
  • border-top-right-radiusは、右上の角を丸める値を指定するプロパティです。
  • border-bottom-left-radiusは、左下の角を丸める値を指定するプロパティです。
  • border-bottom-right-radiusは、右上の角を丸める値を指定するプロパティです。
  • border-radiusは、各角の角を丸める値をまとめて指定するプロパティです。

font

.font {
  font-style: italic;
  font-family: 'MS ゴシック';
  font-weight: bold;
  font-size: 18px;
  line-height: 1.7;
}
.font {
  font: italic bold 18px/1.7 'MS ゴシック';
}
  • font-styleは書体の種類を指定するプロパティです。
  • fony-familyは文字の種類を指定するプロパティです。
  • font-weghtは文字の太さを指定するプロパティです。
  • font-sizeは文字の大きさを指定するプロパティです。
  • line-heightは行間の広さを指定するプロパティです。
  • fontは、文字に関する様々な値をまとめて指定するプロパティです。

font:を使う時は最低でもfont-sizefont-familyを記述してください。その他は省略可能です。

font-sizeとline-heightを両方記述する時は、2つの値の間に「/」が必要です。

font-style: italic;(文字を斜体にする)は、フォントによって対応していない場合があります。

オコサバット
オコサバット

あえて、編集しやすいようにまとめて無い場合が多いですね

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-colorは、背景の色を指定するプロパティです。
  • background-repeatは、背景画像を繰り返すか指定するプロパティです。
  • background-positionは、背景画像の初期位置を指定するプロパティです。
  • background-attachmentは、背景画像を固定表示するかスクロールさせるか指定するプロパティです。
  • background-sizeは、背景画像の大きさを指定するプロパティです。
  • backgroundは、背景に関する様々な値をまとめて指定するプロパティです。

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

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

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-imageは、リストの先頭に表示されるマーカに使われる画像を指定するプロパティです。
  • list-style-typeは、リストの先頭に表示されるマーカの形を指定するプロパティです。
  • list-style-positionは、リストの先頭に表示されるマーカの位置を指定するプロパティです。
  • list-styleは、リストに関する様々な値をまとめて指定するプロパティです。

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;
}
  • transition-propertyは、変化が適用される範囲、方向、色などのプロパティを指定するプロパティです。
  • transition-durationは、変化が始まって終わるまでの時間を指定するプロパティです。
  • transition-timing-functionは、 変化の度合いを指定するプロパティです。
  • transition-delayは、変化が始まる時間を指定するプロパティです。
  • transitionは、変化に関する様々な値をまとめて指定するプロパティです。

まとめる時は、

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

の順で記述します。


以上、まとめでした。

コメント