プログラミングの勉強日記
2020年6月29日 Progate Lv.148
ポートフォリオ作成中
前回作成したwebページの調整をしている
目標物
アコーディオンメニューでスクロールをできるようにしたい。メニューはz-indexで最前面に表示されるようになっている。
コード
HTMLファイル
<divclass="navigation"><spanclass="fas fa-bars naviTop"></span><nav><ul><li><ahref="#iceland">Iceland</a></li><li><ahref="#aurora">Aurora</a></li><li><ahref="#blueLagoon">BLUE LAGOON</a></li><li><ahref="#london">London</a></li><li><ahref="#paris">Paris</a></li><li><ahref="#iceland">Iceland</a></li><li><ahref="#spain">Spain</a></li><li><ahref="#map">Map</a></li><li><ahref="#food">Foods</a></li></ul></nav></div>overflow-y: scroll;でスクロール機能を追加できる。このときにheightを指定する必要がある。
しかし、height: 100%;で縦幅を指定してもうまくできない。そのため、今回はvhという単位を利用した。（widthはnwで指定した）
vw(viewport width)：ビューポートの幅に対する割合
vh(viewport height)：ビューポートの高さに対する割合
（ビューポート(viewport)は表示領域のこと）
cssファイル
nav{height:90vh;overflow-y:scroll;width:70vw;display:none;background-color:rgba(58,124,223,0.7);border-radius:20px;margin-top:80px;}参考文献
https://tips.adrec-dept.com/html-css/208/
https://dev.classmethod.jp/articles/css-length-viewport/