CSS で要素フローティングとクリアフローティングを実装する方法

CSS で要素フローティングとクリアフローティングを実装する方法

フローティングの基礎

  • 標準ドキュメント フローでは、要素は塊級元素と行內元素の 2 種類に分けられます。一部の要素にブロック レベル要素とインライン要素の両方の特性を持たせたい場合は、標準ドキュメント フローからこれらの要素を削除することしかできません。
  • フローティングを使用すると、要素を標準のドキュメント フローから外すことができ、複数の要素を同じ行に配置したり、幅と高さを設定したりできるようになります。
  • 実際、フローティングはfloat属性によって実現されます。
  • フロート属性値の説明表:

プロパティ値説明する
左要素を左にフロートするように設定します。
右要素を右にフロートするように設定します。

右フロート練習

  • 右フローティングの練習をしてみましょう。練習内容は次のとおりです。 class属性値.box1を持つ要素を右フロートするように設定します。
  • フローティングの実践に入る前に、まずフローティング要素の構造を見てみましょう。

コードブロック

<!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>
    <スタイル>
       。箱{
         幅: 600ピクセル;
         境界線: 1px実線 #000;
       }
    </スタイル>
</head>
  
<本文>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</本文>
</html>

結果プロット

結果の画像が境界線になっているのはなぜですか? divタグにはまだコンテンツがないため、子divタグの幅と高さを100pxピクセルに設定し、背景色を追加します。

コードブロック

<!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>
    <スタイル>
       。箱{
         幅: 600ピクセル;
         境界線: 1px実線 #000;
       }
       .box1{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #f00;
       }
       .box2{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #0f0;
       }
       .box3{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #00f;
       }
    </スタイル>
</head>
  
<本文>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</本文>
</html>

結果プロット

  • なぜ 3 行に配置されているのでしょうか? 3 つのdivタグはすべてブロック レベルの要素であるためです。
  • ここで、 class属性値.box1を持つ要素を右にフロートするように設定します。

コードブロック

<!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>
    <スタイル>
       。箱{
         幅: 600ピクセル;
         境界線: 1px実線 #000;
       }
       .box1{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #f00;
         フロート:右;
       }
       .box2{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #0f0;
       }
       .box3{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #00f;
       }
    </スタイル>
</head>
  
<本文>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</本文>
</html>

結果プロット

注: .box calssの高さが短くなったことがわかります。これは、フローティング要素が標準のドキュメント フローから分離され、スペースを占有しなくなったことを意味します。フローティング要素は右にフロートし、親要素の端にフロートするとフロートが停止します。

左フロート練習

左フローティングの練習をしてみましょう。練習内容は次のとおりです。 class属性値.box1を持つ要素を左フロートに設定します。

コードブロック

<!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>
    <スタイル>
       。箱{
         幅: 600ピクセル;
         境界線: 1px実線 #000;
       }
       .box1{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #f00;
         フロート:左;
       }
       .box2{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #0f0;
       }
       .box3{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #00f;
       }
    </スタイル>
</head>
  
<本文>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</本文>
</html>

結果プロット

  • まずフローティングの原理を理解し、次にclass属性値が.box2の要素が表示されない理由を説明します。
  • ここで、実際の結果を示す 2 枚の写真をお見せします。

結果図A

結果図B

  • これら 2 つの結果画像を通じて、浮遊を「漂流」と簡単に理解できます。例:
  • class属性値.boxが池で、 3要素がすべて池の表面に浮かぶことができるものであるとします。ここで、 calss属性値.box1を持つ要素を池の表面に浮かべ、池のスペースを占有しないようにします。
  • 「浮いている」ということは池の表面に浮かんでいる必要があることを意味しますが、池の表面内には浮いている要素がないため、 class属性値.box2を持つ要素が非表示になっているという事実は、それが存在しないことを意味するのではなく、 class属性値.box1を持つ要素によってブロックされているだけです。ここで、クラス属性値.box2をclass要素の幅を150pxピクセルに設定します。

コードブロック

<!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>
    <スタイル>
       。箱{
         幅: 600ピクセル;
         境界線: 1px実線 #000;
       }
       .box1{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #f00;
         フロート:左;
       }
       .box2{
         幅: 150ピクセル;
         高さ: 100px;
         背景色: #0f0;
       }
       .box3{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #00f;
       }
    </スタイル>
</head>
  
<本文>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</本文>
</html>

結果プロット

注: class属性値.box2を持つ要素が存在することが判明しました。

次に、 .box2要素のcalss属性値をfloat leftに設定して、どのような効果があるかを確認します。

コードブロック

<!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>
    <スタイル>
       。箱{
         幅: 600ピクセル;
         境界線: 1px実線 #000;
       }
       .box1{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #f00;
         フロート:左;
       }
       .box2{
         幅: 150ピクセル;
         高さ: 100px;
         背景色: #0f0;
         フロート: 左;
       }
       .box3{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #00f;
       }
    </スタイル>
