質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

943閲覧

footerアイコンの作成とカスタマイズについて

syyyow

総合スコア28

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/09/11 03:11

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}

よろしくおねがいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/09/11 04:22

footerにボタンを置いてしまうとAndroidなどでソフトキーのものはそれとの判別がつきづらくなったり誤操作の要因になりえますが、そこは問題ないのでしょうか。
syyyow

2018/09/11 04:40

書き方に語弊があったかもしれません。。「footerにボタンを置く」というよりは「footerにあるボタン5つのうち、真ん中のボタンを大きくして丸く囲っているように見える仕様にしたい」といった感じです。なのでその点の問題はありません!
syyyow

2018/09/11 04:40

書き方に語弊があったかもしれません。。「footerにボタンを置く」というよりは「footerにあるボタン5つのうち、真ん中のボタンを大きくして丸く囲っているように見える仕様にしたい」といった感じです。なのでその点の問題はありません!
guest

回答1

0

新しい質問も拝見させていただきました(^^)
互換性が心配ですが、ゼロから書くと結構大変ので、プラグインを入れてみてはいかがでしょうか?
このようなサイトがありました。
https://coliss.com/articles/build-websites/operation/work/awesome-menu-interaction-2015-jul.html
この中の、これが近いのかな?と思いましたがいかがでしょうか?
https://codepen.io/lbebber/pen/LELBEo
これは下に開くのでアレンジが必要ですが、ゼロから書くよりはおそらく楽だと思いますし、ソースを見ると仕組みもわかって良いですよ(^^)

投稿2018/09/11 05:14

編集2018/09/11 05:15
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

syyyow

2018/09/12 00:34

ありがとうございます! 試して見たのですが、エラーの解決方法がわからず,,,です>< エラー内容はこちらです。。 ↓ Error: File to import not found or unreadable: compass/css3. in: /Users/Desctop/web/css/test.scss (1,1) また、「SASS-Autocompile: Compilation error」 こちらの記載もあり、クリックすると「untitled」が開かさり { "status": 1, "file": "/Users/Desktop/web/css/test.scss", "line": 1, "column": 1, "message": "File to import not found or unreadable: compass/css3.", "formatted": "Error: File to import not found or unreadable: compass/css3.\n on line 1 of Users/Desktop/web/css/test.scss\n>> @import \"compass/css3\";\n\n ^\n" } という内容が記載されています。 全くエラー内容がわからない状況です、、
退会済みユーザー

退会済みユーザー

2018/09/12 01:11

こういうのは翻訳ツール私は使います! どちらにも翻訳すると「インポートするファイルが見つからないか読み取れません」または、「コンパイルエラー」とあります。 コードをみて心当たりはありませんか?
syyyow

2018/09/13 04:41

翻訳してエラー内容の意味理解ができなかったので作成できませんでしたが、test環境で作成しなんとかできました!が、細かい仕様の理解が追いつかないので、z-indexを利用した方法で重ねて表示できるよう作成してみようと思いますTT 参考サイト、ありがとうございます!!
退会済みユーザー

退会済みユーザー

2018/09/13 05:09

とんでもございません! あまりお役に立てずすみませんでした(>_<)成功を祈ります!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問