⑥CSSの基礎〜ボーダー

スポンサーリンク

本当にわからないとこがあった場合一人では解決できません。
『teratail』とはエンジニア特化型のQ&Aサイトです。 すべてのエンジニアさんが抱えている悩みを共有して 解決するための質問サイトです
無料なのでまずは登録して使ってみてください。メールアドレスだけで登録可能です ----------------------------------------------------------------------------------------

ボーダー

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



ボーダーの種類

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

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

スポンサーリンク

プログラミングは独学からは挫折の可能性が高いです。まずは無料体験ができる
コードキャンプが本当におすすめ。無料体験でわからないところを聞きましょう。
転職補助つき。カリキュラム終了後に転職紹介をしてくれます。