デザインとして、「マテリアルデザイン」のMUIを使っています。
デザイン系に疎い私としては、「グリッドデザイン」とか「フレキシブルレイアウト」だとか「レスポンシブレイアウト」とか、
それらの違いが良くわかりません。
ただ、どれも昨今のスマホやタブレットといった、昔のように「パソコンだけしか意識しないで良い時代」とは異なり、
どの端末で見ても、それなりに使えるようにする必要があるという事のようです。
MUI の中を覗いていると、いろいろ判らない所が出てきます。
どういう目的でどういう効果があるのかが知りたいところです。
MUI で作った自分の画面を、大きさを変えると、動的に変化することが判ります。
極端な例が、スマートホンで見ると、違った見え方になります。
ある程度は、MUI が吸収してくれますが、細かい所は、やはり自分でちゃんと意識する必要があります。
とは言え、どういう考え方なのだろう・・・ちょっと覗いてみます。
・バーガーメニューの class
同じ要素がわざわざ２つ記述されています。（なぜ？）
class="sidedrawer-toggle mui--visible-xs-inline-block mui--visible-sm-inline-block js-show-sidedrawer"
class="sidedrawer-toggle mui--hidden-xs mui--hidden-sm js-hide-sidedrawer"
mui-で始まるのが、MUIが用意したクラス名です。xs とか sm の意味ですが、これは画面のサイズを指しています。
MUI は、Bootstrap のグリッドシステムと互換で、mui-をプリフィックスとして付けています。
ということで、詳しい意味は、Bootstrap の解説を見れば良いようです。
結果として、２つ記載されていたのは、画面のサイズでどちらかが有効になります。
js-show-sidedrawer/js-hide-sidedrawer は、この要素が押された際の動作で、
最初の表示でのサイドバーの表示の有無が画面サイズで異なる事を意味しています。
具体的に言うと、パソコンでは、サイドバーが最初から表示されますが、スマホでは、隠れています。
スマホでは、バーガーメニューを押すことでサイドバーが表示されます。
| « 前頁 | 次頁 » |