-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (121 loc) · 4.94 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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Raku - ハイブリッドCSSフレームワーク</title>
<link rel="stylesheet" href="raku.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
<script type="module">
import * as Turbo from 'https://cdn.jsdelivr.net/npm/@hotwired/[email protected]/dist/turbo.es2017-esm.js';
document.addEventListener('turbo:load', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block); // この行を修正
});
});
</script>
<script src="sns-share.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
</head>
<body>
<header class="fade-in">
<h1>Rakuフレームワーク</h1>
<p>シンプルで直感的なハイブリッドCSSフレームワーク</p>
</header>
<nav>
<ul>
<li><a href="#features">特徴</a></li>
<li><a href="#getting-started">はじめ方</a></li>
<li><a href="#examples">使用例</a></li>
<li><a href="components-guide.html">コンポーネントガイド</a></li>
<li><a href="test.html">snsで共有など</a></li>
</ul>
</nav>
<main>
<section id="features">
<h2>なぜRakuなのか？</h2>
<p>
Rakuはハイブリッドcssフレームワークであるため、classlessフレームワークとコンポーネントベースのいいとこ取りをしています。シンプルなHTMLタグと少しのクラスやroleで美しいデザインを実現できます。
</p>
<div class="features">
<div class="card">
<h3>直感的なデザイン</h3>
<p>
直感的にスタイルを適用できます。また明瞭なclass名で簡単にスタイルを指定できます。
</p>
</div>
<div class="card">
<h3>レスポンシブ</h3>
<p>デフォルトでレスポンシブデザインに対応しています。</p>
</div>
<div class="card">
<h3>カスタマイズ可能</h3>
<p>簡単にテーマをカスタマイズできます。</p>
</div>
</div>
</section>
<section id="getting-started">
<h2>はじめ方</h2>
<p>
Rakuを使い始めるのは簡単です。以下のCSSファイルをHTMLに追加するだけです
</p>
<pre><code class="language-html">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/linkalls/[email protected]/raku.min.css">
</code></pre>
<p>これだけで、Rakuのスタイルがあなたのウェブサイトに適用されます。</p>
<p>
もしコードハイライトが必要な場合はこちらのコードを追加するだけです
</p>
<pre><code class="language-html">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/linkalls/raku/raku.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</code></pre>
</section>
<section id="examples">
<h2>使用例</h2>
<p>Rakuを使用したシンプルな例を見てみましょう!</p>
<pre><code class="language-html">
<div class="card">
<h3>カードタイトル</h3>
<p>これはカードの内容です。</p>
<button>詳細を見る</button>
</div>
</code></pre>
<div class="card">
<h3>カードタイトル</h3>
<p>これはカードの内容です。</p>
<button>詳細を見る</button>
</div>
</section>
<section>
<h2>今すぐ始めましょう！</h2>
<p>
Rakuフレームワークを使って、あなたのウェブサイトを美しくデザインしましょう。
</p>
<div class="grid">
<button onclick="location.href='examples.html'">
実際の使用例はこちら
</button>
<button onclick="location.href='components-guide.html'">
コンポーネントガイドを見る
</button>
</div>
</section>
</main>
<section>
<share-button></share-button>
</section>
<footer>
<p>© 2024 Raku. All rights reserved.</p>
</footer>
</body>
</html>