投稿者: Linlin

カテゴリー
CSS font-variant

【CSS】font-variant：フォントを小文字にする

（例）【CSS】font-variantの使用方法

See the Pen
font by linlin (@linlin098765)
on CodePen. 

<p class="p">フォント</p>
<p class="p2">abcABC</p>
.p{
  font: bold large/20px "ＭＳ 明朝";
}
.p2{
  font-style:italic;
  font-variant: small-caps;
  font-weight:bold;
  font-size:30px;
  font-family:"ＭＳ ゴシック",sans-serif;
  line-height:40px;
  background-color:gray;
}

【CSS】font-variant：フォントを小文字にする

　CSSのfont-variantはフォントを小文字（スモールキャップ）にするプロパティです。
　スモールキャップは、小文字の表示形式が小文字サイズの大文字のものを指します。 文字にスモールキャップが無い場合、大文字を縮小したものを小文字として表示します。

カテゴリー
CSS font-style

【CSS】font-style：文字をイタリック体・斜体にする

（例）【CSS】font-styleの使用方法

See the Pen
font by linlin (@linlin098765)
on CodePen. 

<p class="p">フォント</p>
<p class="p2">abcABC</p>
.p{
  font: bold large/20px "ＭＳ 明朝";
}
.p2{
  font-style:italic;
  font-variant: small-caps;
  font-weight:bold;
  font-size:30px;
  font-family:"ＭＳ ゴシック",sans-serif;
  line-height:40px;
  background-color:gray;
}

【CSS】font-style：文字をイタリック体・斜体にする

　CSSのfont-styleは、フォントをnormal（標準）、italic（イタリック体）、oblique（斜体）に指定できるプロパティです。
　italicとobliqueは日本語では通常同じ斜め型の文字となりますので違いはありません。obliqueと比較してitalicの場合、斜め文字でも筆記体風になるのが通常ですが、日本語の場合は変わりません。

カテゴリー
CSS font

【CSS】font：フォント

（例）【CSS】fontの使用方法

See the Pen
font by linlin (@linlin098765)
on CodePen. 

<p class="p">フォント</p>
<p class="p2">abcABC</p>
.p{
  font: bold large/20px "ＭＳ 明朝";
}
.p2{
  font-style:italic;
  font-variant: small-caps;
  font-weight:bold;
  font-size:30px;
  font-family:"ＭＳ ゴシック",sans-serif;
  line-height:40px;
  background-color:gray;
}

【CSS】font：フォント

　CSSのfontはフォントに関する指定をまとめて行えるプロパティです。
　fontプロパティに指定できるのは以下の順番です。

  1. font-style、font-variant、font-weight
  2. font-size
  3. line-height
  4. font-family

　line-heightを指定する場合、line-heightの値の前にスラッシュ「 /」が必須です。

◆　font: bold large/120% “ＭＳ 明朝”;

　fontプロパティを使用すると、フォントに関するスタイル（プロパティ）リセットされます。

カテゴリー
background-repeat CSS

【CSS】background-repeat：背景画像のリピート方法

（例）【CSS】background-repeatの使用方法

See the Pen
background-position by linlin (@linlin098765)
on CodePen. 

<body>

  
</body>
body {
background-image: url("https://www.llc-linlin.com/picture/SEO.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom
}

【CSS】background-repeat：背景画像のリピート方法

　CSSのbackground-repeatは、背景画像のリピート方法を指定するプロパティです。

  • repeat
    縦と横に背景画像を繰り返して表示
  • repeat-x
    横にのみ背景画像を繰り返して表示
  • repeat-y
    縦にのみ背景画像を繰り返して表示
  • no-repeat
    背景画像を１回のみ表示
カテゴリー
background-position CSS

【CSS】background-position：背景画像の表示位置を指定

（例）【CSS】background-positionの使用方法

See the Pen
background-position by linlin (@linlin098765)
on CodePen. 

<body>

  
</body>
body {
background-image: url("https://www.llc-linlin.com/picture/SEO.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom
}

【CSS】background-position：背景画像の表示位置を指定

　CSSのbackground-positionは背景画像の表示位置を指定するプロパティです。
　背景画像の表示位置は、left・centerと言った位置指定から、％や数値（pxやvw等）でも指定可能です。

カテゴリー
background-image CSS

【CSS】background-image：背景画像

（例）【CSS】background-imageの使用方法

See the Pen
background-position by linlin (@linlin098765)
on CodePen. 

<body>

  
</body>
body {
background-image: url("https://www.llc-linlin.com/picture/SEO.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom
}

【CSS】background-image：背景画像

　CSSのbackground-imageは、背景画像を指定するプロパティです。
　背景画像はURLで指定し、CSSのファイルから相対的に指定するか、絶対的に指定します。

カテゴリー
background-color CSS

【CSS】background-color:背景色

（例）【CSS】background-colorの使用方法

See the Pen
PoqZEzw by linlin (@linlin098765)
on CodePen.

【CSS】background-color:背景色

　CSSのbackground-colorは背景色を指定するプロパティです。

カテゴリー
background-attachment CSS

【CSS】background-attachment：背景画像の固定・移動

（例）【CSS】background-attachmentの使用方法

See the Pen
background-position by linlin (@linlin098765)
on CodePen. 

<body>

  
</body>
body {
background-image: url("https://www.llc-linlin.com/picture/SEO.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom
}

【CSS】background-attachment：背景画像の固定・移動

　CSSのbackground-attachmentは背景画像を画面スクロールした際に固定状態にするか、スクロールと同時に移動させるか指定するプロパティです。

カテゴリー
background CSS

【CSS】background：背景の指定

（例）【CSS】backgroundの使用方法

See the Pen
color by linlin (@linlin098765)
on CodePen. 

<div>ああああああ</div>
div{
  color:red;
  background:gray;
}

【CSS】background：背景の指定

　CSSのbackgroundは背景を一括して指定できるプロパティです。
　背景色の指定から、背景画像まで一括して指定可能です。

カテゴリー
color CSS

【CSS】color：文字色

（例）【CSS】colorの使用方法

See the Pen
color by linlin (@linlin098765)
on CodePen. 

<div>ああああああ</div>
div{
  color:red;
  background:gray;
}

【CSS】color：文字色

　CSSのcolorは文字色を指定するプロパティです。