CSS を使用して <hr> 要素の太さを調整する – クイックガイド
<hr> タグはWebページに水平線を引くために使用されます。このタグは、異なるセクション間に水平線を引いてコンテンツを区切るのに最も便利な HTML タグの 1 つです。このガイドでは、<hr> の厚さを変更する方法を学びます。 さまざまなメソッドで CSS を使用してタグを付けます。
構文
hr {
height: value;
border: value;
}
HTML の hr タグ
<hr> タグは水平罫線を表します。これは、水平線を使用して Web ページのセクション間に視覚的な区切りを作成する自己終了タグです。
例
<!DOCTYPE html>
<html>
<head>
<style>
hr {
margin: 20px 0;
}
</style>
</head>
<body>
<p>Section 1</p>
<hr>
<p>Section 2</p>
</body>
</html>
Two text sections separated by a thin horizontal line with proper spacing.
方法 1:Height プロパティを使用する
このメソッドでは、height を直接使用します。 <hr> の太さを変更する CSS のプロパティ タグ。このメソッドは、水平線の表示の太さを制御します。
例
<!DOCTYPE html>
<html>
<head>
<style>
hr {
height: 5px;
background-color: black;
border: none;
margin: 20px 0;
}
</style>
</head>
<body>
<p>Above the line</p>
<hr>
<p>Below the line</p>
</body>
</html>
Two text sections separated by a thick 5px black horizontal line.
方法 2:Border プロパティを使用する
このメソッドでは、border-top を使用します。 または border-bottom CSS のプロパティを使用して、太い水平線を作成します。この方法はより柔軟で、破線や点線などのさまざまなデザインをサポートします。
例
<!DOCTYPE html>
<html>
<head>
<style>
hr {
border: none;
border-top: 6px solid blue;
margin: 20px 0;
}
</style>
</head>
<body>
<p>Above the Line</p>
<hr>
<p>Below the Line</p>
</body>
</html>
Two text sections separated by a thick 6px blue horizontal line.
比較
結論
<hr> の太さは簡単に変更できます。 CSSを使ったタグ付け。 height 実線の場合は簡単な方法ですが、border の場合は簡単です。 この方法では、スタイリングの柔軟性がさらに高まります。設計要件に基づいて選択してください。
-
CSS3を使用した要素の2D変換
2D変換は、平行移動、回転、拡大縮小、傾斜などの要素構造を再変更するために使用されます。 以下は、2D変換関数の一部です- Sr.No。 値と説明 1 matrix（n、n、n、n、n、n） 6つの値を持つ行列変換を定義するために使用されます 2 translate（x、y） x軸とy軸とともに要素を変換するために使用されます 3 translateX（n） x軸とともに要素を変換するために使用されます 4 translateY（n） y軸とともに要素を変換するために使用されます 5 scale（x、y） 要
-
CSSで背景色を設定する
background-colorプロパティを使用して要素の背景色を指定できます。標準名、rgb（）、rgba（）、hsl（）、またはhsla（）で値を指定できます。 構文 CSSbackground-colorプロパティの構文は次のとおりです- Selector { background-color: /*value*/ } 例 次の例は、CSSのbackground-colorプロパティ-を示しています。 <!DOCTYPE html> <html> <head> <style> p:first-of-type {