スタート!CSS入門

ボーダーの幅

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

ぜひご覧ください。

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

字幕

ボーダーの幅を指定するには border-width プロパティやその関連プロパティを使います。このレッスンでは border-width プロパティと関連するプロパティの使い方について紹介します。まず上下左右4辺それぞれボーダーの幅を個別に設定するためのプロパティについて紹介します。4辺のボーダーの幅を個別に指定するにはborder-top-width 以下4つのいずれかのプロパティを使います。それぞれボーダーの幅の上下左右の辺に対応したプロパティです。これらのプロパティに使える値は「 thin 」「 medium 」「 thick 」の各キーワードと「長さ」です。キーワードでは「 thin 」が細いボーダー、「 medium 」が通常のボーダー、 「 thick 」が太いボーダーを指定します。ただし具体的な太さはウェブブラウザに依存します。「長さ」は数値とその単位で指定します。マイナスの値は使えません。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見るとページ上部に深緑の背景色を適用し赤いボーダーで囲まれた領域があります。 HTML を見るとこの領域はヘッダー要素として定義されています。ここではこのヘッダー要素に対して下辺、下の辺だけボーダーの幅を広げるようにCSS を書いてみます。なおボーダーの幅を広げたことが確認しやすいようにあらかじめボーダーの種類には「 solid 」実線、色には赤系の色を指定しています。ボーダーの幅を指定する border-width プロパティのデフォルト値は「 medium 」通常の太さになっているため特にプロパティを指定しなくてもボーダーはすでに表示されています。それではボーダーの幅を広げてみましょう。ヘッダー要素に対して「 border-bottom-width 」プロパティを使って 20px を設定します。ウェブブラウザを見るとヘッダー要素の下辺のみボーダーの幅が広がっていることを確認できます。続いて border-width プロパティについて紹介します。border-width プロパティはボーダーの幅を上下左右一括で指定できるプロパティです。このように値を一括で指定できる特殊なプロパティをショートハンドプロパティと呼びます。使える値や仕様は先ほどと同様です。ただし値については半角スペース区切りで1つから4つまで指定できます。 値の数と適用対象は次の通りです。border-width プロパティの値が1つの場合はその値が「上下左右」に適用されます。この例では上下左右のボーダーの幅に4px が適用されます。値が2つの場合は1つ目の値が「上下」、2つ目の値が「左右」に適用されます。この例では1つ目の値で上下に 4px の幅、2つ目の値で左右に 2px の幅が適用されます。プロパティの値が3つの場合は1つ目の値が「上」、2つ目の値が「左右」、3つ目の値が「下」に適用されます。この例では上のボーダーの幅に 4px左右に 2px 下に 10px が適用されます。そして最後に値が4つ指定された場合は順に「上」「右」「下」「左」に値がそれぞれ適用されます。この例では順に上のボーダーの幅に 4px右に 2px 下に 10px左に 10px が適用されます。このレッスンではボーダーの幅を指定するborder-width プロパティやその関連プロパティの使い方について学びました。

スタート!CSS入門

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

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

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

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

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