</head>
  
<本文>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</本文>
</html>

結果プロット

  • しかし、 class属性値が.box2の要素は、親要素の左端にフロートしません。なぜ、 class属性値が.box1の背後にあるのでしょうか?親要素にはすでにフローティングの子要素があるため、後続の子要素は前のフローティング要素の後ろにフローティングします。
  • ここで、 class属性値が.box3の要素を float left に設定し、どのような効果が得られるかを確認します。

コードブロック

<!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>
    <スタイル>
       。箱{
         幅: 600ピクセル;
         境界線: 1px実線 #000;
       }
       .box1{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #f00;
         フロート:左;
       }
       .box2{
         幅: 150ピクセル;
         高さ: 100px;
         背景色: #0f0;
         フロート: 左;
       }
       .box3{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #00f;
         フロート: 左;
       }
    </スタイル>
</head>
  
<本文>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</本文>
</html>

結果プロット

注意：フローティング要素がフローティングした後、その親要素はフローティング子要素を親要素内にラップしなくなるため、結果画像に黒い境界線が表示されます。理解できない場合は、最初の実践的なコンテンツを読んでください。

インライン要素をフロートに設定する

  • インライン要素に float を設定すると、インライン要素はブロックレベル要素の特性を持つようになります。
  • インライン要素にfloatを設定する練習に入りましょう。練習内容は、 divタグ内のspanタグをfloat leftに設定します。
  • 左フロートを設定する前に、まずspanタグの幅、高さ、背景色を設定した場合の効果を見てみましょう。

コードブロック

<!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>
    <スタイル>
       。箱{
         幅: 600ピクセル;
         境界線: 1px実線 #000;
       }
       .box1{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #f00;
       }
       .box2{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #0f0;
       
       }
       .box3{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #00f;
       
       }
    </スタイル>
</head>
  
<本文>
  <div class="box">
    <span class="box1">笑顔は第一の信念 1</span>
    <span class="box2">笑顔は本来の信念 2</span>
    <span class="box3">笑顔は本来の信念3</span>
  </div>
</本文>
</html>

結果プロット

  • ここで、 spanタグがまだインライン要素であるため、 spanタグの幅と高さを100pxピクセルに設定しても効果がないことがわかります。
  • ここで、 spanタグを左にフロートするように設定するとその効果を確認します。

コードブロック

<!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>
    <スタイル>
       。箱{
         幅: 600ピクセル;
         境界線: 1px実線 #000;
       }
       .box1{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #f00;
         フロート: 左;
       }
       .box2{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #0f0;
        フロート: 左;
       }
       .box3{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #00f;
        フロート: 左;
       }
    </スタイル>
</head>
  
<本文>
  <div class="box">
    <span class="box1">笑顔は第一の信念 1</span>
    <span class="box2">笑顔は第一の信念 2</span>
    <span class="box3">笑顔は第一の信念です</span>
  </div>
</本文>
</html>

結果プロット

注: インライン要素を float に設定すると、ブロックレベル要素の特性を持つようになります。

フローティングサマリーを設定する

  • フローティング機能には以下が含まれます:
  • フロート要素は標準のドキュメント フローから削除され、親要素内のスペースを占有しなくなります。
  • フローティング要素は標準ドキュメント フロー内の要素よりも高いレベルにあり、標準ドキュメント フロー内の要素を見えにくくします。
  • フロート要素は左または右にフロートします。フロート要素は、親要素の端に遭遇するとフロートを停止します。
  • 浮動要素がすでに浮動している要素に遭遇すると、後者は前者に向かって浮動し、その後浮動を停止します。
  • フローティング要素がフローティングすると、親要素から分離され、親要素はフローティング要素をラップしなくなります。
  • インライン要素が float に設定されている場合、ブロックレベル要素の特性を持ちます。

なぜクリアフロートなのか?

  • 浮遊要素は下の要素に影響を与えるので、実際の結果図を見るとわかります。
  • class属性値が.boxであるサブクラス要素は、フローティング前と同じ効果を持ちません。

コードブロック

<!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>
    <スタイル>
       。箱{
         幅: 600ピクセル;
         境界線: 1px実線 #000;
       }
       .box1{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #f00;
        
       }
       .box2{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #0f0;
        
       }
       .box3{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #00f;
         
       }
    </スタイル>
</head>
  
<本文>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h1>クリアフロート</h1>
</本文>
</html>

結果プロット

class属性値が.boxである要素の子要素が左に浮いた状態になると、後続の要素のレイアウトに影響を及ぼします。

コードブロック

