新・HTML/CSS入門編12:ボーダー(border)

@charset "UTF-8";
article {
    margin: 40px;
    background-color: #ffa500;
}

@charset "UTF-8";
article {
    margin: 40px;
    background-color: #ffa500;
}

@charset "UTF-8";
article {
    margin: 40px;
    background-color: #6495ed;
}

@charset "UTF-8";
article {
    margin: 40px;
    background-color: #6495ed;
}

@charset "UTF-8";
article {
    margin: 40px;
    background-color: #ffa500;
}

@charset "UTF-8";
article {
    margin: 40px;
    background-color: #ffa500;
}

この動画を見るには

paiza会員登録のうえ

有料会員登録が必要です

問題ログインすると模範解答や入力を見ることができます

演習課題「ボーダーを設定してみよう」

現在、ブラウザでは、霧島京子、六村リオ、緑川つばめと表示されています。
ここで、borderプロパティを用いて、article要素の枠線のスタイルを点線に、太さを10px、カラーを#6495edに設定してください。

採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！

※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。

問題ログインすると模範解答や入力を見ることができます

演習課題「ボーダーのスタイルや太さ、色を個別に指定してみよう」

現在、ブラウザでは、霧島京子、六村リオ、緑川つばめと表示されています。
ここでborder-styleプロパティとborder-widthプロパティ、border-colorプロパティを用いて、article要素の枠線のスタイルを破線、太さを10px、カラーを#ffa500に設定してください。

採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！

※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。

問題ログインすると模範解答や入力を見ることができます

演習課題「下部のボーダーを個別に指定してみよう」

現在、ブラウザでは、霧島京子、六村リオ、緑川つばめと表示されています。
ここでborder-bottomプロパティを用いて、article要素の下線のスタイルを点線、太さを10px、カラーを#6495edに設定してください。

採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！

※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。

Tips

動画へ戻る

次のチャプターへ前のチャプターへ

※有料会員になるとこの動画をご利用いただけます

詳しい説明を読む

＃04:ボーダー(border)

このチャプターでは、ボーダーを学習します。

ボーダー(border)

ボーダーとは、コンテンツとパディングを一つの要素として考えた場合に、その要素の境界として設定した枠線のことを指します。

CSSでborderプロパティに適切な値を指定することで、要素のボーダーの種類と太さ、色を調整できます。

値を書く順序は、どのような順序で書いても問題ありません。

ボーダーのスタイルと太さ、色の個別指定

ボーダーのスタイルと太さ、色は個別に指定することができ、
・スタイルを指定するborder-style
・太さを指定するborder-width
・色を指定するborder-color
のプロパティがあります。

また、ボーダーのスタイルは点線や破線などさまざまな種類があり、主なスタイルとしては、
・実線を引く「solid(ソリッド)」
・点線を引く「dotted(ドッティド)」
・破線を引く「dashed(ダッシュド)」
・二重線を引く「double(ダブル)」
・何も表示しない「none(ノーン)」
があります。

ボーダーのスタイルと太さ、色を一括指定するコード

@charset "UTF-8";
article {
    margin: 40px;
    border: solid 5px red;
    background-color: yellow;
}

ボーダーのスタイルと太さ、色を個別指定するコード

@charset "UTF-8";
article {
    margin: 40px;
    border-style: dotted;
    border-width: 5px;
    border-color: blue;
    background-color: yellow;
}

上下左右のボーダーを個別指定するコード

@charset "UTF-8";
article {
    margin: 40px;
    border-bottom: solid 5px red;
    background-color: yellow;
}

参考サイト

MDN web docs
https://developer.mozilla.org/ja/docs/Web/CSS/border

https://developer.mozilla.org/ja/docs/Web/CSS/border-style

https://developer.mozilla.org/ja/docs/Web/CSS/border-width

https://developer.mozilla.org/ja/docs/Web/CSS/border-color

https://developer.mozilla.org/ja/docs/Web/CSS/border-top

https://developer.mozilla.org/ja/docs/Web/CSS/border-right

https://developer.mozilla.org/ja/docs/Web/CSS/border-bottom

https://developer.mozilla.org/ja/docs/Web/CSS/border-left

プログラミング学習 > 新・HTML/CSS入門編 > 新・HTML/CSS入門編12: ボックスモデルを理解しよう > ボーダー(border)