Skip to content

Commit b7f1737

Browse files
kuboshokubosho
authored
Merge pull request #4 from o2project/update-examples
Update example HTML
2 parents 3747e9f + 580b771 commit b7f1737

File tree

1 file changed

+113
-85
lines changed

1 file changed

+113
-85
lines changed

‎dist/examples/index.html‎

Lines changed: 113 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -65,97 +65,125 @@ <h4>見出し：h4</h4>
6565
<li>大河くるみ</li>
6666
<li>亀井美嘉</li>
6767
</ol>
68+
6869
<section>
6970
<h2>見出し：h2</h2>
70-
<p>東西南北は四神をモチーフとしています。</p>
71-
<blockquote cite="https://dot.asahi.com/articles/-/32578?page=1">
72-
<p>
73-
――登場人物には、中国の神話に出てくる霊獣「四神」（東の青龍・南の朱雀・西の白虎・北の玄武）にちなんだ名前が付けられています。このモチーフはどこから来たのですか？
74-
</p>
75-
<p>
76-
高山：東西南北にある学校が舞台なので、4パターンあるものや、四つがセットでバランスよく決まっているものって何だろうと調べている時に「四神」を見つけました。四神はそれぞれにカラーも決まっているので、絶対これにしようと思いました。
77-
</p>
78-
<p>
79-
出典：<a href="https://dot.asahi.com/articles/-/32578?page=1"
80-
>「乃木坂46にとって脅威だなと思うアイドルグループ」を小説に　乃木坂46・高山一実さんインタビュー | AERA
81-
dot. (アエラドット)</a
82-
>
83-
</p>
84-
</blockquote>
85-
<p>四神や方角を東西南北のメンバー名に当てはめると下記の通りになります。</p>
86-
<table>
87-
<caption>
88-
東西南北のメンバーと四神の対応表
89-
</caption>
90-
<thead>
91-
<tr>
92-
<th>四神</th>
93-
<th>方角</th>
94-
<th>名前と四神の対応</th>
95-
</tr>
96-
</thead>
97-
<tbody>
98-
<tr>
99-
<td>青龍</td>
100-
<td>東</td>
101-
<td>東<em>ゆう</em></td>
102-
</tr>
103-
<tr>
104-
<td>白虎</td>
105-
<td>西</td>
106-
<td><em>大河</em>くるみ</td>
107-
</tr>
108-
<tr>
109-
<td>朱雀</td>
110-
<td>南</td>
111-
<td>華<em>鳥</em>蘭子</td>
112-
</tr>
113-
<tr>
114-
<td>玄武</td>
115-
<td>北</td>
116-
<td><em>亀</em>井美嘉</td>
117-
</tr>
118-
</tbody>
119-
</table>
71+
<p>めちゃ×2フライデーでは東西南北に行ってほしい観光スポットを募集しています！</p>
72+
<p>下記のフォームから各項目を記入して投稿してください。</p>
73+
<form>
74+
<label for="name">名前</label>
75+
<input type="text" name="name" id="name" value="" />
76+
<label for="nickname">ニックネーム</label>
77+
<input type="text" name="nickname" id="nickname" value="" />
78+
<fieldset>
79+
<legend>行きたい方角</legend>
80+
<input type="checkbox" name="direction" id="east" value="east" />
81+
<label for="east">東</label>
82+
<input type="checkbox" name="direction" id="west" value="west" />
83+
<label for="west">西</label>
84+
<input type="checkbox" name="direction" id="south" value="south" />
85+
<label for="south">南</label>
86+
<input type="checkbox" name="direction" id="north" value="north" />
87+
<label for="north">北</label>
88+
</fieldset>
89+
<label for="comment">コメント</label>
90+
<textarea name="comment" id="comment"></textarea>
91+
<input type="checkbox" name="agreement" id="agreement" value="agreement" />
92+
<label for="agreement"><a href="#">プライバシーポリシー</a>に同意する</label>
93+
<button type="submit">投稿</button>
94+
</form>
95+
</section>
96+
</main>
12097

