CSS

border-radius(ボーダー・レイディアス)

【機能】
border-radiusは、要素の角を丸くするためのCSSプロパティです。値を指定することで、四隅の丸みを調整できます。
このプロパティは以下の CSS プロパティの一括指定です。
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

border-radius は、要素の角を丸くするためのCSSプロパティで、値に**長さ(px, emなど)やパーセンテージ(%)**を指定できます。1つの値で全角を同じ丸みに、複数値で角ごとに異なる丸みを設定可能です。

【構文】
/* 最初の半径の構文は 1 つから 4 つの値が許可されています */
/* 半径を全 4 角に設定 */
border-radius: 10px;

/* 左上と右下 | 右上と左下 */
border-radius: 10px 5%;

/* 左上 | 右上と左下 | 右下 */
border-radius: 2px 4px 2px;

/* 左上 | 右上 | 右下 | 左下 */
border-radius: 1px 0 3px 4px;

/* 2 番目の半径の構文は 1 つから 4 つの値が許可されています */
/* (最初の半径の値) / 半径 */
border-radius: 10px / 20px;

/* (最初の半径の値) / 左上と右下 | 右上と左下 */
border-radius: 10px 5% / 20px 30px;

/* (最初の半径の値) / 左上 | 右上と左下 | 右下 */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (最初の半径の値) / 左上 | 右上 | 右下 | 左下 */
border-radius: 10px 5% / 20px 25em 30px 35em;

/* グローバル値 */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: revert-layer;
border-radius: unset;


【例】
・四隅を均等に丸める
div {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    border-radius: 20px; /* 全ての角を20pxで丸める */
}

・個別に角を指定する
div {
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    border-radius: 10px 30px 50px 70px; /* 左上, 右上, 右下, 左下 */
}

・楕円形の角を作成する
div {
   width: 200px;
    height: 100px;
    background-color: lightgreen;
    border-radius: 50% / 20%; /* 横と縦で異なる半径 */
}

・円形を作成する
div {
    width: 150px;
    height: 150px;
    background-color: gold;
    border-radius: 50%;
}

transition(トランジション)

【機能】
CSSトランジションは、要素のスタイルが変化する際に、その変化をスムーズにアニメーション化するためのプロパティです。例えば、ホバー時に色やサイズが即座に切り替わるのではなく、一定の時間をかけて変化させることができます。これにより、より洗練されたユーザー体験を提供できます。


【構文】
div {
    transition:    ;
}

property: アニメーションさせるCSSプロパティを指定します（例: background-color）。
duration: 変化にかかる時間を指定します（例: 2s）。
timing-function: 変化の速度を指定します（例: ease, linear）。
delay: アニメーション開始までの遅延時間を指定します（例: 1s）。


【例】
以下は、背景色が青から赤に変化するトランジションの例です：

box {
    background-color: blue;
    transition: background-color 2s ease-in-out;
}

box:hover {
    background-color: red;
}


【応用例】

複数のプロパティを同時にアニメーションさせることも可能です。以下の例では、幅、高さ、背景色を同時に変化させます：

box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: width 2s, height 2s, background-color 2s;
}

box:hover {
    width: 200px;
    height: 200px;
    background-color: red;
}

■ レイアウト・ボックスモデル margin：マージン padding：パディング border：ボーダー border-radius：ボーダー・レイディアス width / height：ウィズ / ハイト display：ディスプレイ position：ポジション top / right / bottom / left：トップ / ライト / ボトム / レフト z-index：ズィー・インデックス（ジー・インデックス） ■ フレックス・グリッド flex：フレックス flex-direction：フレックス・ディレクション justify-content：ジャスティファイ・コンテント align-items：アライン・アイテムズ gap：ギャップ grid：グリッド grid-template-columns：グリッド・テンプレート・カラムズ ■ 色・背景 color：カラー background：バックグラウンド background-color：バックグラウンド・カラー opacity：オパシティ（オパシティー） ■ テキスト font-size：フォント・サイズ font-weight：フォント・ウェイト line-height：ライン・ハイト text-align：テキスト・アライン letter-spacing：レター・スペーシング ■ アニメーション・トランジション transition：トランジション transition-duration：トランジション・デュレーション animation：アニメーション keyframes：キーフレームズ ■ その他 overflow：オーバーフロー cursor：カーソル visibility：ビジビリティ transform：トランスフォー ム rotate / scale / translate：ローテート / スケール / トランスレート