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

質問編集履歴

4

文法の修正

2020/11/08 12:56

投稿

ry0559
ry0559

スコア24

title CHANGED
File without changes
body CHANGED
@@ -19,223 +19,4 @@
19
19
 
20
20
  ###
21
21
  スマホで表示するには、何か設定が必要でしょうか?
22
- 宜しくお願いします。
22
+ 宜しくお願いします。
23
-
24
- ```head
25
-
26
- @section('head')
27
- <meta charset="UTF-8">
28
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
29
- <meta name="description" itemprop="description" content="@yield('description')">
30
- <meta name="keywords" itemprop="keywords" content="@yield('keywords')">
31
- <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
32
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/css/uikit.min.css" />
33
- <link rel="stylesheet" href="{{ asset('/css/uikit-loop.css') }}">
34
-
35
-
36
- <title>@yield('title')</title>
37
- @endsection
38
-
39
- ```
40
-
41
- ```header
42
- @section('header')
43
- <header>
44
- <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
45
- <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
46
-
47
-
48
- <div class="uk-navbar-left uk-visible@m">
49
- <ul class="uk-navbar-nav">
50
- <li class="uk-active"><a href="">いいい</a></li>
51
- <li class="uk-active"><a href="">ううう</a></li>
52
- <li><a href=""></a></li>
53
- </ul>
54
- </div>
55
-
56
- <div class="uk-navbar-right uk-visible@m">
57
- <a class="uk-button uk-button-default uk-margin-small-right uk-button-secondary" href="https://www.instagram.com/">あああああ</a>
58
- </div>
59
-
60
-
61
-
62
- {{-- nav mobile buton --}}
63
- <div class="uk-navbar-right uk-hidden@m">
64
- <a class="uk-navbar-toggle" uk-toggle="target: #offcanvas-nav" uk-navbar-toggle-icon href=""></a>
65
- </div>
66
- </nav>
67
- </div>
68
- </header>
69
-
70
- <div id="offcanvas-nav" uk-offcanvas="overlay: true">
71
- <div class="uk-offcanvas-bar">
72
- <ul class="uk-nav uk-nav-default">
73
- <li class="uk-active"><a href="#">Active</a></li>
74
- <li class="uk-parent">
75
- <a href="#">Parent</a>
76
- <ul class="uk-nav-sub">
77
- <li><a href="#">Sub item</a></li>
78
- <li><a href="#">Sub item</a></li>
79
- </ul>
80
- </li>
81
- <li class="uk-nav-header">Header</li>
82
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
83
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
84
- <li class="uk-nav-divider"></li>
85
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
86
- </ul>
87
- </div>
88
- </div>
89
-
90
-
91
- @endsection
92
- ```
93
-
94
- ```index
95
- @extends('layouts.default')
96
-
97
- @section('keywords', 'A,B,C')
98
- @section('description', '説明文')
99
- @section('title', 'test| あああああ')
100
-
101
- @include('layouts.head')
102
- @include('layouts.uikit-header')
103
-
104
- @section('content')
105
- <div class="uk-padding uk-text-center top-bg-color">
106
- <img data-src="{{ asset('/img/test-3.png') }}" alt="" uk-img>
107
- </div>
108
- <div class="uk-section-muted">
109
- <div class="uk-container uk-container-xsmall">
110
- <div class="loop-concept uk-padding">
111
- <p class="uk-heading-divider uk-text-center">おおおおおおおお</p>
112
- </div>
113
- <div class="uk-child-width-expand@s uk-text-center" uk-grid>
114
- <div>
115
- <div class="uk-card uk-card-default uk-card-body uk-margin-bottom border-box">
116
- <span class="border-box-title">いいいいいいい</span>
117
- <div class="uk-flex">
118
- <div class="uk-width-1-3 uk-flex-first">
119
- <img class="uk-width-small" src="{{ asset('/img/matueku.jpg') }}">
120
- </div>
121
- <div class="uk-width-2-3@">
122
- <div class="loop-menu-text-box">
123
- <span class="uk-text-bottom">おおおおおおおおお</span>
124
- <hr class="uk-divider-small">
125
- </div>
126
- </div>
127
- </div>
128
- <div>
129
- <p>おおおおおおおおおおお</p>
130
- </div>
131
- </div>
132
- </div>
133
- </div>
134
- </div>
135
- </div>
136
-
137
-
138
-
139
- @endsection
140
-
141
- @include('layouts.uikit-footer')
142
- ```
143
-
144
- ```footer
145
- @section('footer')
146
- <footer>
147
- <div class="uk-container uk-container-small uk-padding-small">
148
- <div class="uk-grid-small uk-child-width-expand@m" uk-grid>
149
- <div class="uk-margin-small-top">
150
- <div class="uk-cover-container uk-height-medium">
151
-
152
- </div>
153
- </div>
154
- <div>
155
- <div class="uk-padding-small">
156
- <ul class="uk-list addr-text-color">
157
- <li>【住所】<span class="uk-text-small">ああああああ</span> </li>
158
- <li>【駅から】<span class="uk-text-small">いいいいいい。</span></li>
159
- <li>【お車でお越し方】<span class="uk-text-small">うううううう</span> </li>
160
- </ul>
161
- <a class="uk-button uk-button-default" href="https://www.instagram.com/"><span class="uk-margin-small-right" uk-icon="instagram"></span>instagram</a>
162
- </div>
163
- </div>
164
-
165
- </div>
166
- </div>
167
-
168
- </footer>
169
-
170
-
171
- <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
172
- {{-- uikit --}}
173
- <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit.min.js"></script>
174
- <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit-icons.min.js"></script>
175
- <script src="{{ asset('/js/app.js') }}"></script>
176
- @endsection
177
-
178
- ```
179
- ```css
180
- @charset "UTF-8";
181
-
182
- .border-box {
183
- position: relative;
184
- margin: 2em 0;
185
- padding: 0.5em 1em;
186
- border: solid 1px black;
187
- .border-box-title {
188
- position: absolute;
189
- display: inline-block;
190
- top: -13px;
191
- left: 10px;
192
- padding: 0 9px;
193
- line-height: 1;
194
- font-size: 19px;
195
- background: #FFF;
196
- color: black;
197
- font-weight: bold;
198
- }
199
- p {
200
- margin: 0;
201
- padding: 0;
202
- }
203
- }
204
-
205
- header {
206
- nav {
207
- background-color: lightgray;
208
- height: 70px;
209
-
210
- }
211
- }
212
-
213
-
214
-
215
-
216
- .top-bg-color {
217
- background-color: lightgray;
218
- }
219
-
220
- footer {
221
- height: 100%;
222
- background-color: black;
223
- .addr-text-color {
224
- color: white;
225
- }
226
- }
227
-
228
-
229
- @media screen and (min-width:640px){
230
- .loop-menu-text-box {
231
- margin-top: 25px;
232
- }
233
- }
234
- @media screen and (min-width:960px){
235
-
236
- }
237
- @media screen and (min-width:1200px){
238
-
239
- }
240
-
241
- ```

