開発者・編集者向け：コピペで使えるHTML集

ふじっちポータルでできることをご紹介します。

見出しが3種類使える

以下の3つを項目ごとに使えます。

見出し2はこれ

見出し3はこれ

見出し4はこれ

ボタンが使える

以下のようなコンバージョンボタンが使えます。

テキストここに入れる

●以下のコードをコピペしてボタンが作れます

<p style="text-align: center;"><a href="#" class="btn-square">テキストここに入れる</a></p>

枠線が使える

以下のような枠線が使えます。

POINT

ここに補足情報やお役立ち情報を入れて、紹介することができます。

●以下のコードをコピペして、枠線が使えます。

<div class="box-yellow"><span class="box-title">ここに枠線のタイトル</span>
<p>ここに枠線の中の文章</p>
</div>

目次が使える

ふじっちポータルでは以下のような目次が使えます。

●以下のコードをコピペして目次を作成できます。

<nav class="mkj">
<p>この記事の目次</p>
<ol>
<li class="mkj-list-font"><a href="#headline1">ここに飛ばしたい見出しを入力する</a></li>
<li class="mkj-list-font"><a href="#headline2">ここに飛ばしたい見出しを入力する</a></li>
<li class="mkj-list-font"><a href="#headline3">ここに飛ばしたい見出しを入力する</a></li>
<li class="mkj-list-font"><a href="#headline4">ここに飛ばしたい見出しを入力する</a></li>
</ol>
</nav>

※目次から、飛ばしたい見出しに遷移させるには、コードによる紐付け作業が必要です。<h2>〜〜</h2>で入力されている見出しを、<h2 id="headline2">〜〜</h2>と書き換えましょう。

3列のギャラリーを入れられる。

ふじっちポータルサイトでは以下のようなギャラリーをいれることができます。「3つの特長！」やピックアップページに遷移させたい時は、いかのギャラリーを使ってみてください。

見出し

本文本文本文本文本本文本文本文本文本文本文本本文本文

本文本文本文本文本本文本文本文本文本文本文本本文本文本文本文本文本文本本文本文本文本文本文本文本本文本文

本文本文本文本文本本文本文本文本文本文本文本本文本文本文本文本文本文本本文本文本文本文本文本文本本文本文本文本文本文本文本本文本文本文本文本文本文本本文本文

なお、以上のギャラリーを使いたい場合は、以下のコードを使ってください。

●以下のコードをコピペしてギャラリーを作れます。

<div class="flex03">
<div class="flexitem">
<h5>左の画像の上の太文字テキストはここにいれる</h5>
<div class="item-image">一番左の画像はここに入れる</div>
一左の画像の下の詳細テキストはここに入れる
<div class="item-btn"><a href="#">ボタンのテキストはここに入れる</a></div>
</div>
<div class="flexitem">
<h5>真ん中の画像の上の太文字テキストはここにいれる</h5>
<div class="item-image">真ん中の画像はここに入れる</div>
真ん中の画像の下の詳細テキストはここに入れる
<div class="item-btn"><a href="#">ボタンのテキストはここに入れる</a></div>
</div>
<div class="flexitem">
<h5>右の画像の上の太文字テキストはここにいれる</h5>
<div class="item-image">右の画像はここに入れる</div>
右の画像の下の詳細テキストはここに入れる
<div class="item-btn"><a href="#">ボタンのテキストはここに入れる</a></div>
</div>
</div>

タブ切り替えが使える

このタブは、水色のラベル部分の幅が可変しないため、タブを増やしたり減らしたりすることができません。投稿記事などでタブ切り替えが必要な場合は「レスポンシブタブ切り替え」を使ってください。

タブ1 タブ2 タブ3 タブ4

タブ1の内容

タブ2の内容

タブ3の内容

タブ4の内容

なお、以上のタブを使いたい場合は、以下のコードを入れてください。

●以下のコードを入れるとタブ切り替えを使える。

