岐阜県商工会連合会

  • 文字サイズ
  • 背景色

固定ページ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>