テストページ

テキスト

いろいろ

Copy!!

<h1>見出し</h1>
Hello
デザイン演習
<b>太字</b>
<i>斜体</i>
<u>下線</u>
こうなる↓

見出し

Hello
デザイン演習
太字
斜体
下線
※<br>を追加し、改行を行っている

画像

画像の挿入

Copy!!

<img src="画像リンク" width="n%">
こうなる↓



※<br>を追加し、改行を行っている

箇条書き

数字

Copy!!

<ol>
  <li>あああああ</li>
  <li>いいいいい</li>
</ol>
こうなる↓
  1. あああああ
  2. いいいいい

何もなし

Copy!!

<ul>
  <li>あああああ</li>
  <li>いいいいい</li>
</ul>
こうなる↓
  • あああああ
  • いいいいい

リンク

外部リンク

Copy!!

<a href="../index.html">haru.s -XBPポートフォリオ-</a>
<a href="./index.html">haru.s -デザイン演習Ⅰ,Ⅱ-</a>
<a href="https://www.yahoo.co.jp/" target="_blank">Yahoo</a>
こうなる↓
haru.s -XBPポートフォリオ-
haru.s -デザイン演習Ⅰ,Ⅱ-
Yahoo
※「target="_blank"」：新しいタブで開く
※<br>を追加し、改行を行っている

動画貼り付け

Copy!!

<div class="video">
  埋め込みコード
</div>
こうなる↓

コード

コードコピー

Copy!!

<div class="code-box">
  <button class="copy-btn" onclick="copyCode(this)">Copy</button>
  <div class="copied-popup">Copy!!</div>
  <pre><code>
    <!--コード↓-->
    &lt;img src="./images/xbp/0_XBlogo.png" width="10%"&gt;
  </code></pre>
</div>
こうなる↓
Copy!!

<img src="./images/xbp/0_XBlogo.png" width="10%">
※<>を使用するとコードとして反応するため、&lt;と&gt;を代わりに使用
コードコピーの箱とボタンのコード
JS：コードコピーのボタン
CSS：コードコピーの箱