質問編集履歴
3
追記して写真を追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -233,4 +233,12 @@
|
|
|
233
233
|
Googlechromeのデベロッパーツールからです。
|
|
234
234
|
下記のように確認しました。
|
|
235
235
|
|
|
236
|
-
ブラウザの違いなどで誤差などはあるのでしょうか?
|
|
236
|
+
ブラウザの違いなどで誤差などはあるのでしょうか?
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
k4aさん、現在Googlechromeのデベロッパーツールにてレスポンシブの画面から直接1100pxを記入。
|
|
240
|
+
任意通りのpxで切り変わっていることを確認できました。
|
|
241
|
+
下記の画面からです。
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
しかし、1枚目の写真の状況からは1210pxで要素が変わります。
|
2
Googlechromeのデベロッパーツールで確認した旨を記載
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -227,4 +227,10 @@
|
|
|
227
227
|
});
|
|
228
228
|
}
|
|
229
229
|
|
|
230
|
-
```
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
k4aさんありがとうございます!
|
|
233
|
+
Googlechromeのデベロッパーツールからです。
|
|
234
|
+
下記のように確認しました。
|
|
235
|
+
|
|
236
|
+
ブラウザの違いなどで誤差などはあるのでしょうか?
|
1
HTMLコード追加、Javascriptコードも関係している旨を記載
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -59,4 +59,172 @@
|
|
|
59
59
|
あるのであれば、なぜ違う値で変わるのか知りたい。
|
|
60
60
|
|
|
61
61
|
### 解決したいこと
|
|
62
|
-
・任意のpxで切り替えたい
|
|
62
|
+
・任意のpxで切り替えたい
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
k4aさん質問ありがとうございます!
|
|
67
|
+
こちらがコードになります。
|
|
68
|
+
```
|
|
69
|
+
//HTML
|
|
70
|
+
<!DOCTYPE html>
|
|
71
|
+
<html lang="ja">
|
|
72
|
+
<head>
|
|
73
|
+
<meta charset="UTF-8">
|
|
74
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
75
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
76
|
+
<title>portfolio</title>
|
|
77
|
+
<link rel="stylesheet" href="../css/sample.css">
|
|
78
|
+
</head>
|
|
79
|
+
<body>
|
|
80
|
+
<header class="profile_header">
|
|
81
|
+
<nav id = "header_bar">
|
|
82
|
+
<h1><a href="../profile.html">夢Design</a></h1>
|
|
83
|
+
<ul id="menu_list">
|
|
84
|
+
<li class="menu_active menu_about">About</li>
|
|
85
|
+
<li class="menu_active menu_profile">Profile</li>
|
|
86
|
+
<li class="menu_active menu_skill">Skill</li>
|
|
87
|
+
<li class="menu_active"><a href="sample.html">Portfolio</a></li>
|
|
88
|
+
</ul>
|
|
89
|
+
</nav>
|
|
90
|
+
</header>
|
|
91
|
+
<main>
|
|
92
|
+
<div class="Portfolio_range">
|
|
93
|
+
<section>
|
|
94
|
+
<h2>Portfolio</h2>
|
|
95
|
+
<p>クライアント様(ユーザー様)の夢を実現するためには
|
|
96
|
+
想像で描いているデザインイメージを実現する力が必要です。
|
|
97
|
+
イメージとかけ離れたデザインを制作しても夢は叶わない。
|
|
98
|
+
クライアント様(ユーザー様)の夢を叶えるために
|
|
99
|
+
多種多様のデザインを制作しています。
|
|
100
|
+
</p>
|
|
101
|
+
</section>
|
|
102
|
+
</div>
|
|
103
|
+
<div class="portfolio_group">
|
|
104
|
+
<div class="portfolio_site">
|
|
105
|
+
<h3>webサイト</h3>
|
|
106
|
+
<ul>
|
|
107
|
+
<li class="portfolio site">
|
|
108
|
+
<img src="../imge/start/portfolio_site1.png"
|
|
109
|
+
alt="portfolio_webサイト1番目"
|
|
110
|
+
data-img="portfolio_site1.png">
|
|
111
|
+
</li>
|
|
112
|
+
<li class="portfolio site">
|
|
113
|
+
<img src="../imge/start/portfolio_site2.png"
|
|
114
|
+
alt="portfolio_webサイト2番目"
|
|
115
|
+
data-img="portfolio_site2.png">
|
|
116
|
+
</li>
|
|
117
|
+
</ul>
|
|
118
|
+
</div>
|
|
119
|
+
<div class="portfolio_imge">
|
|
120
|
+
<h3>ヘッダー/サムネイル</h3>
|
|
121
|
+
<ul>
|
|
122
|
+
<li class="portfolio headerimg">
|
|
123
|
+
<img src="../imge/start/portfolio_img1.png"
|
|
124
|
+
alt = "portfolio_header_img1枚目"
|
|
125
|
+
data-img = "portfolio_img1.png">
|
|
126
|
+
</li>
|
|
127
|
+
<li class="portfolio headerimg">
|
|
128
|
+
<img src="../imge/start/portfolio_img2.png"
|
|
129
|
+
alt = "portfolio_header_img2枚目"
|
|
130
|
+
data-img = "portfolio_img2.png">
|
|
131
|
+
</li>
|
|
132
|
+
<li class="portfolio headerimg">
|
|
133
|
+
<img src="../imge/start/portfolio_img3.png"
|
|
134
|
+
alt = "portfolio_header_img3枚目"
|
|
135
|
+
data-img = "portfolio_img3.png">
|
|
136
|
+
</li>
|
|
137
|
+
<li class="portfolio thumbnail">
|
|
138
|
+
<img src="../imge/start/portfolio_img4.png"
|
|
139
|
+
alt = "portfolio_header_img4枚目"
|
|
140
|
+
data-img = "portfolio_img4.png">
|
|
141
|
+
</li>
|
|
142
|
+
<li class="portfolio thumbnail">
|
|
143
|
+
<img src="../imge/start/portfolio_img5.png"
|
|
144
|
+
alt = "portfolio_header_img5枚目"
|
|
145
|
+
data-img = "portfolio_img5.png">
|
|
146
|
+
</li>
|
|
147
|
+
</ul>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
</main>
|
|
151
|
+
<footer>
|
|
152
|
+
<div class="footer_menu">
|
|
153
|
+
<ul>
|
|
154
|
+
<li class="menu_active menu_about">About</li>
|
|
155
|
+
<li class="menu_active menu_profile">Profile</li>
|
|
156
|
+
<li class="menu_active menu_skill">Skill</li>
|
|
157
|
+
<li class="menu_active"><a href="sample.html">Portfolio</a></li>
|
|
158
|
+
</ul>
|
|
159
|
+
</div>
|
|
160
|
+
</footer>
|
|
161
|
+
<script src="../js/sample.js"></script>
|
|
162
|
+
</body>
|
|
163
|
+
</html>
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
少し複雑ではありますが、JavascriptのcreateElement等でmodal_rangeを作成しています。
|
|
167
|
+
そのためHTMLには記載がありません。
|
|
168
|
+
関係する要素のJavascriptコードは下記になります。
|
|
169
|
+
|
|
170
|
+
```ここに言語を入力
|
|
171
|
+
//Javascript
|
|
172
|
+
//モーダルウインドウ
|
|
173
|
+
|
|
174
|
+
const body = document.querySelector("body");
|
|
175
|
+
const portfolio_list = document.querySelectorAll(".portfolio");
|
|
176
|
+
const portfolio_img = document.querySelectorAll(".portfolio img");
|
|
177
|
+
const text_list = {
|
|
178
|
+
portfolio_website_01:
|
|
179
|
+
"年齢層が20代後半～30代前半の出産を終えた主婦。\n淡い雰囲気と合わせるために主張を抑えて全体を小さくまとめた。",
|
|
180
|
+
portfolio_website_02:
|
|
181
|
+
"20代半ば～30代前半、目が疲れやすい人。\n不要なアニメーションを極力無くして要素を真ん中詰めに配置。\n見る人の目も考えてダークモードを実装。モノトーンベースにして目に優しいデザインを意識した。",
|
|
182
|
+
portfolio_webimg_01:
|
|
183
|
+
"フリーで活躍する主夫webデザイナーを想定したヘッダー。\nピンクの背景で可愛らしさと落ち着きのある雰囲気にした。家族との時間を作りたいと悩みを抱えるユーザーを狙ったデザイン。",
|
|
184
|
+
portfolio_webimg_02:
|
|
185
|
+
"背景色を淡くした言葉の主張が強いヘッダー。\n最も伝えたい言葉の背景色を白にして主張をさらに強めた。全体の角を取った丸いデザインにすることで優しさも加えた。主張と優しさのバランスを大事にしたヘッダー。",
|
|
186
|
+
portfolio_webimg_03:
|
|
187
|
+
"運営者のイメージカラーを背景色に採用して、ユーザーの変化や利益を提示したヘッダー。\n緑と白を組み合わせて未来に起こりうる出来事を訴えかけることが狙い。",
|
|
188
|
+
portfolio_webimg_04:
|
|
189
|
+
"年齢層を10代後半～20代前半のユーザー層に的を絞ったサムネイル。\n色調補正を掛けているため文字に立体感を持たせた。Vlog系特有の雰囲気も必要と思い英語部分はオシャレ感を演出。",
|
|
190
|
+
portfolio_webimg_05:
|
|
191
|
+
"試験を控えた学生ユーザー層に向けたサムネイル。\n「方法論について知れる動画」と認識させるために言葉の大きさを強めた。\n色相を赤系統、黄系統、青系統でまとめてユーザーの混乱を防ぐ。"
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
for (let i = 0; i < portfolio_list.length; i++) {
|
|
195
|
+
portfolio_list[i].addEventListener("click",() => {
|
|
196
|
+
body.style.overflow = "hidden";
|
|
197
|
+
//親要素作成_追加
|
|
198
|
+
let modalElement = document.createElement("div");
|
|
199
|
+
let modalwindow = document.createElement("div");
|
|
200
|
+
modalElement.setAttribute("class","modal_range");
|
|
201
|
+
if(portfolio_list[i].classList.contains("site")){
|
|
202
|
+
modalwindow.setAttribute("class","modal_portfolio_site");
|
|
203
|
+
|
|
204
|
+
}else if(portfolio_list[i].classList.contains("thumbnail")) {
|
|
205
|
+
modalwindow.setAttribute("class","modal_portfolio_thumbnail")
|
|
206
|
+
}
|
|
207
|
+
else{
|
|
208
|
+
modalwindow.setAttribute("class","modal_portfolio_img");
|
|
209
|
+
}
|
|
210
|
+
modalElement.appendChild(modalwindow);
|
|
211
|
+
body.insertBefore(modalElement,body.firstChild);
|
|
212
|
+
|
|
213
|
+
//子要素作成_追加
|
|
214
|
+
let modal_sentence = document.createElement("div");
|
|
215
|
+
let modal_text = document.createElement("p");
|
|
216
|
+
let text = Object.entries(text_list);
|
|
217
|
+
modal_text.innerText = text[i][1];
|
|
218
|
+
let modal_img_group = document.createElement("div");
|
|
219
|
+
let modal_img = document.createElement("img");
|
|
220
|
+
modal_img_group.appendChild(modal_img);
|
|
221
|
+
let modal_img_date = portfolio_img[i].getAttribute("data-img");
|
|
222
|
+
modal_img.src = `../imge/start/${modal_img_date}`;
|
|
223
|
+
|
|
224
|
+
modal_sentence.appendChild(modal_text);
|
|
225
|
+
modalwindow.appendChild(modal_sentence);
|
|
226
|
+
modalwindow.appendChild(modal_img_group);
|
|
227
|
+
});
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
```
|