水平線

公開: 2021-09-01

HTMLページをより美しく、適切に構造化する方法はたくさんあります。具体的には、水平線は、サイトのコンテンツのバランスを取り、明確にし、閲覧しやすくするために特別な役割を果たすことができます。ウェブサイトに大きな変更を加えることにしたときはいつでも、線などの小さなものが違いを生む可能性があります。そのようなささいなことはあなたのサイトのメッセージをより包括的にします。その上、彼らはあなたのウェブリソースの視覚的な魅力とあなたの聴衆があなたのデータを認識する方法を変えることができます。

ただし、Webページに合わせてカスタマイズされた線を作成し、ページ上で操作しているスペースをよりよく習得することもできます。

そうは言っても、HTMLページ内の水平線をカスタマイズする方法を詳しく見てみましょう。

水平線は、Webページの装飾として使用されるHTML要素です。ただし、次のような他の目的にも役立ちます。

-コンテンツのさまざまな部分を視覚的に分割し、あるアイデアが終わり、別のアイデアが始まる場所を強調するセパレーター。

-Webページのいくつかの意味のあるセクションを強調する蛍光ペン。

-水平線は、Webサイトで幅広い目的を達成するための最も一般的で最も簡単な方法の1つと見なされています。一見シンプルに見えるかもしれませんが、特定の要件に基づいて調整できる多機能要素です。 WebページのHTMLコードを簡単に変更するだけで、次の水平線の仕様を調整できます。

長さ;

幅;

色;

配置。

水平線がブロック要素を参照していることも指摘する価値があります。これは、Webページの別の行に配置され、その行の横に追加したテキストがその下に配置されることを意味します。

水平線は、ページをさまざまなセクションに分割するのに非常に便利です。<hr>と入力するだけで単純な水平線を追加すると、次のようになります。

水平線を作成する方法

単純な<hr>タグを使用して行を設定できます。これは「HorizontalRule」の略で、従来の外部パラメータを設定します。他の多くの製品と異なる点は、終了タグを必要とせず、単独で存在できることです。タグの追加の値を使用して、要素の外部特性を変更できます。

こんな感じです。たとえば、100ピクセルの長さが必要な場合は、次のようなタグを設定します。hr width="100。

配置。

線を左端または右端、さらに中央に揃えることができます。この機能は、ページ全体の行を揃えることができないため、幅パラメータをすでに指定している場合にのみ有効です。配置の場合は、「align」タグに追加の属性を設定し、方向を追加します。center-中央の場合、left-左と右の場合-右の配置の場合。

この場合、完成したタグは次のようになります。長さが150ピクセルの水平線の中心の配置を設定する必要がある場合、完成したタグは次のようになります。hr align = "center" width = " 150"。

属性が長さメジャーの幅に依存している場合でも、アライメントのメジャーである「align」は位置1に配置されることに注意してください。

幅。

オプションで、幅を指定して、太字または細い下線を作成することもできます。この基準は何にも依存せず、長さや配置を指定せずに独立して使用できます。そのために、タグのsize属性と、ピクセル単位の目的の幅に等しい数値を使用します。番号は、サイズ属性と「=」記号の後に引用符で示されます。

したがって、幅15ピクセルの線を作成する必要がある場合は、次のタグを作成する必要があります：hr size="15"。

色。

また、独立した指標として設定されています。これを変更するには、コード形式または英語の色名と組み合わせてcolor属性を使用します。色は「=」記号の後に引用符で囲まれています。

したがって、標準の白い線のタグは、hr color="#FFFFFF"またはhrcolor="white"の2つの方法で記述できます。

黒はコード＃000000を使用して作成できます。

色付きの水平線を作成するにはどうすればよいですか？

水平線は、テキストの1つのブロックを別のブロックから分離するのに適しています。上下に横線が入った小さなテキストは、通常のテキストよりも読者の注意を引きます。

<hr>タグを使用すると、水平線を描画できます。その外観は、使用する属性とブラウザによって異なります。タグはブロック要素を参照するため、行は常に新しい行で始まり、その後、すべての要素が次の行に表示されます。 <hr>タグの多くの属性のおかげで、このタグを介して作成された行は簡単に操作できます。スタイルの力と組み合わせると、ドキュメントに線を追加するのは簡単です。

デフォルトでは、線は灰色でボリューム効果とともに表示されます。このタイプの線は必ずしもサイトのデザインに適合するとは限らないため、スタイルを通じて線の色やその他のパラメータを変更したいという開発者の要望は理解できます。ただし、ブラウザはこの問題についてあいまいです。そのため、一度に複数のスタイルプロパティを使用する必要があります。特に、古いバージョンのInternet Explorerは線の色にcolorプロパティを使用しますが、他のブラウザは背景色を使用します。ただし、それだけではありません。この場合は、必ずゼロ以外の線の太さ（高さプロパティ）を指定し、borderプロパティをnoneに設定して、線の周囲の境界線を削除してください。 hrセレクターのすべてのプロパティをまとめると、一般的なブラウザー向けのユニバーサルソリューションが得られます。

<！ DOCTYPE html> <html> <head> <meta charset ="utf-8"><title>水平線の色</title><スタイル>hr{border：none; /*境界線を削除します*/background-color：red; /*線の色*/色：赤; / *IE6-7の線の色*/高さ：2px; /*線幅*/}</ style> </ head> <body><hr><p>テキスト文字列</p><hr> </ body> </ html>

例：

これ：

これを与える：

色：線の色：

サイズ：ピクセルで表された線の高さ：

幅：パーセンテージ（％）またはピクセルで表された線の幅（私の例では、元のサイズの50％です）：

より高度な：

これ：

与える：

この場合、スタイルを使用しました。

境界線の幅は3ピクセル（3ピクセル）です

点線です

基本色は黒です：＃000000

青で着色されたドット：＃0099CC

まだ必要な場合は、さらに説明する最後の例;）：

これ

与える：

この場合、すぐ上にあります。

境界線の幅は2ピクセル（2ピクセル）です

破線です

基本色は白です：#FFFFFF

銀色のダッシュ：＃C0C0C0

可能なスタイルは次のとおりです。

-点在

-破線

-個体

-ダブル

-溝

-最初

-挿入図

-海嶺

水平線について言わなければならないのはこれだけです！