> ⑥CSSの基礎〜ボーダー – ネットワークエンジニアチュートリアル

⑥CSSの基礎〜ボーダー

スポンサーリンク

無料でプログラマへ!30歳までなら無料でプログラミング学校に通うことが出来ます。下の画像をクリックして無料相談会でGO!

ボーダー

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



ボーダーの種類

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

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の基礎~マージンとパディング

スポンサーリンク

ネットワークエンジニアになりたければ下記から無料相談会に参加!
なんと無料で授業を受けれてエンジニアになれます

投稿日:2017-09-16 更新日:

執筆者: