コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
ボタンの角に丸みを加える
このレッスンでは ボタンの角に丸みをつけたいと思います。 今このボタンにしたい a要素なんですけれどもね、 背景色が四角く塗られています。 ここを角丸にしようということです。 プロパティは border-radius という プロパティになります。 ボタンのa要素というのはこれですね。 p要素、class、button の中にある a要素です。 ということでこれがそうですね。 クラス button の中のa要素。 ここに設定を加えるんですが、 プロパティは border-radius です。 ですから見やすいように ボーダーをつけておきましょう。 border で 1px の solid。 そしてカラーは black と いうことにしておきます。 角丸は border-radius と。 ボーダーの半径ということですね。 角丸の半径を指定します。 ここでまずは 10px としましょう。 そうすると今ここに出てますけれども 左上と右上、右下と左下 全部に半径 10px の角丸がつきます。 確かめましょう。 ファイルを保存します。 1ピクセルの黒いボーダーがついて 角が半径10pxの角丸になっています。 四隅同じ丸みでいいと思うんですが、 違うふうにして どうなるか確認をしてみましょう。 では、ここで 50px というふうにします。 そうすると左上と右下が 元の 10px ですね。 2つ目の値は、今度は右上と左下 に設定されて それぞれ半径 50px ですね。 ですから対角線に設定される ということになります。 確認しましょう。 対角線、左上と右下が半径 10px の角丸、 それから右上と左下が 半径50px、ずいぶん大きいですね、 の角丸ということになりました。 せっかくですからあと2つ 試してみましょう。 3つ目、25px というふうにして 0 という指定も可能です。 そうすると このような設定になるんですけれども 左上が 10、右上が 50、 右下が 25、左下が 0 ということで 左から時計回りですね。 時計回りに設定されます。 10px、50px、25px、0、 これは角丸にならないということですね。 確認しましょう。 ファイルを保存します。 このように ちょっと変わった形になりました。 なんか電車みたいですね。 左上から時計回りに…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。