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

回答編集履歴

3

ソースコード修正分を掲載

2020/07/29 01:01

投稿

FrontEnd_Japan
FrontEnd_Japan

スコア271

answer CHANGED
@@ -8,4 +8,91 @@
8
8
  <script src="/js/popper.min.js"></script> // ここに追加する
9
9
  <script src="/js/bootstrap-4.4.1.js"></script> // ここに追加する
10
10
  </body>
11
+ ```
12
+
13
+
14
+ **CSS追加分**
15
+ ```css
16
+ .flex {
17
+ display: flex;
18
+ }
19
+ .sidebar {
20
+ width: 200px;
21
+ margin-right: 60px;
22
+ }
23
+ .content {
24
+ max-width: 780px;
25
+ }
26
+ ```
27
+
28
+ **html修正**
29
+ ```html
30
+ <!DOCTYPE html>
31
+ <html lang="ja">
32
+ <head>
33
+ <meta charset="UTF-8" />
34
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
35
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
36
+ <meta name="keywords" content="" />
37
+ <meta name="description" content="" />
38
+ <title>aaaaaaa | bbbbbbb</title>
39
+ <!-- Bootstrap -->
40
+ <link
41
+ href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
42
+ rel="stylesheet"
43
+ />
44
+ <link href="./style.css" rel="stylesheet" />
45
+ <!-- Page Parameter -->
46
+ <!-- /Page Parameter -->
47
+ </head>
48
+ <body class="fixnavbar-margin" id="">
49
+ <!--パンくずリスト--><!--メイン-->
50
+ <div class="container mt-1">
51
+ <div class="flex">
52
+ <!--サイドバー-->
53
+ <nav id="sidebar" class="sidebar">
54
+ <div class="pt-5">
55
+ <h5 class="border-sidebar"><strong>ああああああ</strong></h5>
56
+ </div>
57
+ </nav>
58
+ <div class="content">
59
+ <h1 class="midashi">いいいいいいいいいいいいいい</h1>
60
+ <h2 class="midashi">ううううううううう</h2>
61
+ <h3 class="midashi"></h3>
62
+ <section>
63
+ <h2 class="midashi-2 mt-0">ええええええええ</h2>
64
+ <h3 class="midashi-2">おおおおおおおおおおおおおおお</h3>
65
+ <p>
66
+ この文章はダミーです。ここに文章が入ります。この文章はダミーです。ここに文章が入ります。この文章はダミーです。ここに文章が入ります。この文章はダミーです。ここに文章が入り
67
+ </p>
68
+ <p>&nbsp;</p>
69
+ </section>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ <footer class="py-5 mt-5 bg-dark text-white">
74
+ <div>
75
+ <div class="row">
76
+ <div
77
+ class="col-md-12 text-center d-md-flex justify-content-between align-items-center"
78
+ >
79
+ <ul class="nav d-flex justify-content-center">
80
+ <li class="nav-item">
81
+ <a class="nav-link active text-white-50" href="#">HOME</a>
82
+ </li>
83
+ <li class="nav-item">
84
+ <a class="nav-link text-white-50" href="#">サイトマップ</a>
85
+ </li>
86
+ </ul>
87
+ <p class="mb-0 py-1">Copyright(C) All rights reserved.</p>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </footer>
92
+ <div id="page_top"><a href="#"></a></div>
93
+ <script src="./jquery.min.js"></script>
94
+ <script src="./popper.min.js"></script>
95
+ <script src="./bootstrap.min.js"></script>
96
+ </body>
97
+ </html>
11
98
  ```

2

lang変更

2020/07/29 01:01

投稿

FrontEnd_Japan
FrontEnd_Japan

スコア271

answer CHANGED
@@ -2,7 +2,7 @@
2
2
  JSファイルは`bodyの閉じタグ前に記述`するようにしてください。
3
3
  JSファイルの読み込みが`documentの読み込みを遅くするため`です。
4
4
 
5
- ```javascript
5
+ ```html
6
6
  <div id="page_top"><a href="#"></a></div>
7
7
  <script src="/js/jquery-3.4.1.min.js"></script> // ここに追加する
8
8
  <script src="/js/popper.min.js"></script> // ここに追加する

1

コメントアウトを追加する

2020/07/27 12:51

投稿

FrontEnd_Japan
FrontEnd_Japan

スコア271

answer CHANGED
@@ -1,3 +1,11 @@
1
1
  少し関係がありそうな点として、
2
2
  JSファイルは`bodyの閉じタグ前に記述`するようにしてください。
3
- JSファイルの読み込みが`documentの読み込みを遅くするため`です。
3
+ JSファイルの読み込みが`documentの読み込みを遅くするため`です。
4
+
5
+ ```javascript
6
+ <div id="page_top"><a href="#"></a></div>
7
+ <script src="/js/jquery-3.4.1.min.js"></script> // ここに追加する
8
+ <script src="/js/popper.min.js"></script> // ここに追加する
9
+ <script src="/js/bootstrap-4.4.1.js"></script> // ここに追加する
10
+ </body>
11
+ ```