エレメントリスト

見出し

基本

見出し2

    <h2>見出し2</h2>
    

※ h2タグで囲みます

見出し3

    <h3>見出し3</h3>
    

※ h3タグで囲みます

見出し4

    <h4>見出し4</h4>
    

※ h4タグで囲みます

見出し5
    <h5>見出し5</h5>
    

※ h5タグで囲みます

見出し6
    <h6>見出し6</h6>
    

※ h6タグで囲みます

リード文

    <p class="lead">リード文</p>
    

※ pタグのclassに「lead」を設定します

テキスト

サイトカラー

このテキストはダミーです

このテキストはダミーです

    <p class="site-color">リード文</p>
    <p>このテキストは<span class="site-color">ダミー</span>です</p>
    

※ pタグやspanタグのclassに「site-color」を設定します

赤色

このテキストはダミーです

このテキストはダミーです

    <p class="red">リード文</p>
    <p>このテキストは<span class="red">ダミー</span>です</p>
    

※ pタグやspanタグのclassに「red」を設定します

リストアイコン

まる(リスト)

  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
    <ul>
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    </ul>
    

※ liタグをulタグで囲みます

まる(単体)

このテキストはダミーです

    <p class="circle">このテキストはダミーです</p>
    

※ pタグのclassに「circle」を設定します

数字(リスト)

  1. このテキストはダミーです
  2. このテキストはダミーです
  3. このテキストはダミーです
    <ol>
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    </ol>
    

※ liタグをolタグで囲みます

矢印(リスト)

  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
    <ul class="arrow">
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    </ul>
    

※ ulタグのclassに「arrow」を設定します

矢印(単体)

このテキストはダミーです

    <p class="arrow">このテキストはダミーです</p>
    

※ pタグのclassに「arrow」を設定します

米印(リスト)

  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
    <ul class="kome">
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    </ul>
    

※ liタグを囲むulのclassに「kome」を設定します

米印(単体)

このテキストはダミーです

    <p class="kome">このテキストはダミーです</p>
    

※ pタグのclassに「kome」を設定します

米印(赤色)

このテキストはダミーです

    <p class="kome red">このテキストはダミーです</p>
    

※ pタグのclassに「kome red」を設定します
※ リストの場合は、ulタグのclassに「red」を追加します
※ リスト全体を赤色にする場合はulタグに、リストの一部を赤色にする場合はliタグにclass「red」を追加します

リストアイコンなし

  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
    <ul class="noicon">
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    </ul>
    

※ ulタグのclassに「noicon」を設定します

3列(リスト)

  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
    <ul class="column3">
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    	<li>このテキストはダミーです</li>
    </ul>
    

※ ulタグのclassに「column3」を設定します

アンカー

    <ul class="anchor">
      <li><a href="#anch01">見出し1</a></li>
      <li><a href="#anch02">見出し2</a></li>
      <li><a href="#anch03">見出し3</a></li>
      <li><a href="#anch04">見出し4</a></li>
    </ul>
    

※ liタグを囲むulタグのclassに「anchor」を設定します
※ リンク先のタグにidを設定してください

ボタン

四角ボタン(単体)

このテキストはダミーです

    <p><a class="btn" href="#">このテキストはダミーです</a></p>
    

※ aタグのclassに「btn」を設定します

四角ボタン(単体・横幅いっぱい)

このテキストはダミーです

    <p><a class="btn-full" href="#">このテキストはダミーです</a></p>
    

※ aタグのclassに「btn-full」を設定します

外部サイト

外部サイト

    <p><a href="#" target="_blank">外部サイト</a></p>
    

※ aタグに別タブ(target="_blank")が指定されている場合、自動的に表示されます

PDFファイル

PDFファイル

    <p><a href="test.pdf" target="_blank">PDFファイル</a></p>
    

※ aタグのリンク先ファイルの拡張子が.pdfの場合、自動的に表示されます

Wordファイル

Wordファイル(.doc)
Wordファイル(.docx)

    <p><a href="test.doc">Wordファイル(.doc)</a><br>
    <a href="test.docx">Wordファイル(.docx)</a></p>
    

※ aタグのリンク先ファイルの拡張子が.docまたは.docxの場合、自動的に表示されます

Excelファイル

Excelファイル(.xls)
Excelファイル(.xlsx)

    <p><a href="test.xls">Excelファイル(.xls)</a><br>
    <a href="test.xlsx">Excelファイル(.xlsx)</a></p>
    

