CSS3の基本 - レベルアップCSS

角丸

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボックスの角を角丸に指定するには、border-radiusプロパティを使います。ここでは、border-radiusプロパティの使い方について紹介します。
講師:
04:12

字幕

ボックスの角を角丸に指定するときはborder-radius プロパティを使います。このレッスンでは border-radius プロパティの使い方について紹介します。border-radius プロパティに使える値は「長さ」「パーセント値」です。長さは数値とその単位。パーセント値は数値とパーセントで指定します。その他の仕様はご覧の表の通りです。値の指定方法は多岐にわたりますので実際にCSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見るとページの中の領域が緑、青、赤の3つの領域に分かれていることが確認できます。この領域はそれぞれ HTML では header 要素main 要素そして一番下が footer 要素として定義されています。これらの要素にはそれぞれ文字色と背景色が設定されています。なお footer 要素については高さを 100px に指定しています。それではこのそれぞれの領域についてborder-radius で角丸を指定していきましょう。まずは header 要素です。一括して上下左右に統一された値をしたいときはborder-radius プロパティを使って1つの値を指定します。 ここでは 10px を指定してみましょう。10px を指定すると header 要素の左上右上右下左下すべての角が10px の角丸になりました。border-radius プロパティでは角丸を楕円に設定することもできます。次の main 要素に対して適用してみましょう。border-radius プロパティを追加しそこに対して値を指定していきます。楕円にするにはまず横方向の半径を指定します。ここでは 40px を指定してみましょう。そして縦方向の半径を指定する前に半角スペース / を入力します。そして縦方向の半径を指定します。ここでは横長の楕円になるように 10px を指定してみます。ウェブブラウザを見るとすべての角丸が横半径 40px縦半径 10px の非常に細長い横長の角丸になったことが確認できます。最後の fotter 要素にはそれぞれの角で違う角丸を指定してみましょう。同じように border-radius プロパティについて値を指定していきます。値はそれぞれの角で4つ指定することができます。1つ目の値が対応する場所は左上の角です。ここでは 0 と入力します。2つ目の値が対応する角は右上です。 ここでは 10px と入力します。3つ目の値が対応する角は右下です。ここでは 4px を入力します。4つ目の値が対応する角は左下です。ここでは 100px を入力します。ウェブブラウザを見るとそれぞれ指定した値がそれぞれの角に指定されていることが分かります。なおここでは border-radius プロパティを使ってそれぞれの角に角丸を設定しましたが別の関連プロパティを使うことができます。サンプルファイルにある related.html を開きます。この中には先ほどの footer 要素に対して書いた border-radius プロパティの内容が別のプロパティを使って同じ内容として書かれています。例えば一番上、左上の角丸を指定する値としてはborder-top-left-radius プロパティを使って指定することもできます。またそれぞれ top-right-radius で右上。bottom-right-radius で右下。bottom-left-radius で左下の角を指定できます。このレッスンではボックスの角を角丸に指定するborder-radius プロパティの使い方について学びました。

CSS3の基本 - レベルアップCSS

CSS3はこれまでのCSSとの互換性を保ちつつ、より豊かな表現力を備えたCSSの新しいバージョンです。このコースでは、CSS3の膨大な仕様の中から比較的幅広い環境で動作する機能を中心に解説していきます。また異なるWebブラウザによる表示のされ方の違いに対しても、プログレッシブ・エンハンスメントに代表されるようないくつかのアプローチを取り上げ、紹介します。

2時間21分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年08月06日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。