htmlで出し入れできるサイドバーの実装

前提・実現したいこと

下のdjangogirlsというサイトにあるようにボタンを押すと出し入れできるようなサイドバーを実装したいのですがやり方がわかりません。
https://tutorial.djangogirls.org/ja/deploy/

該当のソースコード

html
1<html>
2    <head>
3    </head>
4    	<body>
5    		<div class="left">サイドバー</div>
6    		<div class="main">メインコンテンツ</div>
7	    </body>
8</html>
9

試したこと

サイドバーの部分にcssで
float:left;を指定しても中途半端な長さのブロックができるだけで、djangogirlsのように一番下まで伸びません。

よろしくお願いします。

m.ts10806

2020/04/13 05:55

お手本があるのでしたらソース解析すれば良いと思うのですが、それはしてはいけない制限でもあるのでしょうか。

aya923649

2020/04/13 07:27 編集

djangogirlsの検証を見てみたのですが、よくわかりませんでした... サイドバーとメインコンテンツが両方入っている divのclass　が　 book font-size-2 font-family-1 からサイドバーを出すボタンを押すと book font-size-2 font-family-1 with-summary と変化したことくらいしか読み取れず、その理由も仕組みもさっぱりでした

m.ts10806

2020/04/13 11:41

ひとまず、HTMLだけでは無理です。 css、JavaScriptもきちんと理解して使いこなせる必要があります。なので、htmlの変化だけ追っても近づけません。となると「質問と回答」の範疇を越える、「授業」または「作業依頼」のレベルになるので、まずは自身でもっと深く「コード自体」を追っていくか、想像つくようになるくらいまで個々の言語の基礎を学習していくのを強くすすめます。

m.ts10806

2020/04/13 11:42

もしくは、似たような動きをするプラグインを探してくるか、ですね。