HTML の 要素 に 下線 や 枠線 を つける ～CSS border border-bottom～

目的

• 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;
}