-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsakura_fubuki.html
159 lines (138 loc) · 5.61 KB
/
sakura_fubuki.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
<!DOCTYPE html>
<html lang="ja">
<!-- サイトに関する設定事項を記述します -->
<head id="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/page_top.js" defer></script>
<!-- 部分ファイルを読み込む -->
<script src="include.js"></script>
<!-- 桜吹雪の効果の為のスタイルシートを読み込む -->
<link rel="stylesheet" href="hanabira.css">
<!-- 桜吹雪の効果の為のJavaScriptを読み込む -->
<script src="hanabira.js" defer></script>
</head>
<!-- 表示したい内容・出し物・コンテンツを記述します -->
<body class="top">
<!-- ヘッダー(サイト名) -->
<header>
<a href="index.html">さくら</a>
</header>
<!-- ナビゲーションメニュー -->
<nav id="navigation"></nav>
<script>include("navigation")</script>
<!-- 主要なコンテンツ -->
<main>
<!-- ヒーローイメージ -->
<figure class="hero">
<img src="images/sakura.webp" alt="青空と咲き誇る小彼岸桜" class="oval">
</figure>
<!-- タイトル(キャッチフレーズ) -->
<h1 class="sakura_catch_phrase">
<div class="lefted text">扇にて</div>
<div class="centered text">酒くむかげや</div>
<div class="righted text">ちる櫻</div>
</h1>
<!-- サブタイトル -->
<p class="sub_title">
<img src="images/circle.svg" alt=""><br>
<a href="https://ja.wikipedia.org/wiki/%E6%9D%BE%E5%B0%BE%E8%8A%AD%E8%95%89">松尾芭蕉</a>
</p>
<section>
<h2>さくらを詠んだ俳句</h2>
<article>
<a href="https://ja.wikipedia.org/wiki/%E5%B0%8F%E6%9E%97%E4%B8%80%E8%8C%B6">
<figure>
<img src="images/ipponzakura.webp" alt="" class="circular">
</figure>
<h3>穀つぶし 櫻の下に くらしけり</h3>
<cite>小林一茶</cite>
</a>
</article>
<article>
<a href="https://ja.wikipedia.org/wiki/%E5%8A%A0%E8%B3%80%E5%8D%83%E4%BB%A3%E5%A5%B3">
<figure>
<img src="images/aozora_to_sakura.webp" alt="" class="triangle">
</figure>
<h3>影は滝 空は花なり 糸桜</h3>
<cite>加賀千代女</cite>
</a>
</article>
<article>
<a href="https://ja.wikipedia.org/wiki/%E9%AB%98%E6%B5%9C%E8%99%9A%E5%AD%90">
<figure>
<img src="images/yamazakura.webp" alt="" class="square">
</figure>
<h3>徐ろに 眼を移しつつ 初桜</h3>
<cite>高浜虚子</cite>
</a>
</article>
<article>
<a href="https://ja.wikipedia.org/wiki/%E6%AD%A3%E5%B2%A1%E5%AD%90%E8%A6%8F">
<figure>
<img src="images/sakura_tabidachi.webp" alt="" class="rhombus">
</figure>
<h3>観音の 大悲の桜 咲きにけり</h3>
<cite>正岡子規</cite>
</a>
</article>
<article>
<a href="https://ja.wikipedia.org/wiki/%E5%AE%A4%E7%94%9F%E7%8A%80%E6%98%9F">
<figure>
<img src="images/mizuho_sakura.webp" alt="" class="diamond">
</figure>
<h3>さくら木に さくら一杯に つきにけり</h3>
<cite>室生犀星</cite>
</a>
</article>
<article>
<a href="https://ja.wikipedia.org/wiki/%E6%B3%89%E9%8F%A1%E8%8A%B1">
<figure>
<img src="images/sakura_mejiro.webp" alt="" class="heart">
</figure>
<h3>町内の 鶯来たり 朝櫻</h3>
<cite>泉鏡花</cite>
</a>
</article>
</section>
</main>
<!-- 写真の出典は ぱくたそ https://www.pakutaso.com/ より-->
<!-- 作者名を右寄せに -->
<style>
section h2::before, section h3::before { content: "🌸 "; }
section h2::after, section h3::after { content: " 🌸"; }
cite { display: block; text-align: right; font-size: 12px; }
footer { background: var(--sakurairo); }
</style>
<!-- フッター -->
<footer>© さくら</footer>
</body>
</html>