-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
309 lines (290 loc) · 9.25 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
<!DOCTYPE html>
<html lang="ja">
<!-- サイトに関する設定事項を記述します -->
<head>
<!-- 文字コードの指定 -->
<meta charset="utf-8">
<!-- ページのタイトル -->
<title>WAVE</title>
<!-- ビューポート(視点)の指定 -->
<meta name="viewport" content="width=device-width">
<!-- ファビコンの指定 https://ao-system.net/favicongenerator/ -->
<link rel="icon"
href="images/favicon.ico"
type="image/ico">
<link rel="apple-touch-icon"
href="images/apple-touch-icon-180x180.png"
type="image/png"
sizes="180x180">
<!-- 検索時に表示される、ウェブサイトの要約文 -->
<meta name="description" content="概ね80文字前後のサイトの
紹介文が、検索時に表示されます。">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Yuji+Boku&display=swap">
<!-- Font Awesome -->
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v6.7.1/css/all.css">
<!-- Reset CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@acab/[email protected]/index.min.css">
<!-- 自分で作ったスタイルシート -->
<link rel="stylesheet" href="stylesheets/master.css">
<!-- 文字を煌めかせる為のJavaScript-->
<script src="javascripts/glow_text.js" defer></script>
<!-- 先頭へ戻るボタンの為のJavaScript -->
<script src="javascripts/page_top.js" defer></script>
</head>
<!-- 表示したい内容・出し物・コンテンツを記述します -->
<body class="top">
<!-- ヘッダー(サイト名) -->
<header>
<a href="index.html">WAVE</a>
</header>
<!-- ナビゲーションメニュー -->
<nav>
<!-- fa-lgは1.33倍、la-2xは2倍の大きさ、fa-fwは横に少し間隔が空く -->
<!-- 2021年最新版、Font Awesome アイコンの使い方と便利な機能のまとめ -->
<!-- https://coliss.com/articles/build-websites/operation/work/font-awesome-guide-and-useful-tricks.html -->
<ul>
<li>
<a href="#recent">
<i class="fa-regular fa-newspaper"></i>
最新記事
</a>
</li>
<li>
<a href="about.html">
<i class="fa-brands fa-pagelines fa-lg fa-fw"></i>
サイトについて
</a>
</li>
<li>
<a href="contact.html">
<i class="fa-solid fa-envelope fa-lg fa-fw"></i>
お問い合わせ
</a>
</li>
</ul>
</nav>
<!-- 主要なコンテンツ -->
<main>
<!-- ヒーローイメージ -->
<figure class="hero">
<img src="images/blue_sea_1920x1280.webp" alt="世界で一番の観光地">
</figure>
<!-- 文字が煌めくタイトル(キャッチフレーズ) -->
<h1 class="glow text">
Best place to visit in the world
</h1>
<!-- サブタイトル -->
<p class="sub_title">
<img src="images/circle.svg" alt=""><br>
<a href="https://github.com/Atelier-Mirai/wave_example" target="_blank">爽やかな青い空と海</a>
</p>
<!-- 記事一覧 -->
<section id="recent">
<h2 class="title">最新記事</h2>
<article>
<a href="post01.html">
<figure>
<img src="images/note.webp" alt="">
</figure>
<h3>スケッチが楽しくなるノート</h3>
</a>
</article>
<article>
<a href="post02.html">
<figure>
<img src="images/plant.webp" alt="">
</figure>
<h3>緑のアクセントならこれ</h3>
</a>
</article>
<article class="link disable">
<a href="post03.html">
<figure>
<img src="images/items.webp" alt="">
</figure>
<h3>小物と飾り棚の組み合わせ</h3>
</a>
</article>
<article class="link disable">
<a href="post04.html">
<figure>
<img src="images/chair.webp" alt="">
</figure>
<h3>居心地のいい部屋にあるもの</h3>
</a>
</article>
<article class="link disable">
<a href="post05.html">
<figure>
<img src="images/tile.webp" alt="">
</figure>
<h3>カラフルなタイル</h3>
</a>
</article>
<article class="link disable">
<a href="post06.html">
<figure>
<img src="images/recipe.webp" alt="">
</figure>
<h3>美味しいオムレツのレシピ</h3>
</a>
</article>
<article>
<a href="makuranosoushi/index.html">
<figure>
<img src="makuranosoushi/images/haru_s.webp" alt="">
</figure>
<h3>枕草子</h3>
</a>
</article>
<article>
<a href="sakura_fubuki.html">
<figure>
<img src="images/aozora_to_sakura.webp" alt="">
</figure>
<h3>さくらを詠んだ俳句</h3>
</a>
</article>
<article>
<a href="blog.html">
<figure>
<img src="images/blog.webp" alt="">
</figure>
<h3>暦と簡易ブログ</h3>
</a>
</article>
<article>
<a href="box.html">
<figure>
<img src="images/box_sizing.webp" alt="">
</figure>
<h3>Boxモデル練習</h3>
</a>
</article>
<article>
<a href="grid.html">
<figure>
<img src="images/grid_layout.webp" alt="">
</figure>
<h3>グリッドレイアウト練習</h3>
</a>
</article>
<article>
<a href="css_layer.html">
<figure>
<img src="images/css_layer.webp" alt="">
</figure>
<h3>CSSレイヤ練習</h3>
</a>
</article>
<article>
<a href="js_aisatsu.html">
<figure>
<img src="images/js.webp" alt="">
</figure>
<h3>JavaScript練習</h3>
</a>
</article>
<article>
<a href="gottani.html">
<figure>
<img src="images/gottani.webp" alt="">
</figure>
<h3>ごった煮</h3>
</a>
</article>
<article>
<a href="sample01/index.html">
<figure>
<img src="images/sample01.webp" alt="">
</figure>
<h3>サンプル01</h3>
</a>
</article>
<article>
<a href="sample02/index.html">
<figure>
<img src="images/sample02.webp" alt="">
</figure>
<h3>サンプル02</h3>
</a>
</article>
<article>
<a href="sample03/index.html">
<figure>
<img src="images/sample03.webp" alt="">
</figure>
<h3>サンプル03</h3>
</a>
</article>
<article>
<a href="sample04/index.html">
<figure>
<img src="images/sample04.webp" alt="">
</figure>
<h3>サンプル04</h3>
</a>
</article>
<article>
<a href="sample05/index.html">
<figure>
<img src="images/sample05.webp" alt="">
</figure>
<h3>サンプル05</h3>
</a>
</article>
<article>
<a href="sample06/index.html">
<figure>
<img src="images/sample06.webp" alt="">
</figure>
<h3>サンプル06</h3>
</a>
</article>
</section>
</main>
<!-- フッター -->
<footer>
<!-- ページの先頭にスムーズスクロール -->
<p id="page_top">
<!-- 金色のボタン -->
<a href="#" class="gold button">
<span>
<i class="fa-solid fa-angles-up fa-lg fa-fw"></i>
<span class="computer only">Page Top</span>
</span>
</a>
</p>
<!-- 連絡先 -->
<address>
<!-- 会社名 -->
<p class="company_name">(有) WAVE商会</p>
<!-- 住所 -->
<p class="address">名古屋市美波区美波町三丁目七番三号</p>
<!-- 電話番号 -->
<p class="tel">
<a href="tel:052-373-4649">
<i class="fa-solid fa-phone fa-rotate-90 fa-lg"></i>
052-373-4649
</a>
</p>
<!-- メールアドレス -->
<p class="email">
<a href="mailto:[email protected]">
<i class="fa-regular fa-envelope fa-lg"></i>
</a>
</p>
</address>
<!-- 著作権表示 -->
<p class="copyright">
Copyright © 令和六年 WAVE All rights reserved.
</p>
</footer>
</body>
</html>