CSS の border 属性と display 属性の使い方の簡単な分析

境界プロパティの概要 `border`プロパティは要素の境界を設定します。境界線の`3`要素は、太さ、線の種類、色です。境界線種別属性値の説明表は以下のとおりです。

境界プロパティの概要

borderプロパティは要素の境界を設定します。
境界線の3要素は、太さ、線の種類、色です。

境界線種別属性値の説明表は以下のとおりです。

属性	説明する
なし	境界を定義しません。
隠れた	「なし」と同じです。例外はテーブルに適用される場合で、その場合は境界の競合を解決するために hidden が使用されます。
点在	点線の境界線を定義します。ほとんどのブラウザでは実線として表示されます。
破線	破線を定義します。ほとんどのブラウザでは実線として表示されます。
固体	実線を定義します。
ダブル	二重線を定義します。二重線の幅は border-width の値と同じになります。
溝	3D 溝の境界を定義します。効果は border-color の値によって異なります。
リッジ	3D 尾根の境界を定義します。効果は border-color の値によって異なります。
インセット	3D インセット境界を定義します。効果は border-color の値によって異なります。
最初	3D アウトセット境界ボックスを定義します。効果は border-color の値によって異なります。
継承する	境界線のスタイルを親要素から継承することを指定します。

境界方向属性値の説明表は次のとおりです。

財産	説明する
ボーダートップ	要素の上部の境界線を設定します。
ボーダー下	要素の下の境界線を設定します。
左ボーダー	要素の左の境界線を設定します。
境界線右	要素の右境界線を設定します。

国境の実践

練習コード:

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>境界線</title>
  <スタイル>
    
     。箱{
        幅: 200ピクセル;
        高さ: 100px;
        境界線: 1px 実線の赤;
     }
  </スタイル>
</head>

<本文>
   <div class="box">
     笑顔は第一の信念です</div>
</本文>

</html>

結果プロット

注: 境界線の色は省略可能で、デフォルトでは黒です。他の 2 つのプロパティが記述されていない場合は、境界線は表示されません。

要素の境界方向の練習を設定する

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>境界線</title>
  <スタイル>
    
     。箱{
        幅: 200ピクセル;
        高さ: 100px;
        border-top: 2px 二重赤;
        border-bottom: 2px ridge lawngreen;
        border-left: 2px インセット darkorange;
        border-right:2px 溝 濃い青;
     }
  </スタイル>
</head>

<本文>
   <div class="box">
     笑顔は第一の信念です</div>
</本文>

</html>

結果プロット

表示プロパティの概要

display属性は表示を意味します。display displayは、インライン要素をブロックレベル要素に変換したり、その逆を行ったり、非表示の要素を表示状態に設定したり、表示された要素を非表示状態に設定したりできます。

次の表は、 display属性の値について説明します。

プロパティ値	説明する
列をなして	ブロックレベル要素をインライン要素に変換します。
ブロック	機能: 1. インライン要素をブロックレベル要素に変換します。 2. 非表示の要素を表示状態に設定します。
なし	表示されている要素を非表示の状態に設定します。

ディスプレイプロパティの実践

spanタグの幅と高さを設定し、背景色を設定するには、 display属性に値をblockに設定して使用します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>span タグをブロックレベル要素に変換する</title>
  <スタイル>
     。箱{
        幅: 200ピクセル;
        高さ: 100px;
        表示: ブロック;
        背景色: 赤;
     }
  </スタイル>
</head>

<本文>
   <span class="box">笑顔は第一の信念です</span>
</本文>

</html>

結果プロット

注: インライン要素がdisplay: block;を使用する場合、その要素はブロックレベル要素の特性を持ちます。

h1タグをインライン要素に変換するには、値inline持つdisplay属性を使用します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>h1 タグをインライン要素に変換する</title>
  <スタイル>
     。箱{
        幅: 200ピクセル;
        高さ: 100px;
        表示: インライン;
        背景色: 赤;
     }
  </スタイル>
</head>

<本文>
   <h1 class="box">笑顔は第一の信念です</h1>
</本文>

</html>

結果プロット

注: ブロックレベル要素がdisplay: inline;を使用する場合、その要素はインライン要素の特性を持ちます。

要約する

上記は、CSS で border 属性と display 属性を使用する方法についてご紹介しました。お役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: VueでEchartsチャートの幅と高さの適応を実現する実践

>>: HTMLを教える記事