境界線は、コンテンツを区別して強調表示するためにHTMLページで使用されます。ページにたくさんの情報があり、特定の部分にユーザーの注意を引きたい場合は、そのコンテンツの周囲に境界線を使用します。 CSSの境界線に関するこの記事では、次のトピックについて説明します。
Bordersを使用する場合
標準的な方法は、CSSボーダータグを使用して、次のHTMLページのボーダーを定義することです。
- 重要な見出しの周り
- 追記や重要なメモを強調するには
- 写真、イラスト、人々からの引用、ビデオを同封する
- 価格設定、タイムライン、またはそのような重要な情報に注意を引くため
あなたはで読みたいかもしれません CSSの境界について学ぶ前に。
包括的なCSSチュートリアルについては、次のWebサイトをご覧ください。 初心者のためのEdurekaCSSチュートリアル 。 CSSを使用してHTMLWebデザインを拡張する方法についての優れた注意事項が得られます。
CSSの境界線
CSSボーダーは、見出しまたは段落を囲むかどうかに関係なく、HTMLページのさまざまなセクションに割り当てることができます。例から始めましょう。ここでは、見出しの周りの境界線と段落テキストの周りの別の境界線を定義します。
body {background-color：lightblue} h1 {text-align：center border-style：solid} p {font-family：verdana font-size：20px border-style：dotted}段落の周りにも境界線があります！
CSSボーダーの属性
CSSボーダーには3つの主要な属性があります
Javaでstringbufferを使用する方法
- スタイル：ザ・スタイル属性は境界線のパターンを定義します。
- 色： 色は、CSSカラーで定義されたセットのいずれかです。
- 幅： 幅は、境界線の太さを変化させて、より目立たせるために使用されます。
上記の例では、1つのborder属性、つまりそのスタイルのみが定義されていることがわかりました。定義されていない場合、他の属性はデフォルト値を取ります。半径と呼ばれる別の属性がありますが、これはあまり使用されません。境界線のエッジを丸くするために使用されます。
- ボーダースタイル 属性
| スタイル | 説明 |
| ボーダースタイル：ソリッド | |
| ボーダースタイル：ダブル | |
| ボーダースタイル：グルーブ | |
| ボーダースタイル：尾根 | |
| ボーダースタイル：はめ込み | |
| ボーダースタイル：最初 | |
| ボーダースタイル：なし | |
| ボーダースタイル：非表示 | |
| ボーダースタイル：点線 | |
| ボーダースタイル：破線 |
「境界線なし」と「非表示の境界線」のオプションもあることに気付くでしょう。開発者は境界線の定義を簡単に回避できますが、なぜそれを「隠し境界線」として明示的に定義するのでしょうか。これは、スペースの使用とページ内の他の要素との位置合わせの目的で行われます。
境界線のスタイルを要素内で混在させることもできます。この目的のために、4つの個別の境界線の側面を異なるスタイルで個別に定義できます。これは2つの方法で行うことができます。 1つのタグで4つの側面すべてを定義します。この場合、カウントは一番上の行から始まり、時計回りに移動します。または、4つの境界線のそれぞれを個別のタグで定義することもできます。両方のケースを次の例に示します。
| スタイル | 説明 |
| ボーダースタイル：点線の破線の実線の二重 ボーダートップスタイル：点線 border-right-style：破線 ボーダーボトムスタイル：ソリッド border-left-style：double |
- ボーダの色 属性
境界線の色属性は、複数の方法で設定できます。これは、他の要素の色を設定するのと似ています。色は、次のいずれかの方法で設定できます。
- 名前 –「青」などの色名を指定します。 「BlanchedAlmond」のような派手な色のオプションを試すこともできます！
- 16進数 –「＃ff0000」のような16進値を指定します
- RGB –RGBコードを設定します。たとえば、rgb（255,255,0）は黄色を意味します。
- 設定 –「透明」や「不透明」など
- ボーダー幅 属性：
widthプロパティは、その名前が示すように、4つの境界辺の厚さを定義します。 1つの値が定義されている場合、それはすべての辺に適用されます。それ以外の場合は、個々の幅の値を設定することもできます。
Javaでスキャナーを使用する方法
幅は、ピクセル（ ‘px’）、ポイント（ ‘pt’）、センチメートル（ ‘cm’）などの標準単位で指定できます。事前定義された「thick」、「thin」、「medium」の値を使用して幅を指定することもできます。
| スタイル | 説明 |
| ボーダー幅：10px | |
| ボーダー幅：0.1cm | |
| ボーダー幅：中 |
- ボーダー半径 属性
半径を定義する目的は、境界線の角を丸くすることです。半径係数は、丸みの程度を定義します。値が大きいほど、角が曲がります。標準的な方法として、半径の値は境界線の幅の1〜3倍の間に保たれます。
次のコードが生成されます。
ボーダー幅：10px
ボーダー半径：30px
境界属性のデフォルト値
唯一の必須属性は スタイル 。スタイルが欠落している場合、境界線は表示されません。
色が指定されていない場合、基になる要素の色がデフォルト値として使用されます。たとえば、段落のテキストの色が「青」として定義されている場合、デフォルトの境界線の色も青になります。要素に対しても色の定義がない場合、デフォルトの色は「黒」です。
幅のデフォルト値は「中」です。
速記で境界線を定義する
一部の開発者は、簡潔な1行のタグで境界属性を定義することを好みます。この省略形はコード行を最小限に抑えるのに役立ち、専門家の開発者はこの形式を好みます。境界線の定義が単純でかなり標準化されている場合は、省略形を使用することをお勧めします。ただし、境界線の両側を異なるスタイルで強調表示する必要がある場合は、個々のタグを定義する形式に固執する必要があります。
次のコードが使用されます。
ボーダースタイル：破線
ボーダーカラー：グリーン
ボーダー幅：5px
ボーダー：破線の緑5px
それだけの価値のあるpmi-acp
CSSで境界線を設計する際の注意点
ページにあまり多くの境界線を使用しないでください。気が散り、ユーザーが焦点を合わせるのが難しくなる可能性があります。
境界線のスタイルと色の一貫性を維持することが重要です。ページ内の同じ階層レベルの要素は、均一にするために同様の境界線スタイルと幅を持っている必要があります。たとえば、 段落 実線の境界線と5pxの幅で定義され、他の全体でこの形式を維持します 段落 ウェブサイトのデザイン中の要素。
タグ定義の1つのスタイルに固執します。一部の開発者は、すべての値が1つに割り当てられたショートカット定義に慣れています。 境界 鬼ごっこ。幅、色、スタイルのすべてのタグを明示的にリストすることを好む人もいます。慣例では、ページに手の込んだ境界線の装飾が必要な場合、個々のタグは個別にリストされます。これは、このようなカスタマイズされた境界線定義のデバッグ時に役立ちます。通常の場合、ショートカット定義だけで十分です。
あなたが探していた情報をCSSの境界線で見つけたことを願っています、そしてwこれで、CSSのこのBordersの記事は終わりです。
私たちをチェックしてください インストラクター主導のライブトレーニングと実際のプロジェクト経験が付属しています。このトレーニングにより、バックエンドおよびフロントエンドのWebテクノロジーを操作するスキルを習得できます。これには、Web開発、jQuery、Angular、NodeJS、ExpressJS、およびMongoDBに関するトレーニングが含まれます。
質問がありますか？ 「CSSの境界線」ブログのコメントセクションでそれについて言及してください。折り返しご連絡いたします。