目的
- HTMLファイルの要素に下線や枠線をつける方法をまとめる。
押さえるポイント
- 下線や枠線をつけたい要素をCSSで指定してborderプロパティを用いて設定する。
- 線の太さ、種類、色をそれぞれ指定可能。
- 太さはピクセル数で設定する。
- 種類は線の名前で設定する。
- 色はカラーコードで設定する。
枠線をつけたい時の書き方の例
- 下記にCSSファイルの内容を記載する
要素の名前かクラス名 {
border: 太さ 種類 カラーコード;
}
下線をつけたい時の書き方の例
- 下記にCSSファイルの内容を記載する
要素の名前かクラス名 {
border-bottom: 太さ 種類 色;
}
より具体的な例
h1要素に太さ5px、種類solid、色が赤の枠線をつける
p要素に太さ10px、種類solid、色が黒の下線をつける
〜サンプルコード〜
- 下記にHTMLファイルの内容を記載する。
<h1>おはようございます</h1>
<p>これは日本の挨拶です。</p>
- CSSで上記のHTMLファイルのh1タグとpタグに対して枠線と下線の設定をする。
- 下記にCSSファイルの内容を記載する。
h1 {
border: 5px solid red;
}
p {
border-bottom: 10px solid black;
}