-
Notifications
You must be signed in to change notification settings - Fork 0
/
scrollbar_gutter_example_02.html
75 lines (64 loc) · 2.62 KB
/
scrollbar_gutter_example_02.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
<!doctype html>
<meta charset="utf-8">
<title>CSS scrollbar-gutter example 03</title>
<link rel="author" title="Felipe Erias" href="mailto:[email protected]" />
<style>
body {
--grey20: rgb(18.94% 18.94% 18.94%);
--grey40: rgb(36.96% 36.95% 36.95%);
--grey60: rgb(56.69% 56.69% 56.68%);
--grey80: rgb(77.78% 77.78% 77.77%);
}
.row {
writing-mode: vertical-rl;
display: inline-flex;
flex-direction: column;
border: 1px solid var(--grey20);
}
.divider {
scrollbar-gutter: stable both-edges;
display: flex;
overflow: hidden;
flex-direction: row;
justify-content: space-between;
width: 2em;
height: 10em;
object-fit: cover;
margin-block-start: .5em;
margin-block-end: .5em;
border: 1px solid var(--grey60);
align-items: center;
}
.container {
overflow: auto;
scrollbar-gutter: stable both-edges;
width: 20em;
min-height: 10em;
border: 1px solid var(--grey40);
width: 16.55em;
height: 10em;
}
</style>
<body>
<div class="row">
<div class="divider">
<div>※</div>
<div>※</div>
</div>
<div class="container vertical">
以呂波耳本部止千利奴流乎和加餘多連曽津祢那良牟有為能於久耶万計不己衣天阿佐伎喩女美之恵比毛勢須
</div>
<div class="divider">
<div>※</div>
<div>※</div>
</div>
<div class="container vertical">
いろは歌とは、仮名を重複させずに使って作られた47字の誦文のこと。七五調の韻文となっており、のちに手習いの手本として広く受容され、近代にいたるまで用いられた。転じて「いろは」は初歩に習得しておくべき事という意味も持つ。またその仮名の配列は字母表の「いろは順」として、中世から近世の辞書類や番号付け等に広く利用された[1]。
七五調の歌謡である今様の形式で、仮名を重複させることなく作られている。天禄元年（970年）成立の『口遊』（源為憲著）は、同じく仮名を重複させない誦文天地の詞と大為爾の歌については記すが、いろは歌には触れておらず、またいろは歌を記した文献としては最古とされる『金光明最勝王経音義』（こんこうみょうさいしょうおうきょうおんぎ）は、承暦3年（1079年）の成立であることから、いろは歌は10世紀末から11世紀中葉までの間に成立したものとみられる。
</div>
<div class="divider">
<div>※</div>
<div>※</div>
</div>
</div>
</body>