水平線を引く HTML はどれですか。 divブロックとhr水平線

サイトの特に重要な要素を強調するには、そのために提供されているあらゆる種類の CSS スタイルとプロパティを使用しても問題ありません。もちろん、テキストをあまり気にせず、太字や斜体で強調表示したり、背景を変更したり、テキストの周囲に枠を作成したりする必要はありません。しかし、提示された方法の 1 つが常に適切であるとは限りません。意味上の負荷の詳細により、分割する必要があるテキストがあるとします。ここが彼らの行き着く場所です HTMLヘルプそしてCSSプロパティ。

CSSを使用してテキスト内に行を作成する方法

計画を実行するには、以下に連絡する必要があります style.css ファイル、それに対応するプロパティを書き込んだ国境。これにより、テキストの上、下、または特定の側に線が表示されます。次に、線の表示を担当するいくつかのプロパティがあります。

- ボーダートップ– テキストの上にある水平線。

- 境界線右– テキストの右側にある垂直線。

- ボーダーボトム– テキストの下にある水平線。

- 左端– 左側にある垂直線。

HTMLでの行の作り方

使用する CSS プロパティ HTML コードを編集して、必要な値をすべて入力できます。これを行うには、サイトの管理部分に移動する必要があります。公開されている素材のいずれかを選択し、切り替えますテキストエディタ HTML コード編集モードに切り替えて、CSS プロパティを追加します。サンプルは以下で見ることができます。

点線または直線を作成するにはどうすればよいですか?

これらのプロパティを指定することにより、提示されている資料、段落または見出しの重要性を強調できますか?

コマンドの簡単な説明

- 幅– 行の長さ。

- 固体- 実線。

- 点在- 点線。

スタイルをより深く理解するには、これを読むことをお勧めします。

サイトコードを変更するプロセスでは、線の種類、太さ、色を決定するプロパティがスペースで区切られてリストされることを理解する必要があります。

この方法にはいくつかの利点があります。

ほぼあらゆるラインを作成できる幅広い可能性。

必要なすべての変更を HTML コードに直接簡単に行うことができます。これにより、経験の浅いサイト構築者のタスクが大幅に簡素化されます。

HTMLタグを使ってまっすぐな水平線を作る方法

まず注意していただきたいのは、HTML にはさまざまな繊細さと原則があるにもかかわらず、このタグには終了タグがないということです。どこでも使えます htmlコード、タグの間そして.

タグの属性

- 幅– 線の長さを決定します。パーセンテージまたはピクセル単位で指定できます。

- サイズ– 線の太さ。ピクセル単位で指定します。

- 色– 線の色を定義します。

- 整列する– 行の配置を担当する属性。次に、チームは彼と関係があります。

作成中 HTMLページデザインは重要な役割を果たします。特に私たちが話しているときはさまざまなシンボル装飾的なデザイン：これらの小さなことは、ページの「言語」をよりアクセスしやすく、明確にするのに役立ち、またページの認識や認識を大きく変えるのに役立ちます。外観一般的に。の一つ必須の要素デザインの場合は水平線です。次に、その操作方法と HTML で水平線を作成する方法を詳しく学びます。

水平線とは何ですか?何のためにあるのですか?

HTML の水平線は、さまざまな機能を実行するページデザイン要素です。

装飾的な。ページに魅力を加えるのに役立ちます。
分割する。異なる意味の情報を効果的に分離することを促進します。
ハイライトまたは強調。ページのゲストの注意を必要かつ最も重要な情報に導きます。

最も重視されるのは水平線ですアクセス可能な方法でさまざまな機能を実装します。作成は非常に簡単で、外から見ると非常に有利に見えます。 HTML コードを簡単に変更するだけで、以下を調整できます。

長さ;
幅;
色の特徴。
一方の端または他方の端に沿って位置を合わせます。

水平線が次のことを指していることに注意してください。ブロック要素。これは、ページ上で新しい行を占め、それに続くテキストがその下に配置されることを意味します。

HTMLで水平線を作成する

単純なタグ (三角括弧内の hr) を使用して行を設定できます。これは「水平ルール」の略であり、古典的なルールを定義します。外部パラメータ。終了タグを必要とせず、独立して存在できるという点で、他の多くのメソッドとは異なります。変化外部特性要素は次を使用して使用できます追加の意味タグ内:

