パーツサンプル（HTML）

HOMEパーツサンプル（HTML）

パーツサンプル（h1）

パーツサンプル（h2）

ここから下はサンプル要素です。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

<h2 class="title">パーツサンプル（h2）</h2>
<p>ここから下はサンプル要素です。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>

中見出し(h3)

<h3 class="title">中見出し(h3)</h3>

小見出し(h4)

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

<h4 class="title">小見出し(h4)</h4>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>

リスト

  • リスト
  • リスト
  • リスト
<ul class="commonList">
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
  1. リスト
  2. リスト
  3. リスト
<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>

アイコン・装飾・文字

pdfアイコン

ワードアイコン

エクセルアイコン

pdfアイコン

別窓アイコン

<p><a href="#.pdf" class="icon">pdfアイコン</a></p>
<p><a href="#.doc" class="icon">ワードアイコン</a></p>
<p><a href="#.xls" class="icon">エクセルアイコン</a></p>
<p><a href="#.pdf" class="icon front">pdfアイコン</a></p>
<p><a href="#">別窓アイコン<span class="iconBlank"></span></a></p>

ボタン

ボタン左寄せ

ボタン中央寄せ

ボタン右寄せ

一覧へ戻る

外部リンクアイコン付きボタン

PDFアイコン付きボタン

黒ボタン

<p><a href="#" class="commonBtn">ボタン左寄せ</a></p>
<p class="taC"><a href="#" class="commonBtn">ボタン中央寄せ</a></p>
<p class="taR"><a href="#" class="commonBtn">ボタン右寄せ</a></p>
<div class="btnWrap taC"><a href="#" class="backBtn">一覧へ戻る</a></div>
<p class="taC"><a href="#" class="commonBtn" target="_blank">外部リンクアイコン付きボタン</a></p>
<p class="taC"><a href="#.pdf" class="commonBtn" target="_blank">PDFアイコン付きボタン</a></p>
<p><a href="#" class="smallBtn">黒ボタン</a></p>

寄せ

ああああ（基本的には、何も指定しなければ左寄せになります）

いいいい

うううう

<p class="taL">ああああ（基本的には、何も指定しなければ左寄せになります）</p>
<p class="taR">いいいい</p>
<p class="taC">うううう</p>

画像センター

<p class="taC"><img src="../images/second/dummy.png" alt=""></p>

画像2カラム（画像小さめ）

<ul class="imgLine2 small">
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
</ul>

画像3カラム

<ul class="imgLine3">
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
</ul>

画像4カラム

スマホの時に2カラムにするため、imgLine3などと違い複数行の時はulを閉じずにliを追加してください。

<ul class="imgLine4">
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
</ul>

画像5カラム

スマホの時に2カラムにするため、imgLine3などと違い複数行の時はulを閉じずにliを追加してください。

<ul class="imgLine5">
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
</ul>

画像2カラム 画像幅固定

テキストテキストテキストテキスト

<div class="colImgFixed">
<div class="colImg">
    <img decoding="async" src="#" alt="">
  </div>
<div class="colText">
<p>テキストテキストテキストテキスト</p></div>
</div>

回り込み

画像右寄せ（スマホ時　画像上）

画像のキャプション　画像のキャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p class="imgInP"><span class="img right"><img src="../images/second/dummy.png" alt=""><span class="cap">画像のキャプション</span></span>テキスト</p>

画像右寄せ（スマホ時　画像下）

画像のキャプション　画像のキャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p class="imgInP sp_img_btm"><span class="img right"><img src="../images/second/dummy.png" alt=""><span class="cap">画像のキャプション　画像のキャプション</span></span><span class="text">テキスト</span></p>

画像左寄せ（スマホ時　画像上）

画像のキャプション　画像のキャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p class="imgInP"><span class="img left"><img src="../images/second/dummy.png" alt=""><span class="cap">画像のキャプション</span></span>テキスト</p>

画像左寄せ（スマホ時　画像下）

画像のキャプション　画像のキャプションテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p class="imgInP sp_img_btm"><span class="img left"><img src="../images/second/dummy.png" alt=""><span class="cap">画像のキャプション　画像のキャプション</span></span><span class="text">テキスト</span></p>

2カラムレイアウト

画像の幅は最大50%。テキストの幅は画像のサイズに合わせて伸縮。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
画像のキャプション　画像のキャプション
<div class="twoCol">
<div class="txt">キストテキストテキストテキストテキスト</div>
<div class="img"><img src="../images/second/dummy.png" alt=""><span class="cap">画像のキャプション　画像のキャプション</span></div>
</div>
画像のキャプション　画像のキャプション
画像の幅は最大50%。テキストの幅は画像のサイズに合わせて伸縮。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div class="twoCol">
<div class="img"><img src="../images/second/dummy.png" alt=""><span class="cap">画像のキャプション　画像のキャプション</span></div>
<div class="txt">キストテキストテキストテキストテキスト</div>
</div>
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 
<div class="colorBox">
テキストテキストテキストテキストテキストテキストテキストテキスト
</div>

テーブル

中 中 中
中 中 中 
<table class="commonTable">
<tr>
<th>中</th>
<td>中</td>
<td>中</td>
</tr>
<tr>
<th>中</th>
<td>中</td>
<td>中</td>
</tr>
</table>
中 中 中
中 中 中 
<table class="commonTable">
<tr>
<th>中</th>
<th>中</th>
<th>中</th>
</tr>
<tr>
<td>中</td>
<td>中</td>
<td>中</td>
</tr>
</table>
⟺ スクロールできます
タイトル タイトル タイトル タイトル
タイトル テキスト テキスト テキスト
タイトル テキスト テキスト テキストテキストテキストテキストテキスト
タイトル テキスト テキスト テキストテキストテキストテキストテキスト 
<span class="forSP scrollText">&#10234; スクロールできます</span>
<div class="scrollTable">
<table class="commonTable">
<tr>
<th width="170">タイトル</th>
<td>テキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
<tr>
<th>タイトル</th>
<td>テキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
<tr>
<th>タイトル</th>
<td>テキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
</table>
</div>

dl

dlタイトル
ddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツ
dlタイトル
ddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツ
dlタイトル
ddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツ
dlタイトル
ddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツ
<dl class="commonList">
<div>
<dt>dlタイトル</dt>
<dd>ddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツ</dd>
</div>
<div>
<dt>dlタイトル</dt>
<dd>ddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツ</dd>
</div>
</dl>

日時2024年6月27日（木）（17時）

<ul class="anchorList">
<li><a href="#">アンカー</a></li>
<li><a href="#">アンカー</a></li>
<li><a href="#">アンカー</a></li>
<li><a href="#">アンカー</a></li>
</ul>

関連情報

fullというクラスをつけると1カラムになります。

よくあるご質問

質問が入ります質問が入ります質問が入ります質問が入ります質問が入ります質問が入ります
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
質問が入ります
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
質問が入ります
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト