新・HTML/CSS入門編14:ボックスの角丸を個別に設定する(border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-bottom-right-radius)

@charset "UTF-8";
h1 {
    padding: 20px;
    background-color: #f5a1b3;
}

@charset "UTF-8";
h1 {
    padding: 20px;
    background-color: #f5a1b3;
}

@charset "UTF-8";
h1 {
    padding: 20px;
    background-color: #ffa500;
}

@charset "UTF-8";
h1 {
    padding: 20px;
    background-color: #ffa500;
}

この動画を見るには

paiza会員登録のうえ

有料会員登録が必要です

演習1
演習2

問題ログインすると模範解答や入力を見ることができます

演習課題「ボックスの角丸を個別に指定しよう」

現在、ブラウザでは、ピンクのボックスが表示されています。
ここで、border-top-left-radiusプロパティとborder-top-right-radiusプロパティ、border-bottom-left-radiusプロパティ、border-bottom-right-radiusプロパティを用いて、このボックスの角を個別に角丸にしてください。
ただし、角丸の半径の値は左上から時計回りに45px、35px、25px、15pxと指定してください。

採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！

※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。

問題ログインすると模範解答や入力を見ることができます

演習課題「border-radiusプロパティを用いてボックスの角丸を個別に指定しよう」

現在、ブラウザでは、オレンジのボックスが表示されています。
ここで、border-radiusプロパティを用いて、このボックスの角を個別に丸くしてください。
ただし、角丸の半径の値は左上から時計回りに15px、25px、35px、45pxと指定してください。

採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！

※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。

Tips

動画へ戻る

次のチャプターへ前のチャプターへ

※有料会員になるとこの動画をご利用いただけます

詳しい説明を読む

＃07:ボックスの角丸を個別に設定する(border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-bottom-right-radius)

このチャプターでは、ボックスの角丸を個別に設定する方法を学習します。

ボックスの角丸を個別に設定する方法

角丸ボックスの四隅の半径は以下のプロパティを使って個別に指定することができます。
・左上の角丸の半径を調整するborder-top-left-radius
・右上の角丸の半径を調整するborder-top-right-radius
・左下の角丸の半径を調整するborder-bottom-left-radius
・右下の角丸の半径を調整するborder-bottom-right-radius

また、border-radiusプロパティだけでも角丸ボックスの四隅の半径を個別に指定することができます。
その場合は、以下のような形式で値を指定します。
・ border-radius: a b c dでは、値aが左上、値bが右上、値cが右下、値dが左下と時計回りの順に半径を指定できます。
・ border-radius: a b cでは、値aが左上、値bが右上と左下、値cが右下と上から順に半径を指定できます。
・ border-radius: a bでは、値aが左上と右下、値bが左下と右上とそれぞれの対角線上に位置するペアで半径を指定できます。

ボックスの角丸を個別に指定するコード

@charset "UTF-8";
h1 {
    padding: 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 40px;
    background-color: red;
}

ボックスの角丸をborder-radiusプロパティ単体で指定するコード

@charset "UTF-8";
h1 {
    padding: 20px;
    border-radius: 40px 30px 20px 10px;
    background-color: red;
}

参考になるサイト

MDN web docs
https://developer.mozilla.org/ja/docs/Web/CSS/border-radius

https://developer.mozilla.org/ja/docs/Web/CSS/border-top-left-radius

https://developer.mozilla.org/ja/docs/Web/CSS/border-top-right-radius

https://developer.mozilla.org/ja/docs/Web/CSS/border-bottom-left-radius

https://developer.mozilla.org/ja/docs/Web/CSS/border-bottom-right-radius

プログラミング学習 > 新・HTML/CSS入門編 > 新・HTML/CSS入門編14: ボックスの細かい設定を理解しよう > ボックスの角丸を個別に設定する(border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-bottom-right-radius)