web-dev-qa-db-ja.com

<hr>タグの太さを変更する

CSSで水平線の太さを変更したいです。私はそれがそうHTMLのようにされることができることを知っています - 

<hr size="10">

しかし、私はこれが 非推奨 であると聞きます MDNここで 。 CSSではheight:1pxを使ってみましたが、太さは変わりません。 <hr>行を0.5pxの太さにします。

UbuntuでFirefox 3.6.11を使用しています

htmlcssuser-interface
266
Srikar Appalaraju

一貫性を保つために罫線を削除し、<hr>の厚さに高さを使用します。背景色を追加すると、指定した高さと色で<hr>のスタイルが決まります。

あなたのスタイルシートで：

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

または、インラインでインラインにします。

<hr style="height:1px;border:none;color:#333;background-color:#333;" />

より長い説明 ここ

460
Gregg B

ブラウザでのサブピクセルレンダリング

サブピクセルレンダリング は扱いにくいです。実際には、モニタが1ピクセル未満の細い線を描画することは期待できません。しかし、サブピクセル寸法を提供することは可能です。ブラウザによっては、これらのレンダリング方法が異なります。 John Resigの blog投稿 をご覧ください。

基本的に、モニタがLCDで縦線を引いている場合は、1/3ピクセルの線を簡単に引くことができます。背景が白の場合は、線の色を#f0fにします。目にすると、この線はピクセル幅の1/3になります。多少色は変わりますが、モニタを拡大すると、（RGBで構成される）ピクセル全体の1つのセグメントだけが暗くなることがわかります。これは細かいタイプのヒント、つまり ClearType に​​使用されるほとんどのテクニックです。

しかし、水平線は1ピクセルの高さしかありません。それがLCDモニターの技術的限界です。 CRTは、三角形の蛍光体ではさらに複雑でした（ aperture grille タイプ、すなわちSony Trinitronでない限り）が、これは別の話です。

基本的にサブピクセル寸法を提供し、そのようにレンダリングすることを期待することは、整数変数が1.2034759349の数を格納することを期待することと同じです。これが不可能であることを理解しているならば、モニターはサブピクセル寸法をレンダリングすることができないことを理解するべきです。

クロスブラウザセーフスタイル

しかし、blend inの水平方向の規則は、通常、色を使って行われます。あなたの背景が例えば白（#fff）の場合、いつでもあなたのHR very lightにすることができます。 #eeeのように。

非常に薄い水平方向の罫線に対するクロスブラウザの安全なスタイルは、

hr
{
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 1px;
}

インラインスタイルの代わりにCSSファイルを使用してください。それらは、特定の要素だけでなく、サイト全体の中心的な定義を提供します。それは保守性をずっと良くします。

49
Robert Koritnik

私は1pxの線を引くための最短の方法を探していました。分離されたCSSの全負荷が最速または最短の解決策ではないからです。

HTML5までは、1px hrの場合はWASはもっと短い方法でした：<hr noshade>しかし.. <hr>のnoshade属性はHTML5ではサポートされていません。代わりにCSSを使用してください。 （以前に使用された他の属性も、 size、width、align のように）...

さて、これはかなりトリッキーですが、最も単純な1px hrが必要な場合はうまくいきます。

バリエーション1、黒時間：（黒のための最良の解決策）

<hr style="border-bottom: 0px">

出力：FF、オペラ - ブラック/サファリ - ダークグレー

バリエーション2、GREY時間（最短！）

<hr style="border-top: 0px">

出力：オペラ - ダークグレー/ FF - グレー/サファリ - ライトグレー

<hr style="border: none; border-bottom: 1px solid red;">

出力：Opera/FF/Safari：1ピクセルの赤。

7
Muscaria

HR自体を0pxの高さに設定し、代わりにその境界線を表示させることをお勧めします。ズームインしたりズームアウトしたり（ctrl +マウスホイール）すると、HR自体の太さが変わりますが、境界線を設定しても常に同じままです。

hr {
    height: 0px;
    border: none;
    border-top: 1px solid black;
}
4
Yaerius

height 5はhtml 5で廃止されました。私がすることはhrの周りにボーダーを作成し、そのようにボーダーの太さを増やすことです：hr style = "border：solid 2px black;"

4
meddy

ラインに不透明度を追加したので、細く見えます。

<hr style="opacity: 0.25">
0
Gaunt