スタート!CSS入門

ボーダーの種類

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボーダーには、実線、二重線、破線などいくつかの種類がありまず。ボーダーの種類を指定するには、border-styleプロパティを使います。ここでは、border-styleプロパティの使い方について紹介します。
講師:
06:51

字幕

ボーダーの種類を指定するには border-styleプロパティやその関連プロパティを使います。このレッスンでは border-style プロパティと関連するプロパティの使い方について紹介します。まず上下左右4辺それぞれボーダーの種類を個別に設定するためのプロパティについて紹介します。4辺のボーダーの種類を個別に設定するにはborder-top-style 以下4つのいずれかのプロパティを使います。それぞれボーダーの種類の上下左右の辺に対応したプロパティです。これらのプロパティに使える値はこちらの各キーワードです。その他の仕様はご覧の表の通りです。それではそれぞれのキーワードについてどのようなボーダーが適用されるのか順にリストでご紹介します。まず「 none 」。「 none 」はなしです。「 none 」を指定するとボーダーは表示されなくなります。ボーダーの幅も 0 になります。また「 none 」は border-style プロパティのデフォルト値でもありますのでborder-style 関連のプロパティを指定しないかぎり他のボーダー関連のプロパティを指定してもボーダーが表示されない点に注意して下さい。 次に「 hidden 」です。「 hidden 」もボーダーをなしにする指定ですが、「 none 」との違いはborder-collapse プロパティと組み合わせたときの挙動にあります。そして「 dotted 」は点線を指定します。「 dashed 」は波線を指定します。「 solid 」は実線を指定します。「 double 」は二重線を指定します。「 groove 」はくぼみ線を指定します。「 ridge 」は隆起線を指定します。「 inset 」はボーダー内側の内容がくぼむような線を指定します。そして最後に「 outset 」はボーダー内側の内容が隆起するような線を指定します。なおこれらのキーワードで指定できるそれぞれの線の表現はウェブブラウザによって多少見た目が異なりますので注意してください。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見るとページ上部に深緑の背景色を指定した領域があります。HTML を見るとこの領域はヘッダー要素として定義されています。ここではこのヘッダー要素に対して下辺、下の辺にだけボーダーの種類に実線を指定してボーダーを表示する CSS を書いてみます。 なおボーダーの種類を追加したことが確認しやすいようにあらかじめ CSS ではボーダーの幅を10px 、色を赤系の色に指定しています。それではボーダーの種類を変更してみましょう。同じくヘッダー要素に対して「 border-bottom-style 」プロパティを使います。そしてここでは実線を指定するのでキーワード「 solid 」を指定します。ウェブブラウザを見るとヘッダー要素の下にボーダーが表示されていることが分かります。ボーダーの種類も実線になっていますね。続いて border-style プロパティについて紹介します。border-style プロパティはボーダーの種類を上下左右一括で指定できるプロパティです。このように値を一括で指定できる特殊なプロパティをショートハンドプロパティと呼びます。使える値や仕様は先ほどと同様です。ただし値については半角スペース区切りで1つから4つまで指定できます。値の数と適用対象は次の通りです。border-style プロパティの値が1つの場合はその値が「上下左右」に適用されます。この例では上下左右のボーダーの種類に「 solid 」実線が適用されます。 border-style プロパティの値が2つの場合は1つ目の値が「上下」、2つ目の値が「左右」に適用されます。この右の例では1つ目の値が「 solid 」実線、2つ目の値が「 dashed 」波線に指定されます。この例では1つ目の値で上のボーダーの種類に「 solid 」実線、1つ目の値が「上」、2つ目の値が「左右」、3つ目の値が「下」に適用されます。この右の例では1つ目の値が「 solid 」実線、2つ目で左右の値に「 dashed 」波線、3つ目の値で「 dotted 」点線が下のボーダーの種類に指定されています。最後にプロパティの値が4つの場合は1つ目の値が「上」、2つ目の値が「右」、3つ目の値が「下」、4つ目の値が「左」に指定されます。この例では上のボーダーの種類が「 solid 」実線、右が「 dashed 」波線、下が「 dotted 」点線、左が「 none 」なしに指定されます。このレッスンではボーダーの種類を指定するborder-style プロパティやその関連プロパティの使い方について学びました。

スタート!CSS入門

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

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

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

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

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