CSS
LINEでログイン
Googleでログイン
Twitterでログイン
borderプロパティとは
borderプロパティのborderとは、要素の境界を意味します。
borderプロパティは、ボーダー（要素の境界）の線のスタイル、線の太さ、線の色をまとめて指定する際に使用するＣＳＳのプロパティです。
borderプロパティのそれぞれを分解して使用することもできます。
・border-style 線のスタイル
・border-width 線の太さ
・border-color 線の色
borderプロパティのようにまとめて指定する手法をショートハンドと言います。
CSSでは、border以外にもたくさんのショートハンドが用意されています。
任意の方向だけにborderを適用する
borderプロパティで指定した場合は、上下左右すべての方向に線を引いてしまいます。
上下だけに線を引きたい場合や、テキストを強調させるために下線を引きたい場合は以下のプロパティを使って方向を指定します。
・border-top 上方向
・border-right 右方向
・border-bottom下方向
・border-left 左方向
CSSの問題に挑戦しよう！
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、CSSマスターへの道の第一歩となるでしょう。
問題5：【border】枠線をデザインしよう
'ninjacode'という文字に赤で下線を引き強調させ、
'ボタン'という文字の周りには黒の線を引いて実際のボタンのように表示しましょう。
'ボタン'という文字の周りには黒の線を引いて実際のボタンのように表示しましょう。
あらかじめエディタに書くコード
<span class="text">ninjacode</span>
<span class="btn">ボタン</span>
¥HTML¥
期待する画面
解答ソースコード
.text {
border-bottom: 1px solid #ff0000;
}
.btn {
border: 1px solid #000;
}
¥CSS¥
補足
borderは文章を強調させたり、ワンポイントのデザインによく使用されています。
枠線の種類には、1本線の'solid'、2本線の'double'、破線の'dashed'、点線の'dotted'等があります。
線の太さもpxで指定可能なので自由にデザインしてみましょう。
枠線の種類には、1本線の'solid'、2本線の'double'、破線の'dashed'、点線の'dotted'等があります。
線の太さもpxで指定可能なので自由にデザインしてみましょう。
完了にする！
活動記録をTweetする
また、border: 20px 0 30px 10px;のようにまとめて書くこともできます。
この方法をショートハンドと言います。
borderをショートハンドで書く場合は、上、右、下、左の順番になります。