スタート!CSS入門

ボーダーの色

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボーダーの色を指定するには、border-colorプロパティを使います。ここでは、border-colorプロパティの使い方について紹介します。
講師:
05:29

字幕

ボーダーの色を指定するには border-colorプロパティやその関連プロパティを使います。このレッスンでは border-color プロパティと関連するプロパティの使い方について紹介します。まず上下左右4辺それぞれボーダーの色を個別に設定するためのプロパティについて紹介します。4辺のボーダーの色を個別に指定するにはborder-top-color 以下4つのいずれかのプロパティを使います。それぞれボーダーの色の上下左右の辺に対応したプロパティです。これらのプロパティに使える値は「色」「 transparent 」キーワードです。「色」は RGB 値またはキーワードで指定します。「 transparent 」キーワードはボーダーの色が透過、透明に設定されます。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見るとページ上部に深緑の背景色を適用し薄いグレーのボーダーで囲まれた領域があります。HTML を見るとこの領域はヘッダー要素として定義されています。CSS ではボーダーの色を適用したことが確認しやすいようにあらかじめボーダーの種類に「 solid 」実線、ボーダーの幅に 20px を指定しています。 ボーダーの色を指定するプロパティのデフォルト値はカラープロパティの値、文字色になっているためさらにこの上に定義されている文字色がボーダーの色として表示されています。ここではこのヘッダー要素に対して下辺、下の辺だけボーダーの色を赤になるようCSS を書いてみます。ヘッダー要素に対して「 border-bottom-color 」プロパティを赤に設定します。ウェブブラウザを見るとヘッダー要素の下辺、下の辺のボーダーの色が赤になっていることを確認できます。続いて border-color プロパティについて紹介します。border-color プロパティはボーダーの色を上下左右一括で指定できるプロパティです。このように値を一括で指定できる特殊なプロパティをショートハンドプロパティと呼びます。使える値や仕様は先ほどと同様です。ただし値については半角スペース区切りで1つから4つまで指定できます。値の数と適用対象は次の通りです。border-color プロパティの値が1つの場合はその値が「上下左右」に適用されます。この例では上下左右のボーダーの色に「 red 」赤が適用されます。プロパティの値が2つの場合はその値が「上下」と「左右」に適用されます。 この例では1つ目の「 red 」という値が上下に、2つ目の「 yellow 」という値が左右に適用されます。border-color プロパティの値が3つの場合は1つ目の値が「上」、2つ目の値が「左右」、3つ目の値が「下」のボーダーに適用されます。この例では1つ目の「 red 」赤が上のボーダーに、2つ目の「 yellow 」黄色のボーダーが左右に、3つ目の「 green 」緑のボーダーが下に設定されます。そして最後に値が4つの場合は順に「上」「右」「下」「左」のボーダーの色が設定されます。この例では1つ目の「 red 」赤が上、2つ目の「 yellow 」黄色が右に、3つ目の「 green 」緑が下、4つ目の「 purple 」紫が左にそれぞれ設定されます。このレッスンではボーダーの色を指定するborder-color プロパティやその関連プロパティの使い方について学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

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

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

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

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