<!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>
    <スタイル>
       。箱{
         幅: 600ピクセル;
         境界線: 1px実線 #000;
       }
       .box1{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #f00;
         フロート: 左;
       }
       .box2{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #0f0;
         フロート: 左;
       }
       .box3{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #00f;
          フロート: 左;
       }
    </スタイル>
</head>
  
<本文>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h1>クリアフロート</h1>
</本文>
</html>

結果プロット

これで、フロートをクリアする必要がある理由がおわかりいただけたと思います。フロートがある場合は、それをクリアする必要があります。上の要素にフロートを設定すると、下の要素のレイアウトに影響するからです。

フロートをクリアする方法は3つあります

最初の方法

  • フローティング要素が親要素内に視覚的にラップされるように、フローティング要素の親要素に固定の高さを設定します。
  • フローティング要素の親要素に固定の高さ600px設定し、その効果を確認します。

コードブロック

<!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>
    <スタイル>
       。箱{
         幅: 600ピクセル;
         高さ: 600px;
         境界線: 1px実線 #000;
       }
       .box1{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #f00;
         フロート: 左;
       }
       .box2{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #0f0;
         フロート: 左;
       }
       .box3{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #00f;
          フロート: 左;
       }
    </スタイル>
</head>
  
<本文>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
  <h1>クリアフロート</h1>
</本文>
</html>

結果プロット

これにより、後続の要素のレイアウトの問題は解決されますが、高さは指定した固定の高さではなく、子要素の内容によってサポートされるため、これを行うことはお勧めしません。

2番目の方法

実は、 CSSにはフロートをクリアするためのプロパティもあり、フロートをクリアするためのプロパティは clear と呼ばれます。

属性値の説明テーブルをクリアする

プロパティ値説明する
左左のフローティング要素をクリアします。
右右のフロート要素をクリアします。
両方左右のフローティング要素をクリアします。

  • この clear 属性を使用するには、新しい div 要素を作成する必要があります。新しく作成されたdiv要素にコンテンツを配置することはできません。実行できることは 1 つだけで、フロートをクリアし、新しく作成されたdiv要素を最後のフロート要素の後ろに配置して有効にします。
  • ここでは、左フロートと右フロートを 1 つずつクリアする属性値を練習することはしません。通常は、 both属性値を使用します。左フロートと右フロートをクリアするのに、左フロートか右フロートかを気にする必要はありません。左フロートとokフロートをクリアするだけです。
  • 詳細は実践結果をご覧ください。

コードブロック

<!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>
    <スタイル>
       。箱{
         幅: 600ピクセル;
         境界線: 1px実線 #000;
       }
       .box1{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #f00;
         フロート: 左;
         
       }
       .box2{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #0f0;
         フロート: 左;
       }
       .box3{
         幅: 100ピクセル;
         高さ: 100px;
         背景色: #00f;
          フロート: 左;
       }
       。クリア{
         クリア: 両方;
       }
    </スタイル>
</head>
  
<本文>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="clear"></div>
  </div>
  <h1>クリアフロート</h1>
</本文>
</html>

結果プロット

注: これがまさに私たちが望んでいることであり、視覚的にはフロート要素が親要素内に包まれます。

第三の方法

  • フロートをクリアするには、値をhiddenにしたoverflow属性を使用します。この属性は、フロート要素の親要素に設定する必要があります。
  • 属性overflowと属性値hiddenを紹介します。本来はオーバーフローした内容を非表示にすることを目的としていますが、フロートをクリアすることもできます。
  • 作者はまずコンテンツをオーバーフローさせてから、オーバーフローしたコンテンツを非表示にします。一緒に見てみましょう。

コードブロック

<!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>
    <スタイル>
        div{
            幅: 100ピクセル;
            高さ: 50px;
            境界線: 1px実線 #000;
            
        }
    </スタイル>
</head>
<本文>
    <div>
        笑顔は最初の信念です。笑顔は最初の信念です。笑顔は最初の信念です。
        笑顔は最初の信念です。笑顔は最初の信念です。笑顔は最初の信念です。
        笑顔は最初の信念です。笑顔は最初の信念です。笑顔は最初の信念です。
        
    </div>
</本文>
</html>

結果プロット

次に、あふれたコンテンツを非表示にします。

コードブロック

<!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>
    <スタイル>
        div{
            幅: 100ピクセル;
            高さ: 50px;
            境界線: 1px実線 #000;
            オーバーフロー: 非表示;
        }
    </スタイル>
</head>
<本文>
    <div>
        笑顔は最初の信念です。笑顔は最初の信念です。笑顔は最初の信念です。
        笑顔は最初の信念です。笑顔は最初の信念です。笑顔は最初の信念です。
        笑顔は最初の信念です。笑顔は最初の信念です。笑顔は最初の信念です。
        
    </div>
</本文>
</html>

結果プロット

  • フロートをクリアするには、値をhiddenにしてoverflowプロパティを使用します。
  • フロートをクリアする前に、構造を見てみましょう。

