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

回答編集履歴

2

ソース修正

2017/03/06 03:15

投稿

ruuusaamarki
ruuusaamarki

スコア470

answer CHANGED
@@ -4,7 +4,6 @@
4
4
  <!DOCTYPE html>
5
5
  <html>
6
6
  <head>
7
- <link rel="stylesheet" href="css/style.css" type="text/css">
8
7
  <title>リンクメニュー</title>
9
8
  <style type="text/css">
10
9
  /*背景色*/

1

ソースのインデントを修正しました

2017/03/06 03:14

投稿

ruuusaamarki
ruuusaamarki

スコア470

answer CHANGED
@@ -1,103 +1,79 @@
1
1
  こんな感じでいかがでしょうか。
2
2
  ```html
3
+
3
4
  <!DOCTYPE html>
4
5
  <html>
5
- <head>
6
- <link rel="stylesheet" href="css/style.css" type="text/css">
7
- <title>リンクメニュー</title>
8
- <style type="text/css">
9
- /*
10
- 背景色
11
- */
12
- body{
13
- background-color: #f6c0d1;
14
- border-color: #f6c0d1;
15
- color: #000000;
16
- text-shadow: 0 1px 0 #eeeeee;
17
- }
18
- /*
19
- タイトル
20
- */
21
- h1{
22
- font-size:1.1em;
23
- letter-spacing: 0.1em;
24
- border-bottom:3px dotted #aaa;
25
- padding-bottom:10px;
26
- margin-bottom:1.5em;
27
- }
28
- /*
29
- ボタンレイアウト&デザイン
30
- */
31
- a.css3button {
32
- font-family: Arial, Helvetica, sans-serif;
33
- /*
34
- font-size: 16px;
35
- */
36
- color: #ffffff;
37
-
38
- padding: 10px 20px;
39
- background-color:#FFFFFF;
40
-
41
- background: -moz-linear-gradient(
42
- top,
43
- #FFFFFF 0%,
44
- #FFFFFF);
45
- background: -webkit-gradient(
46
- linear, left top, left bottom,
47
- from(#FFFFFF),
48
- to(#FFFFFF));
49
- border-radius: 5px;
50
- -moz-border-radius: 5px;
51
- -webkit-border-radius: 5px;
52
- border: 1px solid #04346c;
53
- -moz-box-shadow:
54
- 0px 1px 8px rgba(000,000,000,0.7),
55
- inset 0px 0px 2px rgba(255,255,255,0.7);
56
- -webkit-box-shadow:
57
- 0px 1px 8px rgba(000,000,000,0.7),
58
- inset 0px 0px 2px rgba(255,255,255,0.7);
59
- text-shadow:
60
- 0px -1px 0px rgba(000,000,000,0.4),
61
- 0px 1px 0px rgba(255,255,255,0.3);
62
- text-decoration:none;
63
- display: block;
64
- margin: 20px;
65
- }
66
-
67
- ul.rap{
68
- display: flex;
69
- flex-wrap: wrap;
70
- justify-content: space-around;
71
- }
72
-
73
- /*
74
- ボタンサイズ
75
- */
76
- li.btn{
77
- margin-top: 1em;
78
- margin-bottom: 3em;
79
- text-align: left;
80
- line-height: 0%;
81
- width: 50%;/*btnの数×widthの%が100%以下に設定しないと縦に並ぶ。*/
82
- list-style: none;
83
- }
84
- </style>
85
- </head>
86
- <body>
87
- <h1>スタイルシートを使う</h1>
88
- <p>テスト</p>
89
- <ul class="rap">
90
- <li class="btn">
91
- <a href="http://www.xxx.co.jp/" class="css3button" target="_blank"><img src="img/test1.png"></a>
92
- </li>
93
- <li class="btn">
94
- <a href="http://www.aaa.co.jp/" class="css3button" target="_blank"><img src="img/test2.png"></a>
95
- </li>
96
- </ul>
97
- </body>
6
+ <head>
7
+ <link rel="stylesheet" href="css/style.css" type="text/css">
8
+ <title>リンクメニュー</title>
9
+ <style type="text/css">
10
+ /*背景色*/
11
+ body {
12
+ background-color: #f6c0d1;
13
+ border-color: #f6c0d1;
14
+ color: #000000;
15
+ text-shadow: 0 1px 0 #eeeeee;
16
+ }
17
+ /*タイトル*/
18
+ h1 {
19
+ font-size: 1.1em;
20
+ letter-spacing: 0.1em;
21
+ border-bottom: 3px dotted #aaa;
22
+ padding-bottom: 10px;
23
+ margin-bottom: 1.5em;
24
+ }
25
+ /*ボタンレイアウト&デザイン*/
26
+ a.css3button {
27
+ font-family: Arial, Helvetica, sans-serif;
28
+ /*font-size: 16px;*/
29
+ color: #ffffff;
30
+ padding: 10px 20px;
31
+ background-color: #FFFFFF;
32
+ background: -moz-linear-gradient( top, #FFFFFF 0%, #FFFFFF);
33
+ background: -webkit-gradient( linear, left top, left bottom, from(#FFFFFF), to(#FFFFFF));
34
+ border-radius: 5px;
35
+ -moz-border-radius: 5px;
36
+ -webkit-border-radius: 5px;
37
+ border: 1px solid #04346c;
38
+ -moz-box-shadow: 0px 1px 8px rgba(000, 000, 000, 0.7), inset 0px 0px 2px rgba(255, 255, 255, 0.7);
39
+ -webkit-box-shadow: 0px 1px 8px rgba(000, 000, 000, 0.7), inset 0px 0px 2px rgba(255, 255, 255, 0.7);
40
+ text-shadow: 0px -1px 0px rgba(000, 000, 000, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.3);
41
+ text-decoration: none;
42
+ display: block;
43
+ margin: 20px;
44
+ }
45
+
46
+ ul.rap {
47
+ display: flex;
48
+ flex-wrap: wrap;
49
+ justify-content: space-around;
50
+ }
51
+ /*ボタンサイズ*/
52
+ li.btn {
53
+ margin-top: 1em;
54
+ margin-bottom: 3em;
55
+ text-align: left;
56
+ line-height: 0%;
57
+ width: 50%;
58
+ /*btnの数×widthの%が100%以下に設定しないと縦に並ぶ。*/
59
+ list-style: none;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body>
64
+ <h1>スタイルシートを使う</h1>
65
+ <p>テスト</p>
66
+ <ul class="rap">
67
+ <li class="btn">
68
+ <a href="http://www.xxx.co.jp/" class="css3button" target="_blank"><img src="img/test1.png"></a>
69
+ </li>
70
+ <li class="btn">
71
+ <a href="http://www.aaa.co.jp/" class="css3button" target="_blank"><img src="img/test2.png"></a>
72
+ </li>
73
+ </ul>
74
+ </body>
98
75
  </html>
99
76
 
100
-
101
77
  ```
102
78
 
103
79
  あと画像で指定している部分<img src="img/test1.png" alt="img使う場合はaltも指定するといいです">は