※ aタグのリンク先ファイルの拡張子が.xlsまたは.xlsxの場合、自動的に表示されます

リンクアイコン非表示

    <p><a class="imagelink" href="#" target="_blank"><img src="https://zenkoku-sjll.org/wp/wp-content/themes/laboratories-theme/images/img_medium.png"></a></p>
    

※ 画像リンクなどリンクアイコンを非表示にしたい場合、aタグのclassに「imagelink」を設定します

テーブル

テーブル

見出し1 見出し2 見出し3
このテキストはダミーです このテキストはダミーです このテキストはダミーです
このテキストはダミーです このテキストはダミーです このテキストはダミーです
このテキストはダミーです このテキストはダミーです このテキストはダミーです
    <table>
    	<thead>
    		<tr>
    			<th>見出し1</th>
    			<th>見出し2</th>
    			<th>見出し3</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<th>このテキストはダミーです</th>
    			<td>このテキストはダミーです</td>
    			<td>このテキストはダミーです</td>
    		</tr>
    		<tr>
    			<th>このテキストはダミーです</th>
    			<td>このテキストはダミーです</td>
    			<td>このテキストはダミーです</td>
    		</tr>
    		<tr>
    			<th>このテキストはダミーです</th>
    			<td>このテキストはダミーです</td>
    			<td>このテキストはダミーです</td>
    		</tr>
    	</tbody>
    </table>
    

フレーム

メモ用

このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。

    <div class="notes">
    <p>このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p>
    </div>
    

※ divタグのclassに「notes」を設定します

囲み枠(サイトカラー)

このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。

    <div class="explanation">
    <p>このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p>
    </div>
    

※ divタグのclassに「explanation」を設定します

囲み枠(赤)

このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。

    <div class="explanation red">
    <p>このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p>
    </div>
    

※ divタグのclassに「explanation red」を設定します

囲み枠(グレー)

このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。

    <div class="explanation gray">
    <p>このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。</p>
    </div>
    

※ divタグのclassに「explanation gray」を設定します

画像

囲み線

    <img class="img-border" src="https://zenkoku-sjll.org/wp/wp-content/themes/laboratories-theme/images/img_medium_white.png" alt="" />
    

※ imgタグのclassに「img-border」を設定します

レイアウト

上の余白を削除

このテキストはダミーです

このテキストはダミーです

    <h2 class="mt-0">このテキストはダミーです</h2>
    <p>このテキストはダミーです</p>
    

※ 上の余白を消したいタグのclassに「mt-0」を設定します

下の余白を削除

このテキストはダミーです

このテキストはダミーです

    <h2 class="mb-0">このテキストはダミーです</h2>
    <p>このテキストはダミーです</p>
    

※ 上の余白を消したいタグのclassに「mb-0」を設定します

2列

このテキストはダミーです

このテキストはダミーです

    <div class="pure-g">
    	<div class="pure-u-1 pure-u-md-1-2">
    		<h3>このテキストはダミーです</h3>
    		<img src="https://zenkoku-sjll.org/wp/wp-content/themes/laboratories-theme/images/img_medium.png" alt="" />
    	</div>
    	<div class="pure-u-1 pure-u-md-1-2">
    		<h3>このテキストはダミーです</h3>
    		<img src="https://zenkoku-sjll.org/wp/wp-content/themes/laboratories-theme/images/img_medium.png" alt="" />
    	</div>
    </div>
    

※ 画像やテキストを変更して使用します

3列

このテキストはダミーです

このテキストはダミーです

このテキストはダミーです

    <div class="pure-g">
    	<div class="pure-u-1 pure-u-md-1-3">
    		<h3>このテキストはダミーです</h3>
    		<img src="https://zenkoku-sjll.org/wp/wp-content/themes/laboratories-theme/images/img_medium.png" alt="" />
    	</div>
    	<div class="pure-u-1 pure-u-md-1-3">
    		<h3>このテキストはダミーです</h3>
    		<img src="https://zenkoku-sjll.org/wp/wp-content/themes/laboratories-theme/images/img_medium.png" alt="" />
    	</div>
    	<div class="pure-u-1 pure-u-md-1-3">
    		<h3>このテキストはダミーです</h3>
    		<img src="https://zenkoku-sjll.org/wp/wp-content/themes/laboratories-theme/images/img_medium.png" alt="" />
    	</div>
    </div>
    

※ 画像やテキストを変更して使用します