スポンサーリンク
本当にわからないとこがあった場合一人では解決できません。『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初級編終了です！お疲れ様でした！
スポンサーリンク
プログラミングは独学からは挫折の可能性が高いです。まずは無料体験ができるコードキャンプが本当におすすめ。無料体験でわからないところを聞きましょう。
転職補助つき。カリキュラム終了後に転職紹介をしてくれます。
