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 選

推薦する

MySQL ジョイントテーブル更新デー​​タの詳細な例

1.MySQL UPDATE JOIN構文MySQL では、UPDATE ステートメントでJOIN句...

クリックイメージ反転効果を実現するJavaScript

最近、顔コレクションに関するプロジェクトに取り組んでいましたが、フロントエンドモジュールを書いている...

dl、dt、dd リスト ラベルの例

dd タグと dt タグはリストに使用されます。通常は <ul><li> タ...

dockerコンテナは直接実行され、pingを介してパブリックIP操作を取得します。

コンテナを通じてローカル パブリック IP アドレスを取得します。ローカル IP アドレスを使用して...

HTML の一般的でないタグ optgroup、sub、sup、bdo のサンプルコード

Optgroup は、ドロップダウン リストのコンテンツをより整理するために、select タグで使...

MySQL mysqldump の使い方の詳しい説明

1. mysqldump の紹介mysqldump は、MySQL に付属する論理バックアップ ツー...

Vue大画面表示適応方法

この記事では、vueの大画面表示適応の具体的なコードを参考までに紹介します。具体的な内容は以下のとお...

IE、Firefox、Chromeブラウザではスペースの表示が異なります

&nbsp;&nbsp;IE、Firefox、Chrome ブラウザでの表示効果は、...

JavaScript ループトラバーサルの 24 種類のメソッドをすべてご存知ですか?

目次序文1. 配列走査法1. 各() 2. マップ() 3. 〜のために4. フィルター() 5. ...

docker tagとdocker pushの使い方の詳しい説明

Dockerタグの詳しい説明docker tag コマンドの使い方と、ローカルイメージを daocl...

ネイティブJSが様々なスポーツの均一な動きを実現

この記事では、ネイティブ JS で実装された均一なモーションを紹介します。その効果は次のとおりです。...

H5 WeChatパブリックアカウント認証を実装するための簡単な手順

序文昨日、h5 WeChat認証の実装が必要なプロジェクトがありました。したがって、この機能を完了す...

MySQL マスタースレーブ同期メカニズムと同期遅延問題追跡プロセス

序文DBA として、仕事中に MySQL マスターとスレーブの同期遅延の問題に遭遇することがよくあり...

jsはCanvasを使用して複数の画像を1つの実装コードにマージします

解決 関数 mergeImgs(リスト) { const imgDom = document.cre...

Vue の NetEase Cloud Music Player インターフェースを模倣したシンプルな実装プロセス

仕事のプロジェクトのニーズにより、曲の再生が必要となり、さまざまな資料を参考にして、NetEase ...