長さ。線の長さをページ全体に広げたくない場合は、希望のサイズをピクセルまたはパーセンテージで設定できます。これは、タグ内の追加の単語「width」と、引用符で囲まれた「=」記号の後に示される数値の長さを使用して行われます。

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

位置合わせ。左右端揃え、中央揃えも可能です。この特性ページ全体にまたがる行は位置合わせできないため、すでに width パラメータを指定している場合にのみ機能します。アライメントのために設定したのは、追加属性「align」タグに「align」タグを入力し、方向を追加します。center - 中央、left - 左、right - 右揃えです。

この場合、完成したタグは次のようになります。たとえば、長さ 150 ピクセルの水平線の中央揃えを設定する必要がある場合、完成したタグは次のようになります: hr align=”center” width=”150″。

属性が幅メトリックに依存しているにもかかわらず、配置メトリックである「align」が 1 位に配置されることに注意してください。

幅。幅を指定して、太字または細い下線を作成することもできます。この基準は何にも依存せず、長さや配置を指定せずにスタンドアロンとして使用できます。そのために、タグの size 属性と、ピクセル単位の希望の幅に等しい数値を使用します。数値は、size 属性と「=」記号の後に引用符で囲まれて示されます。

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

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

したがって、標準行のタグは次のとおりです。白 hr color=”#FFFFFF” または hr color=”white” の 2 つの方法で記述できます。

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

しまってください 影。シャドウを含まない要素が必要な場合は、タグで noshade 属性を使用する必要があります。単独で使用することも、他の要素と組み合わせて使用することもできます。これを使用する標準行のタグは次のようになります: hr noshade

動画を使って水平線を作成する

より視覚的な形式で情報を受け取りたい場合は、水平線を使用した作業の可能性について詳しく説明している次のビデオを参照してください。

必要な水平線の寸法を決定したら、情報が構造化され、視覚的に適切になるように Web サイトのページをデザインできます。これにより、訪問者は表示される情報をより簡単に認識できるようになり、あなたのサイトが他のサイトより目立つようになります。

基本的に、水平線は Web サイトの HTML ページを装飾し、より多くの効果を与えるために使用されます。魅力的な外観。しかし、隣接するセクションの情報を視覚的に区別することもできるため、読者が情報を学ぶときに便利になります。基本的には、必要な場所に水平線を引くだけです。

水平線を引くにはどうすればよいですか?

HTMLに水平線を描くための特別なタグがあります

。そして彼は ブロックタグつまり、それ自体の前後に改行が作成されるため、行は常に次のようになります。別行。したがって、ブロック要素を含む可能性のあるタグ内でのみ指定できます。たとえば、または

。しかし、私はここにいます
単に終了タグがない、つまり空であるため、コンテンツを含めることはできません。

HTMLでの水平線の描画例
水平線の描画

段落。

段落。

段落。

ブラウザでの結果

段落。

段落。

段落。

ご覧のとおり、線は非常に細く魅力的ではなく、利用可能な幅いっぱいに描画されていることがわかります。そこで、線をより魅力的に見せるために線を変更する方法を学びます。

横線の色、太さ、幅を変更するにはどうすればよいですか?

古いバージョンの HTML では、タグ
水平線の色、太さ、幅を変更できる特別な属性がありました。これらはそれぞれ color 、 size 、 width です。しかし、新しいバージョンでは、カスケードスタイルシート (CSS) が使用されるようになったため、ご想像のとおり、お気に入りのスタイル属性を再び使用することになります。一般的な構文そのような：

スタイル="背景:色" >- 線の色 (またはその背景)。

スタイル="高さ:サイズ" >- 線の太さ。

スタイル="幅:サイズ" >- 線幅。

スタイル= "背景:色; 高さ:サイズ; 幅:サイズ"> - または、すべてのパラメーターを一度に指定することもできますが、セミコロン (;) を忘れないようにしてください。

