質問編集履歴
2
書式の改善
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,13 +3,12 @@
|
|
|
3
3
|
HTML・CSSを独学で勉強しており、現在模写コーディングにチャレンジしています。
|
|
4
4
|
ナビゲーションを作成中に上記のような予期していない空白が発生しました。
|
|
5
5
|
（背景色とボーダーの上側、右側の1pxほどの余白）
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
```html
|
|
8
7
|
<div id="nav">
|
|
9
8
|
<ul class="general">
|
|
10
9
|
<li class="list-title">一般歯科</li>
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
```
|
|
11
|
+
```css
|
|
13
12
|
#body{
|
|
14
13
|
box-sizing: border-box
|
|
15
14
|
}
|
|
@@ -30,6 +29,9 @@
|
|
|
30
29
|
line-height: 40px;
|
|
31
30
|
}
|
|
32
31
|
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
|
|
33
35
|
CSSのリセット用には
|
|
34
36
|
http://html5doctor.com/html-5-reset-stylesheet/
|
|
35
37
|
を使用しています。
|
|
@@ -39,14 +41,9 @@
|
|
|
39
41
|
background-colorのプロパティはボーダーの内側までの範囲を指定していると思っていたので原因になるような箇所について全く見当がつかず困惑しています。
|
|
40
42
|
|
|
41
43
|
よろしくお願いします。
|
|
42
|
-
```Html
|
|
43
|
-
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ExmveZq" data-user="hare99" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
|
|
44
|
-
<span>See the Pen <a href="https://codepen.io/hare99/pen/ExmveZq">
|
|
45
|
-
該当のページ</a> by Tomo (<a href="https://codepen.io/hare99">@hare99</a>)
|
|
46
|
-
on <a href="https://codepen.io">CodePen</a>.</span>
|
|
47
|
-
</p>
|
|
48
|
-
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
|
|
49
|
-
```
|
|
50
44
|
|
|
45
|
+
[Go to codepen](https://codepen.io/hare99/pen/ExmveZq)
|
|
46
|
+
|
|
47
|
+
|
|
51
48
|
質問にありました通りcodepenにアップロードしましたので見ていただけると幸いです。
|
|
52
49
|
また該当のページについて現在製作の途中であること、また初めての模写であるため見づらい点や多数不自然な点、改善すべき点があるかと思いますが、今回の質問にかんする箇所だけを見ていただけると幸いです。
|
1
コードのをcodepenを通してシェアしました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -38,4 +38,15 @@
|
|
|
38
38
|
|
|
39
39
|
background-colorのプロパティはボーダーの内側までの範囲を指定していると思っていたので原因になるような箇所について全く見当がつかず困惑しています。
|
|
40
40
|
|
|
41
|
-
よろしくお願いします。
|
|
41
|
+
よろしくお願いします。
|
|
42
|
+
```Html
|
|
43
|
+
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ExmveZq" data-user="hare99" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
|
|
44
|
+
<span>See the Pen <a href="https://codepen.io/hare99/pen/ExmveZq">
|
|
45
|
+
該当のページ</a> by Tomo (<a href="https://codepen.io/hare99">@hare99</a>)
|
|
46
|
+
on <a href="https://codepen.io">CodePen</a>.</span>
|
|
47
|
+
</p>
|
|
48
|
+
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
質問にありました通りcodepenにアップロードしましたので見ていただけると幸いです。
|
|
52
|
+
また該当のページについて現在製作の途中であること、また初めての模写であるため見づらい点や多数不自然な点、改善すべき点があるかと思いますが、今回の質問にかんする箇所だけを見ていただけると幸いです。
|