段落に個別の境界スタイルを適用する
このステップでは、CSS を使って段落に個別の境界スタイルを適用する方法を学びます。前のステップで作成した border-styles.html
ファイルを WebIDE で開きます。
HTML ドキュメントの <head>
内に <style>
セクションを追加して、段落の CSS 境界プロパティを定義します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Border Styles Example</title>
<style>
p {
border-width: 3px;
border-color: blue;
border-style: solid;
}
</style>
</head>
<body>
<p>
Welcome to our CSS Border Styles tutorial! This paragraph will help us
explore different border properties.
</p>
</body>
</html>
個々の境界プロパティを解説しましょう。
border-width
:境界の太さを制御します(px、em などの単位を使用できます)
border-color
:境界の色を設定します
border-style
:境界の外観を定義します(実線、破線、点線など)
次に、いくつかのバリエーションを試してみましょう。CSS を変更して、異なる個別の境界効果を確認します。
<style>
p {
border-top-width: 4px;
border-top-color: red;
border-top-style: dashed;
border-bottom-width: 2px;
border-bottom-color: green;
border-bottom-style: dotted;
}
</style>
この例は、境界の個々の辺を異なるスタイルで装飾する方法を示しています。段落には現在、以下のような境界があります。
- 上辺に 4px の赤色の破線
- 下辺に 2px の緑色の点線
出力例では、異なる上辺と下辺の境界スタイルを持つ段落が表示されます。