20200714 店舗紹介サイトのリニューアル メディアクエリとハンバーガー
店舗詳細ページのスマホ対応化
だいぶ苦手意識が強かったメディアクエリを活用したスマホに対応したサイト制作だったがどうにか今日は一通りやり通すことができた。
つまづいた箇所としては
- スマホ画面のサイズに各要素がうまく収まってくれない
→chromeの検証ツールのelementで要素を選択したあとに右クリックでdeleatelementとという要素を消せる項目がある。
サイズが大きすぎる画像を用いていたりmargin,paddingで余白を大きく取りすぎていてスマホ画面に収めるのを邪魔していそうな要素を見つけた時にこの機能を使うと探し当てやすい。
- googleマップを上手く収める方法がわからない
@media screen and (max-width: 480px) {
.map {
position: relative;
height: 0;
padding-top: 50%; /* 幅に対する割合 */
overflow: hidden;
}
.map iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
HTMLはGoogleからコード拾ってきて埋め込み、CSSで上記のものを記述するといい具合にマップが縮小される。
明日明後日は授業のグループワークが大詰めをむかえる。
苦手なことが多いが今のうちに克服していきたいところ。
