chore(examples): クラスレスCSSのサンプルページをより多くのHTML要素に対応させた

dist/examples/index.html

@@ -65,7 +65,6 @@ <h4>見出し：h4</h4>
         <li>大河くるみ</li>
         <li>亀井美嘉</li>
       </ol>
-
       <section>
         <h2>見出し：h2</h2>
         <p>東西南北は四神をモチーフとしています。</p>
@@ -83,7 +82,7 @@ <h2>見出し：h2</h2>
             >
           </p>
         </blockquote>
-        <p>四神や方角を東西南北の名前に当てはめると下記の通りになります。</p>
+        <p>四神や方角を東西南北のメンバー名に当てはめると下記の通りになります。</p>
         <table>
           <caption>
             東西南北のメンバーと四神の対応表
@@ -99,31 +98,70 @@ <h2>見出し：h2</h2>
             <tr>
               <td>青龍</td>
               <td>東</td>
-              <td>東「ゆう」</td>
+              <td>東<em>ゆう</em></td>
             </tr>
             <tr>
               <td>白虎</td>
               <td>西</td>
-              <td>「大河」くるみ</td>
+              <td><em>大河</em>くるみ</td>
             </tr>
             <tr>
               <td>朱雀</td>
               <td>南</td>
-              <td>華「鳥」蘭子</td>
+              <td>華<em>鳥</em>蘭子</td>
             </tr>
             <tr>
               <td>玄武</td>
               <td>北</td>
-              <td>「亀」井美嘉</td>
+              <td><em>亀</em>井美嘉</td>
             </tr>
           </tbody>
         </table>
+
+        <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>
+
+        <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>
 
     <footer>
       <hr />
-      <small>このページは技術書典17用のサンプルページです。</small>
+      <small
+        >このページは<a href="https://github.com/kubosho/trapezium.css">trapezium.css</a>を用いて作られました。</small
+      >
     </footer>
   </body>
 </html>