エクスプローラのような画面

エクスプローラのような画面をwebで作りたいと思っています。

しかし経験が少なく、どう作ったら良いのか分かりません。

javascriptを使いたいのでフレームは使いたくないです。

こういう場合、どのようなHTMLを使うのが一般的なのでしょうか？

フレームはフレームタグのことです。
エクスプローラはWindowsのエクスプローラで、左にメニュー、右に各種画面を表示させたいです。

m.ts10806

2019/02/03 10:33

仰っている「フレーム」がなにを指しているのかわかりません。「エクスプローラのような」だけだと質問者さんしかイメージがないので具体的に図示するなどしていただけますか？

m.ts10806

2019/02/03 13:20

Webでエクスプローラー…。「図示してください」というのがなぜかわかりますか？文章では何も伝わらないからです。どんな文章もひとつの絵にはかないません。または自身で組んでみたコード、調べた内容。 JavaScript使いたいならまず使ってください(私の勝手な憶測ではJavaScript絶対必須ではないですが)。経験云々ではなく、あくまで「プログラミングの過程で起きた問題、つまずいたこと」を質問するのが原則です。何も始めていないのならまず始めてください(「質問するときのヒント」を熟読してください)

行動規範の内容に同意します

回答1件

ベストアンサー

どういったものを想像されていらっしゃるか分からないのですが下記のような感じでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <title></title>
7    <style>
8      /* reset.css */
9      *{
10        border: none;
11        box-sizing: border-box;
12        color: rgb(0, 0, 0);
13        display: flex;
14        font: normal normal normal 15px normal sans-serif;
15        list-style: none;
16        margin: 0px;
17        outline: none;
18        padding: 0px;
19        text-decoration: none;
20      }
21      html{
22        display: block;
23      }
24      head{
25        display: none;
26      }
27      style{
28        display: none;
29      }
30      script{
31        display: none;
32      }
33      input{
34        background: rgb(255, 255, 255);
35      }
36      canvas{
37        box-sizing: content-box;
38      }
39      /* common.css */
40      .wrapper{
41        flex: 1 1 auto;
42        margin: 1rem;
43      }
44      nav{
45        border-right: solid 0.1rem rgb(204, 204, 204);
46        flex: 0 1 auto;
47        flex-flow: column nowrap;
48        margin: 0rem 1rem 0rem 0rem;
49        padding: 0rem 1rem 0rem 0rem;
50      }
51      ul{
52        flex-flow: column nowrap;
53      }
54      ul:not(:first-child){
55        margin: 0rem 0rem 0rem 2rem;
56      }
57      li{
58        border-radius: 0.25rem;
59        flex-flow: column nowrap;
60        padding: 0.25rem;
61      }
62      .menu:hover,
63      .menu_sub li:hover{
64        background: rgb(238, 238, 238);
65      }
66      .menu{
67        padding: 0.25rem;
68      }
69      main{
70        flex: 1 1 auto;
71        flex-flow: column nowrap;
72      }
73      main a{
74        border-radius: 0.25rem;
75        padding: 0.25rem;
76      }
77      main a:hover{
78        background: rgb(238, 238, 238);
79      }
80    </style>
81    <script>
82      onload = ()=>{
83        // navエリア処理
84        const nav = document.getElementsByTagName("nav");
85        const nav_width = getComputedStyle(nav[0], null).getPropertyValue("width");
86        nav[0].style.width = nav_width;
87        const menu = document.getElementsByClassName("menu");
88        const menu_toggle = document.getElementsByClassName("menu_toggle");
89        const menu_sub = document.getElementsByClassName("menu_sub");
90        menu_toggle[0].innerHTML = "▲";
91        menu_toggle[1].innerHTML = "▲";
92        menu_toggle[2].innerHTML = "▲";
93        menu_toggle[3].innerHTML = "▲";
94        menu_toggle[4].innerHTML = "▲";
95        menu_toggle[0].style.transform = "rotate(90deg)";
96        menu_toggle[1].style.transform = "rotate(90deg)";
97        menu_toggle[2].style.transform = "rotate(90deg)";
98        menu_toggle[3].style.transform = "rotate(90deg)";
99        menu_toggle[4].style.transform = "rotate(90deg)";
100        menu_sub[0].style.display = "none";
101        menu_sub[1].style.display = "none";
102        menu_sub[2].style.display = "none";
103        menu_sub[3].style.display = "none";
104        menu_sub[4].style.display = "none";
105        menu[0].addEventListener("click", ()=>{
106          if(menu_toggle[0].innerHTML == "▲"){
107            menu_toggle[0].innerHTML = "▽";
108            menu_toggle[0].style.transform = "rotate(0deg)";
109            menu_sub[0].style.display = "flex";
110          }else{
111            menu_toggle[0].innerHTML = "▲";
112            menu_toggle[0].style.transform = "rotate(90deg)";
113            menu_sub[0].style.display = "none";
114          }
115        });
116        menu[1].addEventListener("click", ()=>{
117          if(menu_toggle[1].innerHTML == "▲"){
118            menu_toggle[1].innerHTML = "▽";
119            menu_toggle[1].style.transform = "rotate(0deg)";
120            menu_sub[1].style.display = "flex";
121          }else{
122            menu_toggle[1].innerHTML = "▲";
123            menu_toggle[1].style.transform = "rotate(90deg)";
124            menu_sub[1].style.display = "none";
125          }
126        });
127        menu[2].addEventListener("click", ()=>{
128          if(menu_toggle[2].innerHTML == "▲"){
129            menu_toggle[2].innerHTML = "▽";
130            menu_toggle[2].style.transform = "rotate(0deg)";
131            menu_sub[2].style.display = "flex";
132          }else{
133            menu_toggle[2].innerHTML = "▲";
134            menu_toggle[2].style.transform = "rotate(90deg)";
135            menu_sub[2].style.display = "none";
136          }
137        });
138        menu[3].addEventListener("click", ()=>{
139          if(menu_toggle[3].innerHTML == "▲"){
140            menu_toggle[3].innerHTML = "▽";
141            menu_toggle[3].style.transform = "rotate(0deg)";
142            menu_sub[3].style.display = "flex";
143          }else{
144            menu_toggle[3].innerHTML = "▲";
145            menu_toggle[3].style.transform = "rotate(90deg)";
146            menu_sub[3].style.display = "none";
147          }
148        });
149        menu[4].addEventListener("click", ()=>{
150          if(menu_toggle[4].innerHTML == "▲"){
151            menu_toggle[4].innerHTML = "▽";
152            menu_toggle[4].style.transform = "rotate(0deg)";
153            menu_sub[4].style.display = "flex";
154          }else{
155            menu_toggle[4].innerHTML = "▲";
156            menu_toggle[4].style.transform = "rotate(90deg)";
157            menu_sub[4].style.display = "none";
158          }
159        });
160      }
161    </script>
162  </head>
163  <body>
164    <div class="wrapper">
165      <nav>
166        <ul>
167          <li>
168            <div class="menu">
169              <div class="menu_toggle">▽</div>
170              <p>お気に入り</p>
171            </div>
172            <ul class="menu_sub">
173              <li>
174                <a href="">Dropbox</a>
175              </li>
176              <li>
177                <a href="">ダウンロード</a>
178              </li>
179              <li>
180                <a href="">デスクトップ</a>
181              </li>
182              <li>
183                <a href="">最近表示した場所</a>
184              </li>
185            </ul>
186          </li>
187          <li>
188            <div class="menu">
189              <div class="menu_toggle">▽</div>
190              <p>ライブラリ</p>
191            </div>
192            <ul class="menu_sub">
193              <li>
194                <a href="">ドキュメント</a>
195              </li>
196              <li>
197                <a href="">ピクチャ</a>
198              </li>
199              <li>
200                <a href="">ビデオ</a>
201              </li>
202              <li>
203                <a href="">ミュージック</a>
204              </li>
205            </ul>
206          </li>
207          <li>
208            <div class="menu">
209              <div class="menu_toggle">▽</div>
210              <p>ホームグループ</p>
211            </div>
212            <div class="menu_sub"></div>
213          </li>
214          <li>
215            <div class="menu">
216              <div class="menu_toggle">▽</div>
217              <p>コンピュータ</p>
218            </div>
219            <ul class="menu_sub">
220              <li>
221                <a href="">ローカルディスク (C:)</a>
222              </li>
223              <li>
224                <a href="">ローカルディスク (D:)</a>
225              </li>
226              <li>
227                <a href="">ボリューム (E:)</a>
228              </li>
229            </ul>
230          </li>
231          <li>
232            <div class="menu">
233              <div class="menu_toggle">▽</div>
234              <p>ネットワーク</p>
235            </div>
236            <ul class="menu_sub">
237              <li>
238                <a href="">Akainu-PC</a>
239              </li>
240              <li>
241                <a href="">Aokizi-PC</a>
242              </li>
243              <li>
244                <a href="">Kizaru-PC</a>
245              </li>
246            </ul>
247          </li>
248        </ul>
249      </nav>
250      <main>
251        <a href="">Apple</a>
252        <a href="">Bagel</a>
253        <a href="">Cream</a>
254        <a href="">Donut</a>
255        <a href="">Egg</a>
256        <a href="">Fish-and-chips</a>
257        <a href="">Ginger</a>
258        <a href="">Hamburger</a>
259        <a href="">Iwanori</a>
260      </main>
261    </div>
262  </body>
263</html>