スタート!CSS入門

ボーダーのショートハンドプロパティ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボーダー関連のプロパティは、borderプロパティを使うことで一括して指定できます。ここでは、borderプロパティの使い方について紹介します。
講師:
03:40

字幕

ボーダー関連のプロパティは border プロパティやその関連プロパティを使うことで一括して指定できます。このレッスンでは border プロパティと関連するプロパティの使い方について紹介します。まず上下左右4辺それぞれボーダー関連の値を個別に設定するためのプロパティについて紹介します。4辺のボーダー関連の値を個別に設定するにはborder-top 以下4つのいずれかのプロパティを使います。それぞれボーダー関連の値の上下左右の辺に対応したプロパティです。これらのプロパティに使える値は各プロパティに依存します。各プロパティは半角スペース区切りで指定します。値は省略も可能ですがその場合はデフォルト値が適用されます。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見るとすでにページの上部に深緑の背景色を適用した領域があります。HTML を見るとこの領域はヘッダー要素として定義されています。ここではこの見出しなどを含むヘッダー要素に対して下辺、下の辺にだけ各種ボーダーの値を一括で設定する CSS を書いてみます。ヘッダー要素に対して「 border-bottom 」プロパティで値を指定していきます。 まず「 border-width 」幅を 20px に。次に「 border-style 」ボーダーの種類を「 solid 」実線に。最後に「 border-color 」ボーダーの色を赤に設定します。ウェブブラウザを見るとヘッダー要素の下辺のボーダーが20px の幅で実線、色が赤になっていることを確認できます。border-bottom プロパティを使ってボーダーの幅、種類、色を一括で指定できました。続いて border プロパティについて紹介します。border プロパティはボーダー関連のプロパティの値を上下左右の辺に対して一括で指定できるプロパティです。このような特殊なプロパティをショートハンドプロパティと呼びます。使える値は各プロパティに依存します。各プロパティは半角スペース区切りで指定します。値は省略も可能ですがその場合はデフォルト値が適用されます。そのほかの仕様はご覧の表の通りです。このレッスンではボーダー関連のプロパティを一括して指定できるborder プロパティの使い方について学びました。

スタート!CSS入門

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

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

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

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

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