

表題にもある通り、可変なサイドバーを開いたり閉じたりした時のコンテンツの幅を可変にしているのはどうやって実現しているのでしょうか？  
以下のサイトで例えるとサイドバーが開いた際にコンテンツの幅が小さくなり、閉じた場合はコンテンツの幅が大きくなっています。  
何か、CSSのプロパティで幅を可変にできるものがあるのでしょうか？

[![画像の説明をここに入力](https://i.stack.imgur.com/iKFDk.png)](https://i.stack.imgur.com/iKFDk.png)

[![画像の説明をここに入力](https://i.stack.imgur.com/aY3vx.png)](https://i.stack.imgur.com/aY3vx.png)


CC BY-SA 4.0
2021-10-16T17:53:21.487
83132
2021-10-17T08:35:21.217
48673
question
html css
可変なサイドバーを開いたり閉じたりした時のコンテンツの幅


基本的には javascript を使って  
サイドバーを開くボタンクリックしたときのイベントハンドラーを設置して  
その中でサイドバー領域のCSSを変化させることで実現するのが一般的です

javascript のコード例を示してもいいのですが  
知識がないと読めないと思うし  
javascript で DOM(HTML要素) の変更方法さえ理解してしまえば  
説明するまでもないかんたんなプログラムで実現できるので  
まずはどこかの入門ブログとかで javascript を覚えてから  
あらためて javascript タグで質問し直すのがいいと思います

* * *

一応 HTML CSS だけでも  
hidden checkbox と兄弟要素セレクタを使って  
見た目をスイッチする方法がなくはないんですが  
HTML構造の変更に弱いのでおすすめしないです

サンプルはこんな感じで checkbox をONOFFすることで  
その兄弟要素の見た目をかえことができます

[code]

    #sidebar {
      position: absolute;
      top: 0;
      left: 0;
      width: 30px;
      height: 100vh;
      background-color: #eef;
      transition: all 0.5s 0s ease;
    }
    
    #contents {
      margin-left: 30px;
    }
    
    #sidebar-open:checked + #sidebar{
      width: 30vw;
    }
    
    #sidebar-open:checked ~ #contents {
      margin-left: 30vw;
    }
[/code]

[code]

    <input type="checkbox" name="sidebar-open" id="sidebar-open">
    
    <div id="sidebar">
      <label for="sidebar-open"><></label>
    </div>
    <div id="contents">
    x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x 
    
    </div>
[/code]


CC BY-SA 4.0
2021-10-17T07:04:24.287
83143
2021-10-17T08:35:21.217
2021-10-17T08:35:21.217
83132
answer