質問編集履歴
1
コード全体を貼り付けました。また、サイトのリンクを貼ってゴールを明確にしました。よろしくお願いします。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,23 +1,56 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
3
|
a要素のサイズ変更とヘッダーの範囲が変わった時に同じようにレスポンシブさせる方法がわかりません。初心者であり、初めて作るwebなので簡単な言葉で教えて頂けると助かります。
|
|
4
|
+
[リンク内容](http://www.nihonmatsu.co.jp/) このサイトのヘッダーのようにメニューボタンからさらに詳しいメニューボタンが表示されるのがゴールです。>
|
|
4
5
|
|
|
5
6
|
重ねてお聞きしたいのですがが、jQueryでa要素の下にa要素を出すにはcssでa要素を作り display: none;にしてからfadeInメソッドを用いて表示するのでしょうか？
|
|
6
7
|
a要素の下にa要素を作る方法もわかりません。
|
|
7
8
|
|
|
8
9
|
|
|
9
10
|
### 該当のソースコード
|
|
10
|
-
|
|
11
|
+
```html
|
|
12
|
+
コード
|
|
13
|
+
<!DOCTYPE html>
|
|
14
|
+
<html>
|
|
15
|
+
<head>
|
|
16
|
+
<meta charset="utf-8">
|
|
17
|
+
<title>（株）〇〇</title>
|
|
18
|
+
<link rel="stylesheet" href="stylesheet.css">
|
|
19
|
+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
|
|
20
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
|
|
21
|
+
<script type="text/javascript"></script>
|
|
22
|
+
<script src="sample.js" type="text/jscript"></script>
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
<header>
|
|
26
|
+
<div class="header-container">
|
|
27
|
+
<div class="heder-logo">
|
|
28
|
+
</div>
|
|
29
|
+
<div class="header-popup">
|
|
11
|
-
<ul>
|
|
30
|
+
<ul>
|
|
12
|
-
<li><a href="#" class="company-botton">（株）
|
|
31
|
+
<li><a href="#" class="company-botton">（株）〇〇</a></li>
|
|
13
32
|
<li><a href="#" class="botton">〇〇の強み</a></li>
|
|
14
33
|
<li><a href="#" class="bototn">サービス内容</a></li>
|
|
15
34
|
<li><a href="#" class="botton">会社概要</a></li>
|
|
16
35
|
<li><a href="#" class="botton">採用情報</a></li>
|
|
17
36
|
<li><a href="#" class="botton">お問い合わせ</a></li>
|
|
18
37
|
</ul>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</header>
|
|
19
41
|
|
|
42
|
+
```
|
|
20
|
-
css
|
|
43
|
+
```css
|
|
44
|
+
コード
|
|
45
|
+
.title{
|
|
46
|
+
color: #02ccab;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
body{
|
|
50
|
+
margin: 0;
|
|
51
|
+
font-family: "monospace";
|
|
52
|
+
}
|
|
53
|
+
|
|
21
54
|
header{
|
|
22
55
|
background-color: #228b22;
|
|
23
56
|
display: 0.7;
|
|
@@ -27,6 +60,9 @@
|
|
|
27
60
|
top: 0;
|
|
28
61
|
z-index: 10;
|
|
29
62
|
}
|
|
63
|
+
header a{
|
|
64
|
+
width: auto;
|
|
65
|
+
}
|
|
30
66
|
|
|
31
67
|
.header-container ul li{
|
|
32
68
|
display: inline;
|
|
@@ -47,11 +83,9 @@
|
|
|
47
83
|
background: #006400;
|
|
48
84
|
color: white;
|
|
49
85
|
}
|
|
50
|
-
|
|
86
|
+
```
|
|
51
87
|
### 試したこと
|
|
52
88
|
|
|
53
89
|
a要素にクラスをつけたり、範囲を１００％にしましたがサイズ変更とレスポンシブ対応は出来ませんでした。
|
|
54
90
|
|
|
55
|
-
### 補足情報（FW/ツールのバージョンなど）
|
|
91
|
+
### 補足情報（FW/ツールのバージョンなど）
|
|
56
|
-
|
|
57
|
-
ここにより詳細な情報を記載してください。
|