色は、英語の名前、またはハッシュ (#) を前に付けた色の 16 進コードで指定できます。まあ、これについてはレッスンですでに知っています テキストと背景の色を変更する.

ただし、サイズ変更については後ほど詳しく説明します。あなたが覚えているように、 フォント変更のレッスン、CSSには約10の測定単位がありますが、線幅ピクセル (px) とパーセンテージ (%) でのみ指定できます。厚さ通常はピクセル単位のみです。他の測定単位を入力してもエラーにはなりませんが、ブラウザはそれらを無視します。

寸法をピクセル単位で指定する場合、線の太さと幅は、サイトを表示するモニターの解像度によって異なります (画面解像度が高いほど、線は細くなり、幅が狭くなります)。

すでに述べたように、パーセントで指定できるのは線の幅のみです。パーセンテージのサイズは常に依存し、タグが配置されている親コンテナ要素のサイズに基づいて計算されます。
。この場合、親の寸法は 100% とみなされます。たとえば、タグを配置すると、
スタイル="幅:50%" >要素内
そうすると、ブラウザウィンドウのサイズやモニターの解像度をどのように変更しても、線の幅は常にブロックの幅の半分になります。
.

横線の色、太さ、幅を変更する例です。
横線の色、太さ、幅を変更します。

ブラウザでの結果

横線の位置を変更する

水平線の幅を変更すると、ブラウザが水平線を常に中央に配置することがはっきりとわかります。位置を変更したい場合は、内側を使用してください。
属性を次の値に合わせます。

中心- 線は中央に揃えられます (デフォルト値)。

左- 左端を押します。

右- 右端まで押します。

水平線の配置の例。
横線の位置を変更します。

ブラウザでの結果

線の周囲の枠を削除するにはどうすればよいですか?

このレッスンの最初の例を見てください。この線は何色だと思いますか? しかし、それは真実ではありません。指定された要素を持たない他のページ要素と同様に、それらは透明です。背景色！信じられない？次に、線の色を変更した例を見てください。一番最初は色を設定せずにサイズだけ大きくしたのですが、この線は透明ではないでしょうか？となることによって！

それでは説明します。デフォルトでは、ブラウザは線の周囲にフレームを描画し、3 次元効果を生み出します。したがって、水平線の太さを増やさない場合、線自体の太さは 0px であるため、ブラウザにはこれらのフレームのみが表示されます。

見た目を損なうことが多い線の周囲の境界線を削除するには、style 属性を再度適用します。そして、次のように書かれています。

宿題。

記事、セクション、サブセクションの見出しを作成します。それらをすべて中央に配置します。

ページ全体のフォントを Arial に設定し、見出しのフォントを Courier に設定します。

ページ全体のフォントサイズをブラウザのデフォルトサイズの 85% にします。また、見出しのフォントサイズは、ページ上のフォントサイズのそれぞれ 145%、125%、110% になります。

最初の見出しの下に段落を書き、2 番目の見出しの下に長い引用文を、3 番目の見出しの下に詩を書きます。そして詩をページの中央に配置します。

ハイライト大胆に引用文内の 3 つの単語。

記事のタイトルの下に、ページの幅全体に 3 ピクセルの太さの赤い水平線を引きます。

詩の上下に1ピクセルの黒い線を描きます。上の線の幅を詩の幅とほぼ同じにし、下の線の幅をその半分にします。

行から不要なフレームを削除します。

タスク

ページに水平線を引きます。

解決

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

タグの使用
水平線を描くことができます。その外観は使用される属性とブラウザによって異なります。タグはブロック要素であるため、行は常に次で始まります。改行、その後、すべての要素が表示されます次の行。たくさんのタグ属性のおかげで
このタグを通じて作成されたラインは管理が簡単です。スタイルの力も活用すると、ドキュメントに線を追加するのが簡単になります。

デフォルトライン
表示されるグレーそしてボリューム効果も。このタイプの線はサイトのデザインに必ずしも適合するとは限らないため、スタイルを通じて線の色やその他のパラメータを変更したいという開発者の要望は理解できます。ただし、ブラウザーではこの問題に対してさまざまなアプローチが採用されているため、一度に複数のスタイルプロパティを使用する必要があります。特に古いバージョンのブラウザでは、インターネットエクスプローラ線の色には color プロパティを使用し、他のブラウザでは background-color を使用します。しかし、それだけではありません。線の太さ (高さプロパティ) をゼロ以外に指定し、border プロパティを none に設定して線の周囲のフレームを削除する必要があります。 hr セレクターのすべてのプロパティをまとめると、次のような普遍的なソリューションが得られます。人気のあるブラウザ(例1)。

例 1: 水平線

HTML5 CSS 2.1 IE Cr Op Sa Fx
横線の色

テキスト文字列

結果この例図に示されています。 1.

米。 1. 色付きの水平線