質問編集履歴
3
imgの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
### 前提・実現したいこと
|
|
1
|
+
### 前提・実現したいこと
|
|
2
2
|
|
|
3
3
|
Bootstrap学習中、レスポンシブの時に出る右側の余白を消すことができず調べてもどれも該当しない（もしくはさせ方が分からない）ので助けていただきたいです
|
|
4
4
|
|
2
コードの再修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -11,7 +11,21 @@
|
|
|
11
11
|
### 該当のソースコード
|
|
12
12
|
|
|
13
13
|
```html
|
|
14
|
-
|
|
14
|
+
<!doctype html>
|
|
15
|
+
<html lang="ja">
|
|
16
|
+
<head>
|
|
17
|
+
<!-- Required meta tags -->
|
|
18
|
+
<meta charset="utf-8">
|
|
19
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
20
|
+
|
|
21
|
+
<!-- Bootstrap CSS -->
|
|
22
|
+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
|
|
23
|
+
|
|
24
|
+
<title>Hello, world!</title>
|
|
25
|
+
</head>
|
|
26
|
+
|
|
27
|
+
<body class="bg-light">
|
|
28
|
+
<header>
|
|
15
29
|
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
|
|
16
30
|
<div class="container-fluid">
|
|
17
31
|
<a class="navbar-brand text-white" href="#">Bootstrap</a>
|
|
@@ -50,12 +64,91 @@
|
|
|
50
64
|
</nav>
|
|
51
65
|
</header>
|
|
52
66
|
|
|
67
|
+
<!-- スライドショー -->
|
|
68
|
+
<div class="keyvisual">
|
|
69
|
+
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
|
|
70
|
+
<div class="carousel-indicators">
|
|
71
|
+
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
|
72
|
+
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
|
73
|
+
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
|
74
|
+
</div>
|
|
75
|
+
<div class="carousel-inner">
|
|
76
|
+
<div class="carousel-item active">
|
|
77
|
+
<img src="images/img1.jpeg" class="d-block w-100" alt="...">
|
|
78
|
+
<div class="carousel-caption d-none d-md-block">
|
|
79
|
+
<h5>HTML/CSS</h5>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
</div>
|
|
83
|
+
<div class="carousel-item">
|
|
84
|
+
<img src="images/img2.jpeg" class="d-block w-100" alt="...">
|
|
85
|
+
<div class="carousel-caption d-none d-md-block">
|
|
86
|
+
<h5>Bootstrap</h5>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
</div>
|
|
90
|
+
<div class="carousel-item">
|
|
91
|
+
<img src="images/img3.jpeg" class="d-block w-100" alt="...">
|
|
92
|
+
<div class="carousel-caption d-none d-md-block">
|
|
93
|
+
<h5>Programing</h5>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
|
|
99
|
+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
100
|
+
<span class="visually-hidden">Previous</span>
|
|
101
|
+
</button>
|
|
102
|
+
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
|
|
103
|
+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
104
|
+
<span class="visually-hidden">Next</span>
|
|
105
|
+
</button>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
53
108
|
|
|
109
|
+
<div class="container bg-white py-5 my-5">
|
|
110
|
+
<!-- Bootstrapの特徴 -->
|
|
111
|
+
<div id="column">
|
|
112
|
+
<h2 class="text-center py-3">Bootstrapの特徴</h2>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="row text-center">
|
|
115
|
+
<div class="col-md-4 col-12">
|
|
116
|
+
<img class="img-fluid" src="images/Rectangle2.jpg" alt="">
|
|
117
|
+
</div>
|
|
118
|
+
<div class="col-md-4 col-12">
|
|
119
|
+
<img class="img-fluid" src="images/Rectangle3.jpg" alt="">
|
|
120
|
+
</div>
|
|
121
|
+
<div class="col-md-4 col-12">
|
|
122
|
+
<img class="img-fluid" src="images/Rectangle4.jpg" alt="">
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
54
125
|
|
|
126
|
+
<!-- お客様の声 -->
|
|
127
|
+
<div id="Flex">
|
|
128
|
+
<h2 class="text-center py-3">お客様の声</h2>
|
|
129
|
+
</div>
|
|
130
|
+
<div class="d-flex flex-wrap-reverse justyfy-content-center">
|
|
131
|
+
<div class="col-md-6 col-12 p-0 align-self-center h3 p-4">
|
|
132
|
+
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
|
|
133
|
+
</div>
|
|
134
|
+
<div class="col-md-6 col-12 p-0 align-self-center">
|
|
135
|
+
<img class="img-fluid" src="images/Rectangle5.jpg" alt="">
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
<div class="d-flex flex-wrap justyfy-content-center">
|
|
139
|
+
<div class="col-md-6 col-12 p-0 align-self-center">
|
|
140
|
+
<img class="img-fluid" src="images/Rectangle6.jpg" alt="">
|
|
141
|
+
</div>
|
|
142
|
+
<div class="col-md-6 col-12 p-0 align-self-center h3 p-4">
|
|
143
|
+
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
|
|
147
|
+
<!-- Bootstrapのタブ -->
|
|
55
|
-
|
|
148
|
+
<div class="pt-5" id="tab">
|
|
56
149
|
<h2 class="text-center py-3">Bootstrapのタブ</h2>
|
|
57
150
|
</div>
|
|
58
|
-
<div class="tab
|
|
151
|
+
<div class="tab">
|
|
59
152
|
<ul class="nav nav-tabs flex-nowrap" id="myTab" role="tablist">
|
|
60
153
|
<li class="nav-item col-4 p-0 ">
|
|
61
154
|
<a class="nav-link text-center" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="false">グリッドシステム</a>
|
|
@@ -85,6 +178,16 @@
|
|
|
85
178
|
</div>
|
|
86
179
|
</div>
|
|
87
180
|
</div>
|
|
181
|
+
|
|
182
|
+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
|
|
183
|
+
|
|
184
|
+
<!-- Option 2: Separate Popper and Bootstrap JS -->
|
|
185
|
+
<!--
|
|
186
|
+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
|
|
187
|
+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
|
|
188
|
+
-->
|
|
189
|
+
</body>
|
|
190
|
+
</html>
|
|
88
191
|
```
|
|
89
192
|
```
|
|
90
193
|
|
1
Markdownでコードを上げ直しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
|
|
11
11
|
### 該当のソースコード
|
|
12
12
|
|
|
13
|
+
```html
|
|
13
|
-
|
|
14
|
+
<header>
|
|
14
15
|
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
|
|
15
16
|
<div class="container-fluid">
|
|
16
17
|
<a class="navbar-brand text-white" href="#">Bootstrap</a>
|
|
@@ -85,6 +86,7 @@
|
|
|
85
86
|
</div>
|
|
86
87
|
</div>
|
|
87
88
|
```
|
|
89
|
+
```
|
|
88
90
|
|
|
89
91
|
### 試したこと
|
|
90
92
|
|