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

質問編集履歴

1

バージョンと、コード記載について修正させていただきました。

2019/03/05 17:36

投稿

srmm1025
srmm1025

スコア12

title CHANGED
File without changes
body CHANGED
@@ -14,8 +14,136 @@
14
14
  表示される。
15
15
 
16
16
  ### コードはこちらです。
17
- Bootstrap
18
- ![イメージ説明](2b30acec3d4291092f9b191b382b57c9.png)
19
17
 
18
+ ```Bootstrap バージョン4
19
+ <!doctype html>
20
+ <html lang="ja">
21
+ <head>
22
+ <meta charset="utf-8">
23
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
24
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
25
+ <title>カフェ Mr. M COFFEE</title>
26
+ </head>
27
+ <body>
28
+ <div class="container text-center">
29
+ <h1>Mr. M COFFEE</h1>
30
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
31
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
32
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
33
+
34
+
35
+ <!-- header -->
36
+ <header class="py-4">
37
+ <img src="gazou/c2cd16d0a7f926968200d5d809ec9f9e_s.jpg" alt="Mr. M COFFEE"></a>
38
+ </div>
39
+ </header>
40
+ <!-- nav -->
41
+ <nav>
42
+ <!--ナビゲーションバー-->
43
+     <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
44
+ <div class="container">
45
+ <!--サブコンポーネント-->
46
+ <a class="navbar-brand" href="index.html">Mr. M COFFEE</a>
47
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
48
+ <span class="navbar-toggler-icon"></span>
49
+ </button>
50
+ <!--ナビゲーションー-->
51
+ <div class="collapse navbar]-collapse" id="navbar-content">
52
+ <!--ナビゲーションメニュー-->
53
+ <ul class="navbar-nav" mr-auto>
54
+ <li class="nav-item active">
55
+ <a class="nav-link" href="#">Top <span class="sr-only">(current)</span></a>
56
+ </li>
57
+ <li class="nav-item">
58
+ <a class="nav-link" href="#">About</a>
59
+ </li>
60
+ <li class="nav-item">
61
+ <a class="nav-link" href="#">Menu</a>
62
+ </li>
63
+ <li class="nav-item">
64
+ <a class="nav-link" href="#">Coupon</a>
65
+ </li>
66
+ <li class="nav-item">
67
+ <a class="nav-link" href="#">information</a>
68
+ </li>
69
+ </ul>
70
+ <!--右側のメニュー:Contactページへのリンク-->
71
+ <ul class="navbar-nav">
72
+ <li class="nav-item">
73
+ <a href="contact.html" class="nav-link btn btn-info">Contact</a>
74
+ </li>
75
+ </ul>
76
+ <!--ドロップダウン-->
77
+ <li class="nav-item dropdown">
78
+ <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Information
79
+ </a>
80
+ <div class="dropdown-menu" aria-labeliedby="navbarDropdown">
81
+ <a class="dropdown-item" href="#">Shop</a>
82
+ <a class="dropdown-item" href="#">Access</a>
83
+ </div>
84
+ </li>
85
+ </div>
86
+ </div>
87
+ </nav>
88
+ </nav>
89
+
90
+ <!-- main -->
91
+ <main>
92
+ <!--メインビジュアル-->
93
+ <div class="py-4">
94
+      <div class="container">
95
+ <!--カルーセル外枠-->
96
+ <div id="main_visual" class="carusel slide" data-ride="carusel">
97
+ <!--インジゲーター-->
98
+ <ol class="carusel-indicators">
99
+       各インジゲーター
100
+ </ol>
101
+ <!--カルーセル内枠-->
102
+ <div class="carusel-inner">
103
+ <div class="carusel-item">
104
+
105
+ </div>
106
+
107
+ </div>
108
+
109
+ </div>
110
+
111
+
112
+ </div>
113
+
114
+
115
+ </div>
116
+ <!--コンテンツ01-->
117
+ <div class="py-4">
118
+
119
+ </div>
120
+ <!--コンテンツ02-->
121
+ <div class="py-4">
122
+
123
+ </div>
124
+ <!--コンテンツ03-->
125
+ <div class="py-4">
126
+
127
+ </div>
128
+ <!--コンテンツ04-->
129
+ <div class="py-4">
130
+
131
+ </div>
132
+ <!--コンテンツ05-->
133
+ <div class="py-4">
134
+
135
+ </div>
136
+ </main>
137
+ <!--フッター-->
138
+ <footer class="py-4">
139
+
140
+ </footer>
141
+
142
+ </body>
143
+ </html>
144
+
145
+
146
+ ```
147
+
20
148
  コードを見直したり、調べたりしたのですがわかりませんでした。
21
149
  よろしくお願いいたします。