CSS 継承のサンプル(inherit)
目次 01. CSSの継承 ・CSSの継承とは ・cssのcolorで継承させる例 02. inheritで継承させる例 ・marginはデフォルトでは継承されない ・inheritでmarginを強制的に継承させる例 […]
カテゴリー：HTML / CSS
CSS セレクタの優先順位(!important)
目次 ・CSSのセレクタの優先順位とは ・使用例 ・同じセレクタの場合は後勝ちになる ・IDセレクタとインラインスタイルがある場合 ・!importantがある場合 ・IDセレクタ、クラスセレクタ、要素型セクレタがある場 […]
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%) ・５．角を楕円形 […]