3

homestaed バージョン追加

2020/11/08 12:56

投稿

ry0559
ry0559

スコア24

title CHANGED
File without changes
body CHANGED
@@ -4,9 +4,9 @@
4
4
 
5
5
  ###環境
6
6
  ・mac
7
- ・laravel  6
7
+ ・laravel   6
8
- ・homestead
8
+ ・homestead   9.6.1
9
- ・ngrok 2.3.35
9
+ ・ngrok  2.3.35
10
10
 
11
11
 
12
12
  ###確認したこと

2

コードの追加

2020/11/08 07:10

投稿

ry0559
ry0559

スコア24

title CHANGED
File without changes
body CHANGED
@@ -19,4 +19,223 @@
19
19
 
20
20
  ###
21
21
  スマホで表示するには、何か設定が必要でしょうか?
22
- 宜しくお願いします。
22
+ 宜しくお願いします。
23
+
24
+ ```head
25
+
26
+ @section('head')
27
+ <meta charset="UTF-8">
28
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
29
+ <meta name="description" itemprop="description" content="@yield('description')">
30
+ <meta name="keywords" itemprop="keywords" content="@yield('keywords')">
31
+ <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
32
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/css/uikit.min.css" />
33
+ <link rel="stylesheet" href="{{ asset('/css/uikit-loop.css') }}">
34
+
35
+
36
+ <title>@yield('title')</title>
37
+ @endsection
38
+
39
+ ```
40
+
41
+ ```header
42
+ @section('header')
43
+ <header>
44
+ <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
45
+ <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
46
+
47
+
48
+ <div class="uk-navbar-left uk-visible@m">
49
+ <ul class="uk-navbar-nav">
50
+ <li class="uk-active"><a href="">いいい</a></li>
51
+ <li class="uk-active"><a href="">ううう</a></li>
52
+ <li><a href=""></a></li>
53
+ </ul>
54
+ </div>
55
+
56
+ <div class="uk-navbar-right uk-visible@m">
57
+ <a class="uk-button uk-button-default uk-margin-small-right uk-button-secondary" href="https://www.instagram.com/">あああああ</a>
58
+ </div>
59
+
60
+
61
+
62
+ {{-- nav mobile buton --}}
63
+ <div class="uk-navbar-right uk-hidden@m">
64
+ <a class="uk-navbar-toggle" uk-toggle="target: #offcanvas-nav" uk-navbar-toggle-icon href=""></a>
65
+ </div>
66
+ </nav>
67
+ </div>
68
+ </header>
69
+
70
+ <div id="offcanvas-nav" uk-offcanvas="overlay: true">
71
+ <div class="uk-offcanvas-bar">
72
+ <ul class="uk-nav uk-nav-default">
73
+ <li class="uk-active"><a href="#">Active</a></li>
74
+ <li class="uk-parent">
75
+ <a href="#">Parent</a>
76
+ <ul class="uk-nav-sub">
77
+ <li><a href="#">Sub item</a></li>
78
+ <li><a href="#">Sub item</a></li>
79
+ </ul>
80
+ </li>
81
+ <li class="uk-nav-header">Header</li>
82
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
83
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
84
+ <li class="uk-nav-divider"></li>
85
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
86
+ </ul>
87
+ </div>
88
+ </div>
89
+
90
+
91
+ @endsection
92
+ ```
93
+
94
+ ```index
95
+ @extends('layouts.default')
96
+
97
+ @section('keywords', 'A,B,C')
98
+ @section('description', '説明文')
99
+ @section('title', 'test| あああああ')
100
+
101
+ @include('layouts.head')
102
+ @include('layouts.uikit-header')
103
+
104
+ @section('content')
105
+ <div class="uk-padding uk-text-center top-bg-color">
106
+ <img data-src="{{ asset('/img/test-3.png') }}" alt="" uk-img>
107
+ </div>
108
+ <div class="uk-section-muted">
109
+ <div class="uk-container uk-container-xsmall">
110
+ <div class="loop-concept uk-padding">
111
+ <p class="uk-heading-divider uk-text-center">おおおおおおおお</p>
112
+ </div>
113
+ <div class="uk-child-width-expand@s uk-text-center" uk-grid>
114
+ <div>
115
+ <div class="uk-card uk-card-default uk-card-body uk-margin-bottom border-box">
116
+ <span class="border-box-title">いいいいいいい</span>
117
+ <div class="uk-flex">
118
+ <div class="uk-width-1-3 uk-flex-first">
119
+ <img class="uk-width-small" src="{{ asset('/img/matueku.jpg') }}">
120
+ </div>
121
+ <div class="uk-width-2-3@">
122
+ <div class="loop-menu-text-box">
123
+ <span class="uk-text-bottom">おおおおおおおおお</span>
124
+ <hr class="uk-divider-small">
125
+ </div>
126
+ </div>
127
+ </div>
128
+ <div>
129
+ <p>おおおおおおおおおおお</p>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+
138
+
139
+ @endsection
140
+
141
+ @include('layouts.uikit-footer')
142
+ ```
143
+
144
+ ```footer
145
+ @section('footer')
146
+ <footer>
147
+ <div class="uk-container uk-container-small uk-padding-small">
148
+ <div class="uk-grid-small uk-child-width-expand@m" uk-grid>
149
+ <div class="uk-margin-small-top">
150
+ <div class="uk-cover-container uk-height-medium">
151
+
152
+ </div>
153
+ </div>
154
+ <div>
155
+ <div class="uk-padding-small">
156
+ <ul class="uk-list addr-text-color">
157
+ <li>【住所】<span class="uk-text-small">ああああああ</span> </li>
158
+ <li>【駅から】<span class="uk-text-small">いいいいいい。</span></li>
159
+ <li>【お車でお越し方】<span class="uk-text-small">うううううう</span> </li>
160
+ </ul>
161
+ <a class="uk-button uk-button-default" href="https://www.instagram.com/"><span class="uk-margin-small-right" uk-icon="instagram"></span>instagram</a>
162
+ </div>
163
+ </div>
164
+
165
+ </div>
166
+ </div>
167
+
168
+ </footer>
169
+
170
+
171
+ <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
172
+ {{-- uikit --}}
173
+ <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit.min.js"></script>
174
+ <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit-icons.min.js"></script>
175
+ <script src="{{ asset('/js/app.js') }}"></script>
176
+ @endsection
177
+
178
+ ```
179
+ ```css
180
+ @charset "UTF-8";
181
+
182
+ .border-box {
183
+ position: relative;
184
+ margin: 2em 0;
185
+ padding: 0.5em 1em;
186
+ border: solid 1px black;
187
+ .border-box-title {
188
+ position: absolute;
189
+ display: inline-block;
190
+ top: -13px;
191
+ left: 10px;
192
+ padding: 0 9px;
193
+ line-height: 1;
194
+ font-size: 19px;
195
+ background: #FFF;
196
+ color: black;
197
+ font-weight: bold;
198
+ }
199
+ p {
200
+ margin: 0;
201
+ padding: 0;
202
+ }
203
+ }
204
+
205
+ header {
206
+ nav {
207
+ background-color: lightgray;
208
+ height: 70px;
209
+
210
+ }
211
+ }
212
+
213
+
214
+
215
+
216
+ .top-bg-color {
217
+ background-color: lightgray;
218
+ }
219
+
220
+ footer {
221
+ height: 100%;
222
+ background-color: black;
223
+ .addr-text-color {
224
+ color: white;
225
+ }
226
+ }
227
+
228
+
229
+ @media screen and (min-width:640px){
230
+ .loop-menu-text-box {
231
+ margin-top: 25px;
232
+ }
233
+ }
234
+ @media screen and (min-width:960px){
235
+
236
+ }
237
+ @media screen and (min-width:1200px){
238
+
239
+ }
240
+
241
+ ```

1

文法の修正

2020/11/08 06:23

投稿

ry0559
ry0559

スコア24

title CHANGED
File without changes
body CHANGED
@@ -11,7 +11,7 @@
11
11
 
12
12
  ###確認したこと
13
13
  ・ローカル環境(vagrant)では正常に表示される
14
- ・ngrokで生成されたURL(http)をmacのブラウザ(chrome・Safari)では正常に表示される(http)
14
+ ・ngrokで生成されたURL(http)をmacのブラウザ(chrome・Safari)では正常に表示される
15
15
  ・ngrokで生成されたURL(http)をiPhoneのブラウザ(chrome・Safari)ではcss・画像が表示されない
16
16
  ・ngrokで生成されたURL(http)をiPadのブラウザ(chrome・Safari)ではcss・画像が表示されない
17
17
  ・iPhoneのcookie,キャッシュの削除