HTMLでリサイズを簡単につける

Posted at 2024-02-04

内容

リサイズする要素を複数作るときに、簡単に追加できるようにしました
入れ子にも対応しています

使い方

それぞれ以下のコードを追加するだけです
top,bottom,left,rightがコンテンツになります

全体での記述例は記事の最後に置いておきます

横

<div class="resizer_Vcontainer" style="height: 100%;">
    <div class="resizer_top">top</div>
    <div class="resizer_splitter"></div>
    <div class="resizer_bottom">bottom</div>
</div>

縦

<div class="resizer_Hcontainer" style="height: 100%;">
    <div class="resizer_left">left</div>
    <div class="resizer_splitter"></div>
    <div class="resizer_right">right</div>
</div>

ソースコード

重要なところだけ抜き出しています
全体での記述例は記事の最後に置いておきます

.resizer_Vcontainer {
    display: flex;
    flex-direction: column;
    & .resizer_top, & .resizer_bottom {
        min-height: 0px;
        height: 100%;
        overflow: hidden;
        padding: 10px;
    }
    & .resizer_splitter {
        height: 5px;
        margin: 2px;
        width: calc(100% - 4px);
        border-radius: 3px;
        flex: none;
        cursor: row-resize;
        background-color: #adadad;
    }
}
.resizer_Hcontainer {
    display: flex;
    flex-direction: row;
    & .resizer_left, & .resizer_right {
        min-width: 0px;
        width: 100%;
        overflow: hidden;
        padding: 10px;
    }
    & .resizer_splitter {
        width: 5px;
        margin: 2px;
        height: calc(100% - 4px);
        border-radius: 3px;
        flex: none;
        cursor: col-resize;
        background-color: #adadad;
    }
}

window.onload = ()=>{
    document.querySelectorAll(".resizer_Vcontainer").forEach((x)=>{resizer_Vcontainer_addEL(x,0,0,10);})
    document.querySelectorAll(".resizer_Hcontainer").forEach((x)=>{resizer_Hcontainer_addEL(x,0,0,10);})
}
function resizer_Vcontainer_addEL (container,frame1Min,frame2Min,resizerW) {
    console.log(container)
    console.log(container.querySelector(":scope > .resizer_top"))
    console.log(container.querySelector(":scope > .resizer_bottom"))
    container.querySelector(":scope > .resizer_splitter").addEventListener("mousedown",(e)=>{
        let resize = (e)=>{
            let containerRect = container.getBoundingClientRect();
            let y = ((n,min,max)=>{if (n<min) {n=min}else if (n>max) {n=max};return n;})(e.y-containerRect.y,frame1Min,containerRect.height-resizerW-frame2Min);
            console.log(y)
            container.querySelector(":scope > .resizer_top").style.flexBasis = `${y}%`;
            container.querySelector(":scope > .resizer_bottom").style.flexBasis = `${containerRect.height-resizerW-y}%`;
        }
        document.addEventListener("mousemove",resize,false);
        document.addEventListener("mouseup",()=>{document.removeEventListener("mousemove",resize,false);},false);
    });
}
function resizer_Hcontainer_addEL (container,frame1Min,frame2Min,resizerW) {
    container.querySelector(":scope > .resizer_splitter").addEventListener("mousedown",(e)=>{
        let resize = (e)=>{
            let containerRect = container.getBoundingClientRect();
            let x = ((n,min,max)=>{if (n<min) {n=min}else if (n>max) {n=max};return n;})(e.x-containerRect.x,frame1Min,containerRect.width-resizerW-frame2Min);
            console.log(x)
            container.querySelector(":scope > .resizer_left").style.flexBasis = `${x}%`;
            container.querySelector(":scope > .resizer_right").style.flexBasis = `${containerRect.width-resizerW-x}%`;
        }
        document.addEventListener("mousemove",resize,false);
        document.addEventListener("mouseup",()=>{document.removeEventListener("mousemove",resize,false);},false);
    });
}

今回のコードについて

以下の記事に掲載されているコードを参考に作りました

全体での記述例

