CSS 継承のサンプル(inherit)
目次 ・CSSの継承とは ・自動的に継承されるプロパティ（代表例） ・自動的に継承されないプロパティ（代表例） ・inheritを使って強制的に継承させる ・継承をコントロールする値 CSSの継承とは 親要素に指定したス […]
カテゴリー：HTML / CSS
CSS セレクタの優先順位 (!important)
目次 ・CSSのセレクタの優先順位とは ・同じ優先順位の場合 ・セレクタを組み合わせた場合 ・!importantがある場合 ・優先順位のチェックフロー CSSのセレクタの優先順位とは どのCSSが最終的に適用されるかを […]
CSS radial-gradient 円のグラデーションのサンプル
目次 ・radial-gradient ・circle(円)を使用(2色) ・circle(円)を使用(3色) ・ellipse(楕円)を使用 ・closest-corner(円の中心から最も近い角) ・farthest […]
CSS linear-gradient 線のグラデーションのサンプル
目次 ・linear-gradient ・上から下にグラデーションする(2色) ・上から下にグラデーションする(3色) ・上から下にグラデーション+色の位置を追加 ・上から下にグラデーションなしで並べる ・真ん中に横線の […]
CSS opacity 透明度を指定する
目次 ・opacityとは ・opacityの1 ・opacityの0.8 ・opacityの0.6 ・opacityの0.4 ・opacityの0.2 ・opacityの0 opacityとは opacityは、透明度 […]
CSS text-shadow 文字に影をつける
目次 ・text-shadow ・影のぼかし2pxを追加 ・影を右に10px,下に10pxにする ・影の色を指定する ・Chromeでtext-shadowを調整する text-shadow text-shadowは、文 […]
CSS box-shadow ボックスに影をつける
目次 ・box-shadow ・影を右に10px,下に10pxにする ・影のぼかし10pxを追加 ・影の範囲10pxを追加 ・影の色を指定する ・影を内側に表示(insetを指定) ・Chromeでbox-shadowを […]
CSS border-radius 四角の角を丸くする
目次 ・border-radiusとは ・１．四角の角を丸くする(半径10px) ・２．四角の角を丸くする(半径30px) ・３．四角の角を丸くする(半径10%) ・４．四角の角を丸くする(半径30%) ・５．角を楕円形 […]