固定ページHTML
- HOME
- 固定ページHTML
固定ページHTML
見出しが入ります。
<h3>見出しが入ります。</h3>
小見出しが入ります。
<h4>小見出しが入ります。</h4>
本文
<p class="text">本文が入ります</p>
太字
<p class="bold">本文が入ります</p>
本文中央揃え
<p class="text center">本文中央揃え</p>
本文右揃え
<p class="text center">本文右揃え</p>
下線
「line」を追加すると本文に下線が付きます
<p class="text line">「line」を追加すると本文に下線が付きます</p>
リンク
任意テキスト
<a href="任意URL" class="link">任意テキスト</a>
入力例
<a href="http://advista.heteml.jp/g_syoko/" class="link">任意テキスト</a>
外部リンク
「target="_blank"」を入れると別ウィンドウで開きます。
外部リンクです
<a href="任意URL" target="_blank" class="link" rel="noopener noreferrer">外部リンクです</a>
画像を挿入

<img src="画像のリンクが入ります">
ボタン
<div class="btn"><a href="任意URL">任意テキスト</a></div>
ボタン中央揃え
<div class="btn center"><a href="任意URL">任意テキスト</a></div>
ボタン右揃え
<div class="btn right"><a href="任意URL">任意テキスト</a></div>
リスト
- 項目が入ります。
- 項目が入ります。
- 項目が入ります。
- 項目が入ります。
- 項目が入ります。
<ul class="list">
<li>項目が入ります。</li>
<li>項目が入ります。</li>
<li>項目が入ります。</li>
<li>項目が入ります。</li>
<li>項目が入ります。</li>
</ul>
リンク付きリスト
<ul class="list">
<li><a href="任意URL" class="link">任意テキスト</a></li>
<li>項目が入ります。<a href="任意URL" class="link">任意テキスト</a></li>
</ul>
画像リスト
<ul class="list img_list">
<li><img src="画像のリンクが入ります"></li>
<li><img src="画像のリンクが入ります"></li>
</ul>
カラム
「column2」を入れると2カラムになります
<ul class="list img_list column2">
<li><img src="http://advista.heteml.jp/g_syoko/wp-content/uploads/2020/01/main_demo01.jpg"></li>
<li><img src="http://advista.heteml.jp/g_syoko/wp-content/uploads/2020/01/main_demo01.jpg"></li>
</ul>
「column3」を入れると3カラムになります
<ul class="list img_list column3">
<li><img src="http://advista.heteml.jp/g_syoko/wp-content/uploads/2020/01/main_demo01.jpg"></li>
<li><img src="http://advista.heteml.jp/g_syoko/wp-content/uploads/2020/01/main_demo01.jpg"></li>
<li><img src="http://advista.heteml.jp/g_syoko/wp-content/uploads/2020/01/main_demo01.jpg"></li>
</ul>
「column4」を入れると4カラムになります
<ul class="list img_list column4">
<li><img src="http://advista.heteml.jp/g_syoko/wp-content/uploads/2020/01/main_demo01.jpg"></li>
<li><img src="http://advista.heteml.jp/g_syoko/wp-content/uploads/2020/01/main_demo01.jpg"></li>
<li><img src="http://advista.heteml.jp/g_syoko/wp-content/uploads/2020/01/main_demo01.jpg"></li>
<li><img src="http://advista.heteml.jp/g_syoko/wp-content/uploads/2020/01/main_demo01.jpg"></li>
</ul>
本文+画像
本文が左、画像が右の場合
先に書いたものが左に表示されます

<div class="flex">
<div class="box"><p class="text">先に書いたものが左に表示されます</p></div>
<div class="img_box">
<img src="http://advista.heteml.jp/g_syoko/wp-content/uploads/2020/01/main_demo01.jpg">
</div>
</div>
本文+画像
本文が右、画像が左の場合

先に書いたものが左に表示されます
<div class="flex">
<div class="img_box">
<img src="http://advista.heteml.jp/g_syoko/wp-content/uploads/2020/01/main_demo01.jpg">
</div>
<div class="box"><p class="text">先に書いたものが左に表示されます</p></div>
</div>
コンテンツをまとめる
複数のコンテンツがある場合、 <div class="container"> </div>で各コンテンツを囲むと、間に余白ができます。
見出し
本文がはいります。本文がはいります。本文がはいります。
見出し
本文2がはいります。本文2がはいります。本文2がはいります。
<div class="container">
<h3>見出し</h3>
<p class="text">本文がはいります。本文がはいります。本文がはいります。</p>
</div>
<div class="container">
<h3>見出し</h3>
<p class="text">本文2がはいります。本文2がはいります。本文2がはいります。</p>
</div>
表
- コンテンツ1
- コンテンツ2
- コンテンツ1
- コンテンツ2
- コンテンツ1
- コンテンツ2
- コンテンツ1
- コンテンツ2
- コンテンツ1
- コンテンツ2
- コンテンツ1
- コンテンツ2
<dl class="grid">
<dt>コンテンツ1</dt><dd>コンテンツ2</dd>
<dt>コンテンツ1</dt><dd>コンテンツ2</dd>
<dt>コンテンツ1</dt><dd>コンテンツ2</dd>
<dt>コンテンツ1</dt><dd>コンテンツ2</dd>
<dt>コンテンツ1</dt><dd>コンテンツ2</dd>
<dt>コンテンツ1</dt><dd>コンテンツ2</dd>
</dl>
dt_boldを追加するとコンテンツ1が太字になります
- コンテンツ1
- コンテンツ2
- コンテンツ1
- コンテンツ2
- コンテンツ1
- コンテンツ2
- コンテンツ1
- コンテンツ2
- コンテンツ1
- コンテンツ2
- コンテンツ1
- コンテンツ2
<dl class="grid dt_bold">
<dt>コンテンツ1</dt><dd>コンテンツ2</dd>
<dt>コンテンツ1</dt><dd>コンテンツ2</dd>
<dt>コンテンツ1</dt><dd>コンテンツ2</dd>
<dt>コンテンツ1</dt><dd>コンテンツ2</dd>
<dt>コンテンツ1</dt><dd>コンテンツ2</dd>
<dt>コンテンツ1</dt><dd>コンテンツ2</dd>
</dl>