121-
<h3>見出し：h3</h3>
122-
<p>作中で大河くるみは「C++やJavaを使った可能性を試したい」と話していました。</p>
123-
<p>せっかくなのでそれぞれの「Hello, world」を出力するコードを掲載します。</p>
124-
<pre>
125-
<code>
126-
#include &lt;iostream&gt;
98+
<aside>
99+
<h2>見出し：h2</h2>
100+
<p>東西南北は四神をモチーフとしています。</p>
101+
<blockquote cite="https://dot.asahi.com/articles/-/32578?page=1">
102+
<p>
103+
――登場人物には、中国の神話に出てくる霊獣「四神」（東の青龍・南の朱雀・西の白虎・北の玄武）にちなんだ名前が付けられています。このモチーフはどこから来たのですか？
104+
</p>
105+
<p>
106+
高山：東西南北にある学校が舞台なので、4パターンあるものや、四つがセットでバランスよく決まっているものって何だろうと調べている時に「四神」を見つけました。四神はそれぞれにカラーも決まっているので、絶対これにしようと思いました。
107+
</p>
108+
<p>
109+
出典：<a href="https://dot.asahi.com/articles/-/32578?page=1"
110+
>「乃木坂46にとって脅威だなと思うアイドルグループ」を小説に　乃木坂46・高山一実さんインタビュー | AERA dot.
111+
(アエラドット)</a
112+
>
113+
</p>
114+
</blockquote>
115+
<p>四神や方角を東西南北のメンバー名に当てはめると下記の通りになります。</p>
116+
<table>
117+
<caption>
118+
東西南北のメンバーと四神の対応表
119+
</caption>
120+
<thead>
121+
<tr>
122+
<th>四神</th>
123+
<th>方角</th>
124+
<th>名前と四神の対応</th>
125+
</tr>
126+
</thead>
127+
<tbody>
128+
<tr>
129+
<td>青龍</td>
130+
<td>東</td>
131+
<td>東<em>ゆう</em></td>
132+
</tr>
133+
<tr>
134+
<td>白虎</td>
135+
<td>西</td>
136+
<td><em>大河</em>くるみ</td>
137+
</tr>
138+
<tr>
139+
<td>朱雀</td>
140+
<td>南</td>
141+
<td>華<em>鳥</em>蘭子</td>
142+
</tr>
143+
<tr>
144+
<td>玄武</td>
145+
<td>北</td>
146+
<td><em>亀</em>井美嘉</td>
147+
</tr>
148+
</tbody>
149+
</table>
127150

128-
int main() {
129-
std::cout << "Hello, world!";
130-
return 0;
131-
}
132-
</code>
133-
</pre>
134-
<pre>
135-
<code>
136-
public class Main {
137-
public static void main(String[] args) {
138-
System.out.println("Hello, world!");
139-
}
151+
<h3>見出し：h3</h3>
152+
<p>作中で大河くるみは「C++やJavaを使った可能性を試したい」と話していました。</p>
153+
<p>せっかくなのでそれぞれの「Hello, world」を出力するコードを掲載します。</p>
154+
<pre>
155+
<code>
156+
#include &lt;iostream&gt;
157+
158+
int main() {
159+
std::cout << "Hello, world!";
160+
return 0;
161+
}
162+
</code>
163+
</pre>
164+
<pre>
165+
<code>
166+
public class Main {
167+
public static void main(String[] args) {
168+
System.out.println("Hello, world!");
140169
}
141-
</code>
142-
</pre>
170+
}
171+
</code>
172+
</pre>
143173

144-
<h4>見出し：h4</h4>
145-
<p>作中で東ゆうがタミヤ製のロボットを買った描写があるので、同じくタミヤで有名なミニ四駆の写真を掲載します。</p>
146-
<picture>
147-
<source srcset="assets/images/sample.jpg" media="(min-width: 1040px)" />
148-
<img src="assets/images/sample.jpg" alt="ミニ四駆が陳列されたショーケース" />
149-
</picture>
150-
<a
151-
href="https://unsplash.com/ja/%E5%86%99%E7%9C%9F/%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%88%E3%83%9C%E3%83%BC%E3%83%89%E3%81%AE%E5%A3%81-uWroDQbemmM?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
152-
>Unsplash</a
153-
>の<a
154-
href="https://unsplash.com/ja/@atluminon?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
155-
>Clark Gu</a
156-
>が撮影した写真
157-
</section>
158-
</main>
174+
<h4>見出し：h4</h4>
175+
<p>作中で東ゆうがタミヤ製のロボットを買った描写があるので、同じくタミヤで有名なミニ四駆の写真を掲載します。</p>
176+
<picture>
177+
<source srcset="assets/images/sample.jpg" media="(min-width: 1040px)" />
178+
<img src="assets/images/sample.jpg" alt="ミニ四駆が陳列されたショーケース" />
179+
</picture>
180+
<a
181+
href="https://unsplash.com/ja/%E5%86%99%E7%9C%9F/%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%88%E3%83%9C%E3%83%BC%E3%83%89%E3%81%AE%E5%A3%81-uWroDQbemmM?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
182+
>Unsplash</a
183+
>の<a href="https://unsplash.com/ja/@atluminon?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
184+
>Clark Gu</a
185+
>が撮影した写真
186+
</aside>
159187

160188
<footer>
161189
<hr />

0 commit comments

Comments
 (0)