ドキュメント : CSS
-
【CSS】left - 要素の位置(左)
CSSのleftプロパティをご紹介します。leftleftは要素の左端の位置を示すプロパティです。基本構文left: 値;サンプル<style>.container { position: relative; padding: 15px; background: lightgray;}.box { height: 100px; background: ye
-
【CSS】right - 要素の位置(右)
CSSのrightプロパティをご紹介します。rightrightは要素の右端の位置を示すプロパティです。基本構文right: 値;サンプル<style>.container { position: relative; padding: 15px; background: lightgray;}.box { height: 100px; background
-
【CSS】z-index - 要素の重ね順序
CSSのz-indexプロパティをご紹介します。z-indexz-indexは要素の重ね順序を示すプロパティです。このプロパティの値はpositionを定義する(staticを除く)要素に効果があります。基本構文z-index: 値;サンプル<style>.container { position: relative;}.box { height: 100px; wi
-
-
【CSS】border-top-left-radius - 左上角の曲線
CSSのborder-top-left-radiusプロパティをご紹介します。border-top-left-radiusborder-top-left-radiusは要素の左上角の曲線を示すプロパティです。基本構文border-top-left-radius: 水平の軌道長半径 垂直の軌道長半径;値が1つのみの場合は水平と垂直の軌道長半径に同じ値を適用します。サンプルサンプル1<style
-
【CSS】border-top-right-radius - 右上角の曲線
CSSのborder-top-right-radiusプロパティをご紹介します。border-top-right-radiusborder-top-right-radiusは要素の右上角の曲線を示すプロパティです。基本構文border-top-right-radius: 水平の軌道長半径 垂直の軌道長半径;値が1つのみの場合は水平と垂直の軌道長半径に同じ値を適用します。サンプルサンプル1<s
-
-
-
【CSS】border-bottom-left-radius - 左下角の曲線
CSSのborder-bottom-left-radiusプロパティをご紹介します。border-bottom-left-radiusborder-bottom-left-radiusは要素の左下角の曲線を示すプロパティです。基本構文border-bottom-left-radius: 水平の軌道長半径 垂直の軌道長半径;値が1つのみの場合は水平と垂直の軌道長半径に同じ値を適用します。サンプルサン
-
【CSS】border-bottom-right-radius - 右下角の曲線
CSSのborder-bottom-right-radiusプロパティをご紹介します。border-bottom-right-radiusborder-bottom-right-radiusは要素の右下角の曲線を示すプロパティです。基本構文border-bottom-right-radius: 水平の軌道長半径 垂直の軌道長半径;値が1つのみの場合は水平と垂直の軌道長半径に同じ値を適用します。サン
-
【CSS】border-radius - 角の曲線
CSSのborder-radiusプロパティをご紹介します。border-radiusborder-radiusは要素の角の曲線を示すプロパティです。基本構文値が1つ全ての角に適用します。border-radius: 値;値が2つ値1を左上と右下、値2を左下と右上に適用します。border-radius: 値1 値2;値が3つ値1を左上、値2を右上と左下、値3を右下に適用します。border-ra
-
-
【CSS】ベンダープレフィックス - ブラウザの接頭辞
CSSのベンダープレフィックスをご紹介します。CSSの動作環境一部のCSSの定義や処理は動作環境によって異なる場合があります。動作環境とはOSやブラウザ、またそれらのバージョンなどです。例えば、次のテキストを装飾するtext-decorationプロパティはSafariでは表示されません。(2024/01/22 時点)<style>p { text-decoration: und
-
【CSS】CSS変数 - 再利用可能な値
CSSのCSS変数をご紹介します。CSS変数CSS変数は値を記憶する領域です。その領域に値を記憶することができます。CSS変数を使うことで、値を一括変更したり、変更に柔軟なコードを作成できます。基本構文CSS変数を使うには次の手順が必要です。定義展開定義変数名と記憶する値を定義します。スコープ要素 { --変数名: 値;}スコープ要素は変数の適用範囲です。一般的に全体に適用するには擬似クラス