カテゴリー
border-radius border-top-left-radius CSS3

【CSS3】border-top-left-radius：左上の角丸のサイズを指定する

（例）【CSS3】border-top-left-radiusの使用方法

See the Pen
border-radius by linlin (@linlin098765)
on CodePen. 

<div class="sample1"></div>
<div class="sample2"></div>
<div class="sample3"></div>
<div class="sample4"></div>
<div class="sample5"></div>
div{
  width:200px;
  height:50px;
  background-color:red;
  margin-bottom:10px;
}
.sample1{
  border-radius:10px 10px 10px 10px / 5px 5px 5px 5px;
}
.sample2{
  border-top-left-radius:20px;
}
.sample3{
  border-top-right-radius:20px;
}
.sample4{
  border-bottom-left-radius:20px;
}
.sample5{
  border-bottom-right-radius:20px;
}

【CSS3】border-top-left-radius：左上の角丸のサイズを指定する

　CSS3のborder-top-left-radiusは、ボックスの左上の角丸サイズを指定するプロパティです。
　数値を１つ指定した場合は角丸の水平・垂直方向は同じサイズになりますが、２つ指定した場合は１つ目が水平方向、２つ目が垂直方向になります。

border-top-left-radiusの指定できる数値

  • 数値
    px, em,exなど
  • %
    パーセント指定
カテゴリー
border-radius CSS3

【CSS3】border-radius：角丸の箇所・サイズを指定する

（例）【CSS3】border-radiusの使用方法

See the Pen
border-radius by linlin (@linlin098765)
on CodePen. 

<div class="sample1"></div>
<div class="sample2"></div>
<div class="sample3"></div>
<div class="sample4"></div>
<div class="sample5"></div>
div{
  width:200px;
  height:50px;
  background-color:red;
  margin-bottom:10px;
}
.sample1{
  border-radius:10px 10px 10px 10px / 5px 5px 5px 5px;
}
.sample2{
  border-top-left-radius:20px;
}
.sample3{
  border-top-right-radius:20px;
}
.sample4{
  border-bottom-left-radius:20px;
}
.sample5{
  border-bottom-right-radius:20px;
}

【CSS3】border-radius：角丸の箇所・サイズを指定する

　CSS3のborder-radiusは、ボックスの４角（コーナー）の角丸の箇所・サイズを指定するプロパティです。角丸は楕円でも指定可能です。

border-radiusの指定について

　指定方法としては「border-radius:楕円の水平方向 / 楕円の垂直方向」のようになります。４角指定可能であり「border-radius:左上・右上・右下・左下」で指定します。

　水平方向と垂直方向の両方を指定する場合「border-radius:左上・右上・右下・左下の水平方向 / border-radius:左上・右上・右下・左下の垂直方向」のように指定する。
　また、水平または垂直方向の指定をしなかった場合、水平・垂直方向がともに同じ値になります。

　コーナーの指定自体を記述しなかった場合は下記のようになります。

  • 左下が省略した場合、右上と同一
  • 右下が省略した場合、左上と同一
  • 右上が省略した場合、左上と同一

border-radiusの指定できる数値

  • 数値
    px, em,exなど
  • %
    パーセント指定
カテゴリー
background background-size CSS3

【CSS3】background-size：背景画像のサイズを指定する

（例）【CSS3】background-sizeの使用方法

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

<div class="sample1"></div>
<div class="sample2"></div>
<div class="sample3"></div>
div{
  background-image:url("https://www.llc-linlin.com/picture/SEO.jpg");
  width:200px;
  height:100px;
  margin-bottom:20px;
  border:dashed 8px black; 
  padding:10px;
}
.sample1{
  background-size:contain;
}
.sample2{
  background-size:cover;
}
.sample3{
  background-size:20%;
}

【CSS3】background-size：背景画像のサイズを指定する

　CSS3のbackground-sizeは、背景画像のサイズを指定するプロパティです。負の値は指定できません。

  • auto
    自動的にサイズを調整する（初期値）
  • contain
    背景画像の縦横比を維持し、背景範囲に収まる最大サイズで表示
  • cover
    背景画像の縦横比を維持し、背景範囲を覆う最小サイズを表示
  • 長さ
    背景画像の縦と横のサイズを指定（片側だけ指定した場合、もう片方は自動調整）
  • %
    背景画像の縦・横サイズを％で指定

カテゴリー
background background-origin CSS3

【CSS3】background-origin：背景の基準位置を指定する

（例）【CSS3】background-originの仕様方法

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

