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

質問編集履歴

3

現在のスクショを追加いたしました。

2018/01/13 00:40

投稿

aazzkk
aazzkk

スコア15

title CHANGED
File without changes
body CHANGED
@@ -14,6 +14,8 @@
14
14
  CSS下部タグの追加、現在の状態のスクショを載せました。
15
15
  引き続きよろしくお願いいたします。
16
16
 
17
+ ![イメージ説明](108a24d7afce075487be8a98985e26bf.jpeg)
18
+
17
19
  ●HTML●
18
20
  ```ここに言語を入力
19
21
  <!--サイドバー-->

2

ありがとうございます。だいぶ見栄えがよくなりました。触れると背景色の変更タグ(body全体)を追加いたしましたのでよろしくお願いいたします。

2018/01/13 00:40

投稿

aazzkk
aazzkk

スコア15

title CHANGED
File without changes
body CHANGED
@@ -5,11 +5,15 @@
5
5
  色々試してみても微妙にズレ(リンクの背景色が枠線からはみ出したり、罫線が枠線からはみ出る)が生じてしまい、うまく出来ませんでした。どなたか、良い方法がありましたら教えてください。
6
6
  日々勉強しながら作っています。おかしい記述なども指摘いただければ幸いです。よろしくお願いいたします。
7
7
 
8
- 1/21追記
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

編集いたしました。お手数ですが本文追記もご確認いただけますと幸いです。よろしくお願いいたします。

2018/01/13 00:35

投稿

aazzkk
aazzkk

スコア15

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: 170px;
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: 170px;
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: 150px;
50
+ width: 190px;
45
51
  text-align: center;
46
52
  }
47
53
  /*ここまでサイドバー*/