Skip to content

Update example HTML #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 26, 2024
Merged

Update example HTML #4

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f69290e
feat(dist/examples): aside要素を用意した
kubosho Oct 26, 2024
580b771
feat(dist/examples): 番組のフォームっぽい内容を投稿した
kubosho Oct 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
198 changes: 113 additions & 85 deletions dist/examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,97 +65,125 @@ <h4>見出し：h4</h4>
<li>大河くるみ</li>
<li>亀井美嘉</li>
</ol>

<section>
<h2>見出し：h2</h2>
<p>東西南北は四神をモチーフとしています。</p>
<blockquote cite="https://dot.asahi.com/articles/-/32578?page=1">
<p>
――登場人物には、中国の神話に出てくる霊獣「四神」（東の青龍・南の朱雀・西の白虎・北の玄武）にちなんだ名前が付けられています。このモチーフはどこから来たのですか？
</p>
<p>
高山：東西南北にある学校が舞台なので、4パターンあるものや、四つがセットでバランスよく決まっているものって何だろうと調べている時に「四神」を見つけました。四神はそれぞれにカラーも決まっているので、絶対これにしようと思いました。
</p>
<p>
出典：<a href="https://dot.asahi.com/articles/-/32578?page=1"
>「乃木坂46にとって脅威だなと思うアイドルグループ」を小説に　乃木坂46・高山一実さんインタビュー | AERA
dot. (アエラドット)</a
>
</p>
</blockquote>
<p>四神や方角を東西南北のメンバー名に当てはめると下記の通りになります。</p>
<table>
<caption>
東西南北のメンバーと四神の対応表
</caption>
<thead>
<tr>
<th>四神</th>
<th>方角</th>
<th>名前と四神の対応</th>
</tr>
</thead>
<tbody>
<tr>
<td>青龍</td>
<td>東</td>
<td>東<em>ゆう</em></td>
</tr>
<tr>
<td>白虎</td>
<td>西</td>
<td><em>大河</em>くるみ</td>
</tr>
<tr>
<td>朱雀</td>
<td>南</td>
<td>華<em>鳥</em>蘭子</td>
</tr>
<tr>
<td>玄武</td>
<td>北</td>
<td><em>亀</em>井美嘉</td>
</tr>
</tbody>
</table>
<p>めちゃ×2フライデーでは東西南北に行ってほしい観光スポットを募集しています！</p>
<p>下記のフォームから各項目を記入して投稿してください。</p>
<form>
<label for="name">名前</label>
<input type="text" name="name" id="name" value="" />
<label for="nickname">ニックネーム</label>
<input type="text" name="nickname" id="nickname" value="" />
<fieldset>
<legend>行きたい方角</legend>
<input type="checkbox" name="direction" id="east" value="east" />
<label for="east">東</label>
<input type="checkbox" name="direction" id="west" value="west" />
<label for="west">西</label>
<input type="checkbox" name="direction" id="south" value="south" />
<label for="south">南</label>
<input type="checkbox" name="direction" id="north" value="north" />
<label for="north">北</label>
</fieldset>
<label for="comment">コメント</label>
<textarea name="comment" id="comment"></textarea>
<input type="checkbox" name="agreement" id="agreement" value="agreement" />
<label for="agreement"><a href="#">プライバシーポリシー</a>に同意する</label>
<button type="submit">投稿</button>
</form>
</section>
</main>

<h3>見出し：h3</h3>
<p>作中で大河くるみは「C++やJavaを使った可能性を試したい」と話していました。</p>
<p>せっかくなのでそれぞれの「Hello, world」を出力するコードを掲載します。</p>
<pre>
<code>
#include &lt;iostream&gt;
<aside>
<h2>見出し：h2</h2>
<p>東西南北は四神をモチーフとしています。</p>
<blockquote cite="https://dot.asahi.com/articles/-/32578?page=1">
<p>
――登場人物には、中国の神話に出てくる霊獣「四神」（東の青龍・南の朱雀・西の白虎・北の玄武）にちなんだ名前が付けられています。このモチーフはどこから来たのですか？
</p>
<p>
高山：東西南北にある学校が舞台なので、4パターンあるものや、四つがセットでバランスよく決まっているものって何だろうと調べている時に「四神」を見つけました。四神はそれぞれにカラーも決まっているので、絶対これにしようと思いました。
</p>
<p>
出典：<a href="https://dot.asahi.com/articles/-/32578?page=1"
>「乃木坂46にとって脅威だなと思うアイドルグループ」を小説に　乃木坂46・高山一実さんインタビュー | AERA dot.
(アエラドット)</a
>
</p>
</blockquote>
<p>四神や方角を東西南北のメンバー名に当てはめると下記の通りになります。</p>
<table>
<caption>
東西南北のメンバーと四神の対応表
</caption>
<thead>
<tr>
<th>四神</th>
<th>方角</th>
<th>名前と四神の対応</th>
</tr>
</thead>
<tbody>
<tr>
<td>青龍</td>
<td>東</td>
<td>東<em>ゆう</em></td>
</tr>
<tr>
<td>白虎</td>
<td>西</td>
<td><em>大河</em>くるみ</td>
</tr>
<tr>
<td>朱雀</td>
<td>南</td>
<td>華<em>鳥</em>蘭子</td>
</tr>
<tr>
<td>玄武</td>
<td>北</td>
<td><em>亀</em>井美嘉</td>
</tr>
</tbody>
</table>

int main() {
std::cout << "Hello, world!";
return 0;
}
</code>
</pre>
<pre>
<code>
public class Main {
public static void main(String[] args) {
System.out.println("Hello, world!");
}
<h3>見出し：h3</h3>
<p>作中で大河くるみは「C++やJavaを使った可能性を試したい」と話していました。</p>
<p>せっかくなのでそれぞれの「Hello, world」を出力するコードを掲載します。</p>
<pre>
<code>
#include &lt;iostream&gt;

int main() {
std::cout << "Hello, world!";
return 0;
}
</code>
</pre>
<pre>
<code>
public class Main {
public static void main(String[] args) {
System.out.println("Hello, world!");
}
</code>
</pre>
}
</code>
</pre>

<h4>見出し：h4</h4>
<p>作中で東ゆうがタミヤ製のロボットを買った描写があるので、同じくタミヤで有名なミニ四駆の写真を掲載します。</p>
<picture>
<source srcset="assets/images/sample.jpg" media="(min-width: 1040px)" />
<img src="assets/images/sample.jpg" alt="ミニ四駆が陳列されたショーケース" />
</picture>
<a
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"
>Unsplash</a
>の<a
href="https://unsplash.com/ja/@atluminon?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
>Clark Gu</a
>が撮影した写真
</section>
</main>
<h4>見出し：h4</h4>
<p>作中で東ゆうがタミヤ製のロボットを買った描写があるので、同じくタミヤで有名なミニ四駆の写真を掲載します。</p>
<picture>
<source srcset="assets/images/sample.jpg" media="(min-width: 1040px)" />
<img src="assets/images/sample.jpg" alt="ミニ四駆が陳列されたショーケース" />
</picture>
<a
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"
>Unsplash</a
>の<a href="https://unsplash.com/ja/@atluminon?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
>Clark Gu</a
>が撮影した写真
</aside>

<footer>
<hr />
Expand Down