<div class="sample1"></div>
<div class="sample2"></div>
<div class="sample3"></div>
div{
  background-image:url("https://www.llc-linlin.com/picture/SEO.jpg");
  width:200px;
  height:100px;
  margin-bottom:20px;
  border:dashed 8px black; 
  padding:10px;
}
.sample1{
  background-origin:border-box;
}
.sample2{
  background-origin:padding-box;
}
.sample3{
  background-origin:content-box;
}

【CSS3】background-origin：背景の基準位置を指定する

　CSS3のbackground-originは、背景の基準位置を指定するプロパティです。background-origin:fixedが指定されている場合は無効となります。

  • padding-box
    背景をパディングボックスに対し相対的に適用（初期値）
  • border-box
    背景をボーダーボックスに対し相対的に適用
  • content-box
    背景をコンテントボックスに対し相対的に適用
カテゴリー
background background-clip CSS3

【CSS3】background-clip：背景の範囲を指定する

（例）【CSS3】background-clipの使用方法

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

<div class="sample1"></div>
<div class="sample2"></div>
<div class="sample3"></div>
div{
  background-color:red;
  width:200px;
  height:100px;
  margin-bottom:20px;
  border:dashed 8px black; 
  padding:10px;
}
.sample1{
  background-clip:border-box;
}
.sample2{
  background-clip:padding-box;
}
.sample3{
  background-clip:content-box;
}

【CSS3】background-clip：背景の範囲を指定する

　CSS3のbackground-clipは、背景の適用する範囲を指定するプロパティです。

  • border-box
    背景をボーダーボックスに適用（初期値）
  • padding-box
    背景をパディングボックスに適用
  • content-box
    背景をコンテントボックスに適用
カテゴリー
CSS コメントアウト

【CSS】コメントアウト：CSSにコメントを記述する

（例）【CSS】コメントアウトの仕様方法

/*  CSSのコメント  */
div{background-color:red;}

【CSS】コメントアウト：CSSにコメントを記述する

　CSSのコメントアウト方法は「/* コメント */」です。コメント部分はCSSのコードとして機能しませんので、メモ等を残す際に使用します。

カテゴリー
CSS セレクタ 隣接セレクタ

【CSS】隣接セレクタ：隣接する要素のスタイルを適用する

（例）【CSS】隣接セレクタの使用方法

See the Pen
隣接セレクタ by linlin (@linlin098765)
on CodePen. 

<div>ああああ</div>
<p>良い良い</p>
<p>うううう</p>
div+p{background-color:red;}

【CSS】隣接セレクタ：隣接する要素のスタイルを適用する

　CSSの隣接セレクタは特定要素と同じ階層にある直後の隣接する要素に対しスタイルを適用します。選択方法としては「要素名+要素名{}」です。

カテゴリー
CSS セレクタ 子孫セレクタ

【CSS】子孫セレクタ：特定要素の子・孫要素にスタイルを適用する

（例）【CSS】子孫セレクタの使用方法

See the Pen
子・子孫セレクタ by linlin (@linlin098765)
on CodePen. 

<div>ああああ<p>良い良い</p></div>
<p>うううう</p>
<div><a href="#">ええええ</a></div>
div>p{background-color:red;}
div a{color:green;}

【CSS】子孫セレクタ：特定要素の子・孫要素にスタイルを適用する

　CSSの子孫セレクタは、特定要素の子・孫要素に対してスタイルを適用します。選択方法は「要素名 要素名{}」といった具合で半角スペースで区切ります。

カテゴリー
CSS セレクタ 子セレクタ

【CSS】子セレクタ：特定要素の子要素にスタイルを適用する

（例）【CSS】子セレクタの使用方法

See the Pen
子・子孫セレクタ by linlin (@linlin098765)
on CodePen. 

<div>ああああ<p>良い良い</p></div>
<p>うううう</p>
<div><a href="#">ええええ</a></div>
div>p{background-color:red;}
div a{color:green;}

【CSS】子セレクタ：特定要素の子要素にスタイルを適用する

　CSSの子セレクタは、特定要素の子要素に対してスタイルを適用します。選択方法は「要素名>子要素{}」といった具合です。

カテゴリー
CSS セレクタ 複数セレクタ

【CSS】複数セレクタ：複数の要素にスタイルを適用する

（例）【CSS】複数セレクタの使用方法

See the Pen
複数セレクタ by linlin (@linlin098765)
on CodePen. 

<div>ああああ</div>
<p>良い良い</p>
div,p{color:red;}
p{background-color:blue;}

【CSS】複数セレクタ：複数の要素にスタイルを適用する

　CSSの複数セレクタは、複数の要素に対しスタイルを適用する際に使用します。選択方法としては「要素名,要素名{}」といった具合に「,（カンマ）」で要素名やクラス・id名などを区切り使用します。