質問編集履歴
3
現在のスクショを追加いたしました。
title
CHANGED
File without changes
|
body
CHANGED
@@ -14,6 +14,8 @@
|
|
14
14
|
CSS下部タグの追加、現在の状態のスクショを載せました。
|
15
15
|
引き続きよろしくお願いいたします。
|
16
16
|
|
17
|
+

|
18
|
+
|
17
19
|
●HTML●
|
18
20
|
```ここに言語を入力
|
19
21
|
<!--サイドバー-->
|
2
ありがとうございます。だいぶ見栄えがよくなりました。触れると背景色の変更タグ(body全体)を追加いたしましたのでよろしくお願いいたします。
title
CHANGED
File without changes
|
body
CHANGED
@@ -5,11 +5,15 @@
|
|
5
5
|
色々試してみても微妙にズレ(リンクの背景色が枠線からはみ出したり、罫線が枠線からはみ出る)が生じてしまい、うまく出来ませんでした。どなたか、良い方法がありましたら教えてください。
|
6
6
|
日々勉強しながら作っています。おかしい記述なども指摘いただければ幸いです。よろしくお願いいたします。
|
7
7
|
|
8
|
-
1/
|
8
|
+
1/12追記
|
9
9
|
先ほど試した方法(<li>にborderをつける)でcssを編集いたしました。
|
10
10
|
罫線が重なり、触れたときの背景にもズレが生じてます。
|
11
11
|
先に申し上げました方法とは違ってますが、修正して直せましたらこの方法でいきたいと思ってます。よろしくお願いします。
|
12
12
|
|
13
|
+
1/13追記
|
14
|
+
CSS下部タグの追加、現在の状態のスクショを載せました。
|
15
|
+
引き続きよろしくお願いいたします。
|
16
|
+
|
13
17
|
●HTML●
|
14
18
|
```ここに言語を入力
|
15
19
|
<!--サイドバー-->
|
@@ -29,6 +33,26 @@
|
|
29
33
|
|
30
34
|
●CSS●
|
31
35
|
```ここに言語を入力
|
36
|
+
body {
|
37
|
+
font-size: 80%;
|
38
|
+
color: rgb(120,120,100);
|
39
|
+
font-family: '游ゴシック体', 'Yu Gothic', 'YuGothic', 'MS ゴシック', sans-serif;
|
40
|
+
font-weight: 500;
|
41
|
+
}
|
42
|
+
|
43
|
+
a {
|
44
|
+
text-decoration: none;
|
45
|
+
color: rgb(63,63,53);
|
46
|
+
}
|
47
|
+
|
48
|
+
a:hover {
|
49
|
+
background-color: rgb(215,215,207);
|
50
|
+
}
|
51
|
+
|
52
|
+
p {
|
53
|
+
margin:0;
|
54
|
+
}
|
55
|
+
|
32
56
|
/*ここからサイドバー*/
|
33
57
|
#sidebar {
|
34
58
|
float: right;
|
@@ -50,5 +74,8 @@
|
|
50
74
|
width: 190px;
|
51
75
|
text-align: center;
|
52
76
|
}
|
77
|
+
.sidebar-list li + li{
|
78
|
+
border-top: none;
|
79
|
+
}
|
53
80
|
/*ここまでサイドバー*/
|
54
81
|
```
|
1
編集いたしました。お手数ですが本文追記もご確認いただけますと幸いです。よろしくお願いいたします。
title
CHANGED
File without changes
|
body
CHANGED
@@ -5,6 +5,11 @@
|
|
5
5
|
色々試してみても微妙にズレ(リンクの背景色が枠線からはみ出したり、罫線が枠線からはみ出る)が生じてしまい、うまく出来ませんでした。どなたか、良い方法がありましたら教えてください。
|
6
6
|
日々勉強しながら作っています。おかしい記述なども指摘いただければ幸いです。よろしくお願いいたします。
|
7
7
|
|
8
|
+
1/21追記
|
9
|
+
先ほど試した方法(<li>にborderをつける)でcssを編集いたしました。
|
10
|
+
罫線が重なり、触れたときの背景にもズレが生じてます。
|
11
|
+
先に申し上げました方法とは違ってますが、修正して直せましたらこの方法でいきたいと思ってます。よろしくお願いします。
|
12
|
+
|
8
13
|
●HTML●
|
9
14
|
```ここに言語を入力
|
10
15
|
<!--サイドバー-->
|
@@ -27,7 +32,7 @@
|
|
27
32
|
/*ここからサイドバー*/
|
28
33
|
#sidebar {
|
29
34
|
float: right;
|
30
|
-
width:
|
35
|
+
width: 210px;
|
31
36
|
}
|
32
37
|
.sidebar-list {
|
33
38
|
padding: 0;
|
@@ -35,13 +40,14 @@
|
|
35
40
|
}
|
36
41
|
.sidebar-list li {
|
37
42
|
list-style: none;
|
38
|
-
width:
|
43
|
+
width: 210px;
|
44
|
+
border: dotted 1px rgb(215,215,207);
|
39
45
|
}
|
40
46
|
.sidebar-list a {
|
41
47
|
display: inline-block;
|
42
48
|
padding: 10px;
|
43
49
|
margin: 0;
|
44
|
-
width:
|
50
|
+
width: 190px;
|
45
51
|
text-align: center;
|
46
52
|
}
|
47
53
|
/*ここまでサイドバー*/
|