LoginSignup
0
2
@bem130(Bem 130)

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

Posted at

内容

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

使い方

それぞれ以下のコードを追加するだけです
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>
0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
2