コードブロック

<!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>
    <スタイル>
       ul{
           リストスタイル: なし;
          
       }
       ul li{
           フロート: 左;
           境界線: 1px 実線の赤;
       }
    </スタイル>
</head>
<本文>
    <ul>
        <li>笑顔は第一の信念 1</li>
        <li>笑顔は第一の信念 2</li>
        <li>笑顔は第一の信念 3</li>
        <li>笑顔は第一の信念 4</li>
        <li>笑顔は第一の信念 5</li>
        <li>笑顔は第一の信念 6</li>
        <li>笑顔は第一の信念 7</li>
        <li>笑顔は本来の信念 8</li>
    </ul>
</本文>
</html>

結果プロット

注: ここではフローティング要素をまだクリアしていないので、 ulタグの高さが0であることがはっきりとわかります。

フロートクリアの練習

コードブロック

<!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>
    <スタイル>
       ul{
           リストスタイル: なし;
           オーバーフロー: 非表示;
       }
       ul li{
           フロート: 左;
           境界線: 1px 実線の赤;
       }
    </スタイル>
</head>
<本文>
    <ul>
        <li>笑顔は第一の信念 1</li>
        <li>笑顔は第一の信念 2</li>
        <li>笑顔は第一の信念 3</li>
        <li>笑顔は第一の信念 4</li>
        <li>笑顔は第一の信念 5</li>
        <li>笑顔は第一の信念 6</li>
        <li>笑顔は第一の信念 7</li>
        <li>笑顔は本来の信念 8</li>
    </ul>
</本文>
</html>

結果プロット

これで、 ul liの高さが23pxピクセルであることがはっきりとわかります。なぜ、属性はoverflowで、属性値はhidden使用してフロートをクリアする必要があるのでしょうか。ul タグではulタグ要素のみを使用でき、他の要素は使用できないため、属性はoverflow 、属性値はhiddenを使用してフロートをクリアするのが最善です。

要約する

上記はエディターが紹介したフローティング要素とフロートをクリアする CSS メソッドです。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  JavaScript の数値および数学オブジェクトの概要

>>:  美しい FLASH ウェブサイト デザイン例 50 選

推薦する

PythonはデータベースMySQLの解凍バージョンのインストール構成に接続し、問題が発生しました

導入今日は Python でデータベースに接続する方法を学んだので、MySQL データベースをインス...

Linux で MySQL 5.6 X64 バージョンをインストールする詳細な手順

環境： 1. CentOS6.5 X64 2.mysql-5.6.34-linux-glibc2.5...

MySQL を暗号化および復号化するいくつかの方法 (要約)

目次前面に書かれた双方向暗号化エンコード/デコードAES_ENCRYPT/AES_DECRYPT D...

Vue ミックスインの詳しい説明

目次ローカルミックスイングローバル ミックスイン要約するローカルミックスイン <テンプレート&...

Reactでコンポーネントがどのように通信するかの詳細な説明

1. 何ですかコンポーネント間の通信は、次の 2 つの単語に分けることができます。コンポーネントコ...

CentOS6.5にpython3.7をインストールする詳細な手順

1. Python 3をダウンロードする https://www.python.org/ftp/py...

CSS スティッキー配置位置の詳細な説明: スティッキー問題の落とし穴

前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...

Mysql 8.0.18 ハッシュ結合テスト (推奨)

ハッシュ結合ハッシュ結合は実行にインデックスを必要とせず、ほとんどの場合、現在のブロックネストループ...

XHTML CSS ページをプリンタ ページに変換する

<br />これまで、Web ページのプリンタ対応バージョンを作成するには、印刷したとき...

Vue カプセル化コンポーネント ツール $attrs、$listeners の使用

目次序文$属性例： $listeners (公式説明)使用シナリオ要約する序文複数レベルのコンポーネ...

初心者向けMySQLシリーズチュートリアル

目次1. 基本概念と基本コマンド1) 基本的な概念2) 基本コマンド2. SQL文の記述順序と実行順...

CSSは左固定と右適応のレイアウト方法を実現します

1. フローティングレイアウト1. 最初に固定幅の div をフロートさせます。ドキュメントフローか...

Jenkins統合Dockerプラグインの問題を解決するいくつかの方法

目次背景質問1エラー 2エラー 3エラー4要約する背景テスト環境では、docker プラグインを統合...

MacOS Catalina アップグレード後の VMware ブラック スクリーン問題に対する完璧な解決策の詳細な説明

MacOS Catalina アップグレード後の VMware ブラック スクリーンに対する完璧なソ...

Docker コンテナにデプロイされた Django のタイムゾーンの問題

目次Django でのタイムゾーン設定USE_TZ=真USE_TZ=偽Linux コンテナでのタイム...