1つのhtmlファイルに纏めてみました
コピペですぐに動くようになっています

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
    </head>
    <body style="height: 100dvh;margin: 0;">
        <div class="resizer_Vcontainer" style="height: 100%;">
            <div class="resizer_top">
                <div class="resizer_Vcontainer" style="height: 100%;">
                    <div class="resizer_top">
                        <div class="resizer_Hcontainer" style="height: 100%;">
                            <div class="resizer_left">left</div>
                            <div class="resizer_splitter"></div>
                            <div class="resizer_right">right</div>
                        </div>
                    </div>
                    <div class="resizer_splitter"></div>
                    <div class="resizer_bottom">bottom</div>
                </div>
            </div>
            <div class="resizer_splitter"></div>
            <div class="resizer_bottom">
                <div class="resizer_Hcontainer" style="height: 100%;">
                    <div class="resizer_left">left</div>
                    <div class="resizer_splitter"></div>
                    <div class="resizer_right">right</div>
                </div>
            </div>
        </div>
    </body>
</html>


<style>
.resizer_Vcontainer {
    display: flex;
    flex-direction: column;
    & .resizer_top, & .resizer_bottom {
        min-height: 0px;
        height: 100%;
        overflow: hidden;
        padding: 10px;
    }
    & .resizer_splitter {
        height: 5px;
        margin: 2px;
        width: calc(100% - 4px);
        border-radius: 3px;
        flex: none;
        cursor: row-resize;
        background-color: #adadad;
    }
}
.resizer_Hcontainer {
    display: flex;
    flex-direction: row;
    & .resizer_left, & .resizer_right {
        min-width: 0px;
        width: 100%;
        overflow: hidden;
        padding: 10px;
    }
    & .resizer_splitter {
        width: 5px;
        margin: 2px;
        height: calc(100% - 4px);
        border-radius: 3px;
        flex: none;
        cursor: col-resize;
        background-color: #adadad;
    }
}
</style>
<script>
window.onload = ()=>{
    document.querySelectorAll(".resizer_Vcontainer").forEach((x)=>{resizer_Vcontainer_addEL(x,0,0,10);})
    document.querySelectorAll(".resizer_Hcontainer").forEach((x)=>{resizer_Hcontainer_addEL(x,0,0,10);})
}
function resizer_Vcontainer_addEL (container,frame1Min,frame2Min,resizerW) {
    console.log(container)
    console.log(container.querySelector(":scope > .resizer_top"))
    console.log(container.querySelector(":scope > .resizer_bottom"))
    container.querySelector(":scope > .resizer_splitter").addEventListener("mousedown",(e)=>{
        let resize = (e)=>{
            let containerRect = container.getBoundingClientRect();
            let y = ((n,min,max)=>{if (n<min) {n=min}else if (n>max) {n=max};return n;})(e.y-containerRect.y,frame1Min,containerRect.height-resizerW-frame2Min);
            console.log(y)
            container.querySelector(":scope > .resizer_top").style.flexBasis = `${y}%`;
            container.querySelector(":scope > .resizer_bottom").style.flexBasis = `${containerRect.height-resizerW-y}%`;
        }
        document.addEventListener("mousemove",resize,false);
        document.addEventListener("mouseup",()=>{document.removeEventListener("mousemove",resize,false);},false);
    });
}
function resizer_Hcontainer_addEL (container,frame1Min,frame2Min,resizerW) {
    container.querySelector(":scope > .resizer_splitter").addEventListener("mousedown",(e)=>{
        let resize = (e)=>{
            let containerRect = container.getBoundingClientRect();
            let x = ((n,min,max)=>{if (n<min) {n=min}else if (n>max) {n=max};return n;})(e.x-containerRect.x,frame1Min,containerRect.width-resizerW-frame2Min);
            console.log(x)
            container.querySelector(":scope > .resizer_left").style.flexBasis = `${x}%`;
            container.querySelector(":scope > .resizer_right").style.flexBasis = `${containerRect.width-resizerW-x}%`;
        }
        document.addEventListener("mousemove",resize,false);
        document.addEventListener("mouseup",()=>{document.removeEventListener("mousemove",resize,false);},false);
    });
}
</script>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up