-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgottani.html
311 lines (285 loc) · 12 KB
/
gottani.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
310
311
<!DOCTYPE html>
<html lang="ja">
<!-- サイトに関する設定事項を記述します -->
<head>
<!-- 文字コードの指定 -->
<meta charset="utf-8">
<!-- ページのタイトル -->
<title>ごった煮</title>
<!-- Font Awesome -->
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v6.7.1/css/all.css">
<!-- スタイル設定 -->
<style>
/* 色の定義
---------------------------------------------------------------------*/
@import "stylesheets/_colors.css";
/* ナビゲーションメニュー
---------------------------------------------------------------------*/
/* ボタンの為のCSSを読み込む */
@import "stylesheets/_button.css";
ul {
list-style: none;
display: grid;
grid-auto-flow: column;
}
/* 余白を無しに （リセットCSS）
---------------------------------------------------------------------*/
* { margin: 0; }
/* section の装飾
---------------------------------------------------------------------*/
section { height: 50vh; }
/* グラデーションの例 */
/* https://developer.mozilla.org/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients */
section:nth-of-type(1) {
/* 線形グラデーション (Linear Gradient) */
background: linear-gradient(to right, #fef4f4, #f19072); }
section:nth-of-type(2) {
/* 縦方向の線形グラデーション */
background: linear-gradient(to bottom, var(--sakurairo), var(--nanohanairo)); }
section:nth-of-type(3) {
/* 複数色の線形グラデーション */
background: linear-gradient(-45deg, #ff7f50 15%, #1e90ff 30%, #32cd32 45%, #ff1493 60%); }
section:nth-of-type(4) {
/* 放射状グラデーション (Radial Gradient) */
background: radial-gradient(circle, var(--momijiiro), var(--sakurairo)); }
section:nth-of-type(5) {
/* 楕円形のグラデーション */
background: radial-gradient(
ellipse farthest-corner at 50% 80%,
red,
yellow 10%,
#1e90ff 50%,
beige); }
section:nth-of-type(6) {
/* 扇形のグラデーション */
background: conic-gradient(
at 0% 30%,
red 10%,
yellow 30%,
#1e90ff 50%); }
/* スムーススクロールの為に
---------------------------------------------------------------------*/
html {
scroll-behavior: smooth; /* ゆっくり遷移する */
scroll-padding-top: 100px; /* 上にヘッダーの高さ100px分だけ空ける */
overflow: scroll;
}
/* ヘッダーとフッターは必ず表示されるようにする
---------------------------------------------------------------------*/
header,
footer {
position: sticky;
/* スクロール位置に達した時に固定される */
top: 0;
background: var(--sakurairo);
padding: 10px;
z-index: 1; /* 他の要素の上に表示されるように */
list-style: none;
display: grid;
grid-auto-flow: column;
}
footer {
/* スクロール位置に達した時に固定される */
bottom: 0;
text-align: center;
}
/* グリッドレイアウト
---------------------------------------------------------------------*/
body {
display: grid;
grid-template:
"header " 100px
"main " auto
"footer " 45px /
auto;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }
/* ぴたっと止まるようにする (不要ならコメントアウト)
---------------------------------------------------------------------*/
main {
height: calc(100vh - 100px - 45px);
scroll-snap-type: y mandatory;
overflow: scroll;
}
section { scroll-snap-align: start; }
</style>
</head>
<!-- 表示したい内容・出し物・コンテンツを記述します -->
<body>
<!-- ヘッダー(サイト名) -->
<header>
<button type="button" name="button">
<a href="index.html">戻る</a>
</button>
<!-- ナビゲーションメニュー -->
<nav>
<ul>
<!-- ページ内リンク #section1へ跳ぶ -->
<li><a href="#section1" class="simple button">
<span>Section 1</span></a></li>
<li><a href="#section2" class="gradient button">
<span>Section 2</span></a></li>
<li><a href="#section3" class="gold button">
<span>Section 3</span></a></li>
<li><a href="#section4" class="circle button">
<i class="fas fa-arrow-down"></i></a></li>
<li><button class="gold urushi">
<a href="#section5">
<span>Section 5</span></a></button></li>
<li><a href="#section6" class="fuwafuwa button">Section 6</a></li>
</ul>
</nav>
</header>
<!-- 主要なコンテンツ -->
<main>
<section id="section1">
<h1>ごった煮</h1>
<p>
いろいろ紹介しています。
<ul style="list-style-type: '\1F338';">
<li>「🌸」印の箇条書き項目</li>
<li>様々なボタン</li>
<li>固定ヘッダーとフッター</li>
<li>様々なグラデーション</li>
<li>スムーズスクロールとぴたっとスクロール</li>
<li>縦書き</li>
</ul>
</p>
</section>
<section id="section2" style="writing-mode: vertical-rl; block-size: 100%;">
<h2>第二章</h2>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波<br>
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
</section>
<section id="section3"><h2>Section 3</h2></section>
<section id="section4"><h2>Section 4</h2></section>
<section id="section5"><h2>Section 5</h2></section>
<section id="section6"><h2>Section 6</h2></section>
<section>
<h2>
<a href="https://qiita.com/shiozaki/items/0e42e101b7483df13c8f">
✨安い！！お得！！激安CSS！！✨
</a>
</h2>
<style>
@import url(https://fonts.googleapis.com/css?family=Poppins:700);
.price {
color: #c70506;
text-shadow: 2px 0 0 #fff,
0 2px 0 #fff,
-2px 0 0 #fff,
0 -2px 0 #fff,
5px 4px 3px #0008;
font-weight: bold;
font-family: Poppins;
letter-spacing: -3px;
}
.price1 {
font-size: 78px;
margin-right: -5px;
font-style: italic;
}
.price2 {
font-size: 59px;
margin-right: 10px;
font-style: italic;
}
.yen {
font-size: 40px;
}
</style>
<span class="price">
<span class="price1">19</span><span class="price2">,800</span>
<span class="yen">円</span>
</span>
<details>
<summary>ソースコードを見る</summary>
<pre>
<code>
<span class="price">
<span class="price1">19</span><span class="price2">,800</span>
<span class="yen">円</span>
</span>
@import url(https://fonts.googleapis.com/css?family=Poppins:700);
.price {
color: #c70506;
text-shadow: 2px 0 0 #fff,
0 2px 0 #fff,
-2px 0 0 #fff,
0 -2px 0 #fff,
5px 4px 3px #0008;
font-weight: bold;
font-family: Poppins;
letter-spacing: -3px;
}
.price1 {
font-size: 78px;
margin-right: -5px;
font-style: italic;
}
.price2 {
font-size: 59px;
margin-right: 10px;
font-style: italic;
}
.yen {
font-size: 40px;
}
</code>
</pre>
</details>
<h2>
<a href="https://qiita.com/nishihara_zari/items/d893650b4c6484abd2f1">
HTML + CSSでリアルなタピオカを作る
</a>
</h2>
<img src="images/tapioca.png" alt="">
<h2>
<a href="https://qiita.com/nishihara_zari/items/d7dad5fbe2eb81301938">
HTML + CSSでリアルな目玉焼きを作る
</a>
</h2>
<img src="images/sunny-side-up-fried-eggs.png" alt="">
<h2>
<a href="https://qiita.com/ichimonji_haji/items/b6362aa808ae351affdc">
リアルな眼球を描く。HTMLとCSSだけで。
</a>
</h2>
<img src="images/eye.png" alt="">
<h2>
<a href="https://www.typing.com/student/lessons">Typing Lessons </a>
</h2>
<p>
「Ｆ」「Ｊ」のホームポジションから始まり、数字や記号に至るまで滑らかに入力できるよう練習できるサイトです。
</p>
<br>
<p>
タイピングを習得する利点は以下の通りです。
</p>
<ol>
<li>効率的な作業: タイピング速度が向上することで、文書作成やデータ入力が迅速に行えます。</li>
<li>コミュニケーションの向上: メールやチャットなど、オンラインでのコミュニケーションがスムーズになります。</li>
<li>集中力の向上: 視線を画面に向けたままタイピングができるため、書くことに集中しやすくなります。</li>
<li>職業的なスキル: 多くの職場で求められる基本的なスキルであり、就職やキャリアアップに役立ちます。</li>
<li>学習の効率化: レポート作成や研究の際に、情報を速やかにまとめることができ、学習効果が向上します。</li>
<li>自己表現の向上: アイデアや考えを素早く文章にすることで、自己表現がしやすくなります。</li>
<li>コードの迅速な入力: プログラミングではコードを書く速度が重要です。</li>
<li>エラーチェックの効率化: タイピングスピードが向上すると、コードの修正やデバッグ作業が迅速に行えます。</li>
<li>文法の理解: タイピングを通じてプログラミング言語の文法や構文に慣れることができます。</li>
<li>アルゴリズムの実装: 複雑なアルゴリズムを実装する際、速やかにコードを書くことができるため、試行錯誤がしやすくなります。</li>
<li>プロジェクトの効率化: チームでの共同作業やコードレビューがスムーズになり、プロジェクト全体の効率が向上します。</li>
</ol>
</h2>
</section>
<section>
</section>
</main>
<footer>
© WAVE
</footer>
</body>
</html>