<h2 id="headline6">タブ切り替えが使える</h2>
<div class="tab_container"><input id="tab1" checked="checked" name="tab_item" type="radio" /> <label class="tab_item" for="tab1">タブ1</label> <input id="tab2" name="tab_item" type="radio" /> <label class="tab_item" for="tab2">タブ2</label> <input id="tab3" name="tab_item" type="radio" /> <label class="tab_item" for="tab3">タブ3</label> <input id="tab4" name="tab_item" type="radio" /> <label class="tab_item" for="tab4">タブ4</label>
<div id="tab1_content" class="tab_content">
<div class="tab_content_description">
<p class="c-txtsp">タブ1の内容</p>
</div>
</div>
<div id="tab2_content" class="tab_content">
<div class="tab_content_description">
<p class="c-txtsp">タブ2の内容</p>
</div>
</div>
<div id="tab3_content" class="tab_content">
<div class="tab_content_description">
<p class="c-txtsp">タブ3の内容</p>
</div>
</div>
<div id="tab4_content" class="tab_content">
<div class="tab_content_description">
<p class="c-txtsp">タブ4の内容</p>
</div>
</div>
</div>

一行開けるやり方

改行をする時は以下の手順で入力すると改行されます。

１：「enterキー」を押す

２：「スペースキー」

３：再度「エンターキー」を押す

ボタン切り替えが使える

100均

コンテンツ 1

スーパー

コンテンツ 2

ドラッグストア

コンテンツ 3

家電

コンテンツ 4

ユニクロ・しまむら

コンテンツ 5

ニトリ・無印

コンテンツ 6

ドンキ

コンテンツ 7

西松屋

コンテンツ 8

以下コードをコピペして使えます。

<div class="tab-wrap">
<input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">100均</label>
<div class="tab-content">
コンテンツ 1
</div>
<input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">スーパー</label>
<div class="tab-content">
コンテンツ 2
</div>
<input id="TAB-03" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-03">ドラッグストア</label>
<div class="tab-content">
コンテンツ 3
</div>
<input id="TAB-04" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-04">家電</label>
<div class="tab-content">
コンテンツ 4
</div>
<input id="TAB-05" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-05">ユニクロ・しまむら</label>
<div class="tab-content">
コンテンツ 5
</div>
<input id="TAB-06" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-06">ニトリ・無印</label>
<div class="tab-content">
コンテンツ 6
</div>
<input id="TAB-07" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-07">ドンキ</label>
<div class="tab-content">
コンテンツ 7
</div>
<input id="TAB-08" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-08">西松屋</label>
<div class="tab-content">
コンテンツ 8
</div>
</div>

元にしたコードが載ってたHP（https://web.monogusa-note.com/flexible-tabs-only-css）

レスポンシブなタブ切り替え

以下のように、タブのラベルが両端まで伸びるレスポンシブタイプのタブ切り替えも用意しました。

避難の備え

こんな感じで入ります。

在宅の備え

こんな感じで入ります。こんな感じで入ります。

在宅の備え

こんな感じで入ります。こんな感じで入ります。こんな感じで入ります。

以下コードをコピペして使えます。

3カラムのタブ切り替えのコード

<input id="TAB-A01" checked="checked" name="TAB-A" type="radio" /> <label class="tabLabel" for="TAB-A01">避難の備え</label>
<div class="content">
<p>こんな感じで入ります。</p>
</div>

<input id="TAB-A02" name="TAB-A" type="radio" /> <label class="tabLabel" for="TAB-A02">在宅の備え</label>
<div class="content">
<p>こんな感じで入ります。こんな感じで入ります。</p>
</div>

<input id="TAB-A03" name="TAB-A" type="radio" /> <label class="tabLabel" for="TAB-A03">在宅の備え</label>
<div class="content">
<p>こんな感じで入ります。こんな感じで入ります。こんな感じで入ります。</p>
</div>

</section>

4カラムのタブ切り替えのコード

<label class="tabLabel" for="TAB-A03">在宅の備え</label>
<div class="content">
<p>こんな感じで入ります。こんな感じで入ります。こんな感じで入ります。</p>
</div>

<input id="TAB-A04" name="TAB-A" type="radio" /> <label class="tabLabel" for="TAB-A04">在宅の備え</label>
<div class="content">
<p>こんな感じで入ります。こんな感じで入ります。こんな感じで入ります。</p>
</div>

</section>

2カラムのタブ切り替えのコード

</section>