pwaにてアプリケーションの作成をしています。
footerの作成につきまして下記の2点質問がございます。
①
下記の写真のように、センターアイコンを丸く囲うには
どのようにしたら良いでしょうか?
イメージとしては、マテリアルボタンのようなモノをfooterに重ねる?のかなというイメージです。
②
センターのアイコンをクリックした際に
下記の写真のように、メニューを出したいと思っております。
その場合、どのようなコードを書くことで実現しますでしょうか?
(また、ボタンも×に変わる方法も知りたいです)
現在のコードはこちらです。
html
1<!-- フッターの設定 --> 2 <footer class="app_footer"> 3 <ul> 4 <li> 5 <div class="home_icon"> 6 <a href="shop.html"><i class="fas fa-home my-home fa-4x"></i></a> 7 </div> 8 <div id=shop_footer> 9 ホーム 10 </div> 11 </li> 12 13 <li> 14 <div class="favorite_icon"> 15 <a href="shop_favorite.html"><i class="far fa-star my-shop fa-4x"></i></a> 16 <div id=shop_footer> 17 お気に入り 18 </div> 19 </div> 20 </li> 21 22 <li> 23 <div class="menu_icon"> 24 <a href="shop_menu.html"><i class="fas fa-bars my- fa-8x"></i></a> 25 <div id=shop_footer> 26 メニュー 27 </div> 28 </div> 29 </li> 30 31 <li> 32 <div class="purchase_history_icon"> 33 <a href="shop_purchase_history.html"><i class="fas fa-history fa-4x"></i></a> 34 <div id=shop_footer> 35 購入履歴 36 </div> 37 </div> 38 </li> 39 40 <li> 41 <div class="profile_icon"> 42 <a href="profile.html"><i class="far fa-user-circle fa-4x"></i></a> 43 <div id=shop_footer> 44 プロフィール 45 </div> 46 </div> 47 </li> 48 49 </ul> 50 </footer>
css
1// フッターの固定 2.app_footer { 3 background-color: #fff; 4 position: sticky; 5 bottom: 0; 6 7} 8 9 10.my-home { 11 color: #f49d3f; 12} 13 14 15 16// -- フッター -- 17.app_footer ul { 18 list-style: none; /*"."を消去*/ 19 display: flex; //横に並べる 20 justify-content: space-around; //均等間隔に 21 text-align: center; 22 padding-top: 20px; //上に20pxスペースを空ける 23 border-top:1px solid #AEAEAE; 24 25 } 26 27#shop_footer { 28 font-size: 200%; //文字サイズ 29}
よろしくおねがいたします。
footerにボタンを置いてしまうとAndroidなどでソフトキーのものはそれとの判別がつきづらくなったり誤操作の要因になりえますが、そこは問題ないのでしょうか。
書き方に語弊があったかもしれません。。「footerにボタンを置く」というよりは「footerにあるボタン5つのうち、真ん中のボタンを大きくして丸く囲っているように見える仕様にしたい」といった感じです。なのでその点の問題はありません!
書き方に語弊があったかもしれません。。「footerにボタンを置く」というよりは「footerにあるボタン5つのうち、真ん中のボタンを大きくして丸く囲っているように見える仕様にしたい」といった感じです。なのでその点の問題はありません!