福井大学
高等教育推進
センター

エレメントリスト

HOME > エレメントリスト

見出し

基本

見出し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」を設定します

３列（リスト）

  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
  • このテキストはダミーです
    <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">見出し１</a></li>
      <li><a href="#anch02">見出し２</a></li>
      <li><a href="#anch03">見出し３</a></li>
      <li><a href="#anch04">見出し４</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://www.cahe.u-fukui.ac.jp/wp/wp-content/themes/laboratories-theme/images/img_medium.png"></a></p>

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

テーブル

テーブル

見出し１ 見出し２ 見出し３
このテキストはダミーです このテキストはダミーです このテキストはダミーです
このテキストはダミーです このテキストはダミーです このテキストはダミーです
このテキストはダミーです このテキストはダミーです このテキストはダミーです 
    <table>
    	<thead>
    		<tr>
    			<th>見出し１</th>
    			<th>見出し２</th>
    			<th>見出し３</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://www.cahe.u-fukui.ac.jp/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」を設定します

２列

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

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

    <div class="pure-g">
    	<div class="pure-u-1 pure-u-md-1-2">
    		<h3>このテキストはダミーです</h3>
    		<img src="https://www.cahe.u-fukui.ac.jp/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://www.cahe.u-fukui.ac.jp/wp/wp-content/themes/laboratories-theme/images/img_medium.png" alt="" />
    	</div>
    </div>

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

３列

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

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

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

    <div class="pure-g">
    	<div class="pure-u-1 pure-u-md-1-3">
    		<h3>このテキストはダミーです</h3>
    		<img src="https://www.cahe.u-fukui.ac.jp/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://www.cahe.u-fukui.ac.jp/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://www.cahe.u-fukui.ac.jp/wp/wp-content/themes/laboratories-theme/images/img_medium.png" alt="" />
    	</div>
    </div>

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