teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

css

2018/09/10 11:16

投稿

syyyow
syyyow

スコア28

title CHANGED
File without changes
body CHANGED
@@ -13,7 +13,7 @@
13
13
 
14
14
 
15
15
 
16
- ```ここに言語を入力
16
+ ```html
17
17
  <!-- フッターの設定 -->
18
18
  <footer class="app_footer">
19
19
  <ul>
@@ -65,4 +65,38 @@
65
65
  </ul>
66
66
  </footer>
67
67
 
68
+ ```
69
+
70
+
71
+ ```css
72
+ // フッターの固定
73
+ .app_footer {
74
+ background-color: #fff;
75
+ position: sticky;
76
+ bottom: 0;
77
+
78
+ }
79
+
80
+
81
+ .my-home {
82
+ color: #f49d3f;
83
+ }
84
+
85
+
86
+
87
+ // -- フッター --
88
+ .app_footer ul {
89
+ list-style: none; /*"."を消去*/
90
+ display: flex; //横に並べる
91
+ justify-content: space-around; //均等間隔に
92
+ text-align: center;
93
+ padding-top: 20px; //上に20pxスペースを空ける
94
+ border-top:1px solid #AEAEAE;
95
+
96
+ }
97
+
98
+ #shop_footer {
99
+ font-size: 200%; //文字サイズ
100
+ }
101
+
68
102
  ```

2

コード

2018/09/10 11:16

投稿

syyyow
syyyow

スコア28

title CHANGED
File without changes
body CHANGED
@@ -9,4 +9,60 @@
9
9
 
10
10
 
11
11
  現状このようになっております↓
12
- ![イメージ説明](bc2c33495389fcf041e62af0aef8c031.png)
12
+ ![イメージ説明](bc2c33495389fcf041e62af0aef8c031.png)
13
+
14
+
15
+
16
+ ```ここに言語を入力
17
+ <!-- フッターの設定 -->
18
+ <footer class="app_footer">
19
+ <ul>
20
+ <li>
21
+ <div class="home_icon">
22
+ <a href="shop.html"><i class="fas fa-home my-home fa-4x"></i></a>
23
+ </div>
24
+ <div id=shop_footer>
25
+ ホーム
26
+ </div>
27
+ </li>
28
+
29
+ <li>
30
+ <div class="favorite_icon">
31
+ <a href="shop_favorite.html"><i class="far fa-star my-shop fa-4x"></i></a>
32
+ <div id=shop_footer>
33
+ お気に入り
34
+ </div>
35
+ </div>
36
+ </li>
37
+
38
+ <li>
39
+ <div class="menu_icon">
40
+ <a href="shop_menu.html"><i class="fas fa-bars my- fa-8x"></i></a>
41
+ <div id=shop_footer>
42
+ メニュー
43
+ </div>
44
+ </div>
45
+ </li>
46
+
47
+ <li>
48
+ <div class="purchase_history_icon">
49
+ <a href="shop_purchase_history.html"><i class="fas fa-history fa-4x"></i></a>
50
+ <div id=shop_footer>
51
+ 購入履歴
52
+ </div>
53
+ </div>
54
+ </li>
55
+
56
+ <li>
57
+ <div class="profile_icon">
58
+ <a href="profile.html"><i class="far fa-user-circle fa-4x"></i></a>
59
+ <div id=shop_footer>
60
+ プロフィール
61
+ </div>
62
+ </div>
63
+ </li>
64
+
65
+ </ul>
66
+ </footer>
67
+
68
+ ```

1

現状追記

2018/09/10 11:15

投稿

syyyow
syyyow

スコア28

title CHANGED
File without changes
body CHANGED
@@ -5,4 +5,8 @@
5
5
 
6
6
  作成はpwaでhtml、cssコードでの作成です。
7
7
 
8
- ![イメージ説明](4d36a468c88b339e5d16502c952f3fed.png)
8
+ ![イメージ説明](4d36a468c88b339e5d16502c952f3fed.png)
9
+
10
+
11
+ 現状このようになっております↓
12
+ ![イメージ説明](bc2c33495389fcf041e62af0aef8c031.png)