⑥CSSの基礎〜ボーダー

Contents

1 スポンサーリンク
2 ボーダー
3 ボーダーの種類
4 ボーダーの実例
5 スポンサーリンク

ボーダー

罫線の太さが変えられます。つまりはこういうこと

ボーダーの種類

ボーダーの種類は何があるかを確認してみましょう！

border …… ボーダーのスタイル・太さ・色を指定する
border-color …… ボーダーの色を指定する
border-style …… ボーダーのスタイルを指定する
border-width …… ボーダーの太さを指定する
border-top …… 上ボーダーのスタイル・太さ・色を指定する
border-top-color …… 上ボーダーの色を指定する
border-top-style …… 上ボーダーのスタイルを指定する
border-top-width …… 上ボーダーの太さを指定する
border-bottom …… 下ボーダーのスタイル・太さ・色を指定する
border-bottom-color …… 下ボーダーの色を指定する
border-bottom-style …… 下ボーダーのスタイルを指定する
border-bottom-width …… 下ボーダーの太さを指定する
border-left …… 左ボーダーのスタイル・太さ・色を指定する
border-left-color …… 左ボーダーの色を指定する
border-left-style …… 左ボーダーのスタイルを指定する
border-left-width …… 左ボーダーの太さを指定する
border-right …… 右ボーダーのスタイル・太さ・色を指定する
border-right-color …… 右ボーダーの色を指定する
border-right-style …… 右ボーダーのスタイルを指定する
border-right-width …… 右ボーダーの太さを指定する

ボーダーの実例

では実際にやってみましょう！

CSS側 style.css

p.sample1 {border: double 10px black;}
p.sample2 {border: inset 10px red;}
p.sample3 {
margin: 30px 30px;
padding: 10px;
border: medium solid blue;
}}

HTML側

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p class="sample1">サンプルです。</p>
<p class="sample2">サンプルです。</p>
<p class="sample3">サンプルです。</p>
</body>
</html>

実際にやってみるとこんな感じになります！

これでCSS初級編終了です！お疲れ様でした！

前のページ⑤CSSの基礎～マージンとパディング

⑥CSSの基礎〜ボーダー

スポンサーリンク

ボーダー

ボーダーの種類

ボーダーの実例

スポンサーリンク