レイアウトサイズを変更するために左右にドラッグする純粋なCSS

レイアウトサイズを変更するために左右にドラッグする純粋なCSS

ブラウザの非overflow:auto要素resize伸縮機能を利用して、JavaScript を使用しない列幅制御を実現します。

Webkit ブラウザのスクロールバーはカスタマイズ可能で、サイズ変更領域のサイズはスクロールバーのサイズになります。そのため、ストレッチ領域全体をコンテナと同じ高さにすることができます。

実施原則

CSS にはresize属性があります。要素のoverflow属性値がvisibleでない場合は、 resize属性を設定することで要素のサイズを拡大することができます。

ただし、この伸縮には問題があります。つまり、ドラッグ領域が小さすぎて、右下隅に少しだけあるということです。

このドラッグエリアを大きくする方法はありますか?

その後、調査した結果、サイズ変更属性のドラッグ バーとスクロール バーのドラッグ バーは同じシステム内のものであることがわかりました。サイズ変更バーのサイズを間接的に設定するには、スクロール バーをカスタマイズするだけで済みます。

例えば:

.resize-bar::-webkit-scrollbar {
 幅: 200px; 高さ: 200px;
}


この時点で、ストレッチ領域は非常に大きくなります。

次に行うことは、このドラッグ領域を列レイアウトの背後に隠し、次に示すように、ドラッグ用に幅の一部を公開することです。

最後に、左列と右列に適応レイアウトを使用することで、目的の効果を実現できます。

こちらをクリックしてください: 列幅の伸縮を実現する純粋な CSS のデモ

コードは次のとおりです。

。カラム {
    オーバーフロー: 非表示;
}
.列左 {
    高さ: 400px;
    背景色: #fff;
    位置: 相対的;
    フロート: 左;
}
.列右 {
    高さ: 400px;
    パディング: 16px;
    背景色: #eee;
    ボックスのサイズ: 境界線ボックス;
    オーバーフロー: 非表示;
}
.サイズ変更保存{
    位置: 絶対;
    上: 0; 右: 5px; 下: 0; 左: 0;
    パディング: 16px;
    オーバーフロー-x:非表示;
}
.サイズ変更バー{
    幅: 200px; 高さ: 継承;
    サイズ変更: 水平;
    カーソル:ew-resize; 
    不透明度: 0;
    オーバーフロー: スクロール;
}
/* 線をドラッグ */
.resize-line {
    位置: 絶対;
    右: 0; 上: 0; 下: 0;
    右境界線: 2px 実線 #eee;
    左境界線: 1px 実線 #bbb;
    ポインタイベント: なし;
}
.resize-bar:hover ~ .resize-line,
.resize-bar:active ~ .resize-line {
    border-left: 1px 破線の空色;
}
.resize-bar::-webkit-scrollbar {
    幅: 200px; 高さ: 継承;
}

/*Firefox では下の小さな領域のみを拡大できます*/
@supports (-moz-user-select: none) {
    .resize-bar:hover ~ .resize-line,
    .resize-bar:active ~ .resize-line {
        左境界線: 1px 実線 #bbb;
    }
    .resize-bar:hover ~ .resize-line::after,
    .resize-bar:active ~ .resize-line::after {
        コンテンツ: '';
        位置: 絶対;
        幅: 16px; 高さ: 16px;
        下: 0; 右: -8px;
        背景: url(./resize.svg);
        背景サイズ: 100% 100%;
    }
}
<div class="column">
    <div class="column-left">
        <div class="resize-bar"></div>
        <div class="resize-line"></div>
        <div class="resize-save">
            左側のコンテンツ、左側のコンテンツ、左側のコンテンツ、左側のコンテンツ</div>                                            
    </div>
    <div class="column-right">
        右側のコンテンツ、右側のコンテンツ、右側のコンテンツ、右側のコンテンツ</div>
</div>

ブラウザの非overflow:auto要素resize伸縮機能を利用して、JavaScript を使用しない列幅制御を実現します。

Webkit ブラウザのスクロールバーはカスタマイズ可能で、サイズ変更領域のサイズはスクロールバーのサイズになります。そのため、ストレッチ領域全体をコンテナと同じ高さにすることができます。

純粋な CSS で左右にドラッグしてレイアウトサイズを変更する方法についての記事はこれで終わりです。CSS で左右にドラッグしてレイアウトサイズを変更する方法についての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQL 権限とデータベース設計のケーススタディ

>>:  JavaScript のプロトタイプとプロトタイプチェーンの詳細な説明

推薦する

誤って削除されたデータを復元するための mysqlbinlog コマンドを使用した mysql の実装

実験環境: MYSQL 5.7.22バイナリログを有効にするログ形式 MIXED実験プロセス: 1....

1 つの記事で JSON (JavaScript Object Notation) を理解する

目次JSONが登場JSON構造JSONオブジェクトJson オブジェクトと JavaScript オ...

Node.js+expressメッセージボード機能実装例

目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...

Centos 7 64 ビット デスクトップ バージョンのインストール グラフィック チュートリアル

システムが遅いと感じてソースを変更したい場合は、別の記事で整理しました https://blog.c...

標準のMySQL (x64) Windowsバージョンのインストール手順の詳細な説明

MySQL x64 はインストーラーを提供していません、インストーラーを提供していません、インストー...

JSデータ型検出のさまざまな方法の概要

目次背景データ型を決定する方法は何ですか? 1. typeof を使用して基本データ型を決定します。...

ウェブページが自動的にデュアルコアブラウザの高速モードを呼び出すようにします(Webkit)

コードサンプルヘッドタグにコード行を追加します: XML/HTML コードコンテンツをクリップボード...

MySQL の lru リンク リストの簡単な分析

1. 従来のLRUリンクリストについて簡単に説明するLRU:最も最近使われなかったものLRU リンク...

大量のデータをMySQLにインポートする際に発生する問題と解決策の分析

プロジェクトでは、SQL を使用してデータ分析を実行するために、大量のデータをデータベースにインポー...

Linux環境にJDKとTomcatをインストールする詳細な手順

目次1. JDKをインストールする手動インストール2. トムキャット1. JDKをインストールする注...

MySQL シリーズ 10 同時実行制御を実装するための MySQL トランザクション分離

目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...

VmWareでcentos7をインストールするときにインターネットにアクセスできない問題の解決策

Centos7 のインストール時に VmWare がインターネットにアクセスできない場合はどうすれば...

Linux でファイルを削除するときに「操作は許可されていません」というプロンプトが表示される場合の対処方法

同僚からよく聞かれるのですが、ファイル/ディレクトリを削除すると「操作は許可されていません」というエ...

ローカル Docker に Postgres 12 + pgadmin をインストールする方法 (Apple M1 をサポート)

目次導入Intel CPUをサポートApple M1のサポートテスト導入このプロジェクトでは最近、P...

Nest.js パラメータ検証とカスタム戻りデータ形式の詳細な説明

0x0 パラメータ検証Nest.jsでは、パラメータ検証業務のほとんどをパイプライン方式で実装してい...