山椒
ログイン＆新規登録

もっと便利に利用しよう！

登録するとお気に入り登録が可能になります。

アカウントを作成

山椒スニペット

初めに

作成したツールは申請前に以下のタグを設定することで、デザインを変更することができます。
基本的に各タグに対して、クラス属性を指定することで適用可能です。

目次

見出しのデザイン

h2: 見出し

h3: 小見出し1

h4: 小見出し2

h5: 小見出し3
h6: 小見出し4

テキストのデザイン

テキストを表示する際は <div class="text"></div> で囲うことをお勧めします

1.文字装飾

class="bold" class="erase" class="underline"
太字 打ち消し線 下線

合わせて使うこともできます

class="bold erase" class="bold underline"
太字打ち消し線 太字下線

文字色と背景色も用意していますが、任意の色にしたい場合はstyle属性で指定してください

class="color" class="background"
カラー 背景色

使用例:
<div class="text">
  こんな風に<span class="bold">太字にもできる</span>し、
  <span class="erase">打ち消しだって</span>できるよ。<br>
  <span class="color">カラーは自由</span>に変えられて
  <span class="background">背景色</span>もできるよ。<br>
  <span class="underline">下線も</span>引けます。<br>
  aタグ利用すると<a>このような表示</a>になります。
</div>

こんな風に太字にもできるし、打ち消しだってできるよ。
カラーは自由に変えられて背景色もできるよ。
下線も引けます。
aタグ利用するとこのような表示になります。

2.箇条書き

順不同型と番号順の2種類用意してあります。
ulまたはolタグを囲む形でお使いください。

class="list1" class="list2"
順不同型 番号順

使用例(順不同型):
<div class="list1">
  <ul>
    <li>箇条書き１</li>
    <li>箇条書き２</li>
    <li>
      箇条書き３
      <ul>
        <li>箇条書き3-1</li>
        <li>箇条書き3-2</li>
        <li>
          箇条書き3-3
          <ul>
            <li>箇条書き3-3-1</li>
            <li>箇条書き3-3-2</li>
            <li>箇条書き3-3-3</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

  • 箇条書き１
  • 箇条書き２
  • 箇条書き３
    • 箇条書き3-1
    • 箇条書き3-2
    • 箇条書き3-3
      • 箇条書き3-3-1
      • 箇条書き3-3-2
      • 箇条書き3-3-3

使用例(番号順):
<div class="list2">
  <ol>
    <li>箇条書き1</li>
    <li>箇条書き2</li>
    <li>箇条書き3</li>
    <li>箇条書き4</li>
    <li>箇条書き5</li>
    <li>箇条書き6</li>
  </ol>
</div>

  1. 箇条書き１
  2. 箇条書き２
  3. 箇条書き３
  4. 箇条書き４
  5. 箇条書き５
  6. 箇条書き６

3.テーブル

枠
枠なしと枠ありの2種類用意してあります。

class="noborder" 枠なし

class属性なし 枠あり

配置揃え
テーブル内の要素を上下方向、左右方向に揃えられます。
合わせて使うことで上下左右中央揃えもできます。

上下方向
class="top" class="middle" class="bottom"
上よせ 上下中央よせ 下よせ
左右方向
class="left" class="center" class="right"
左よせ 左右中央よせ 右よせ

使用例:
<table style="table-layout:fixed;">
  <tbody>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
    <tr>
      <td class="top left" style="height:100px;">
        上・左よせ</td>
      <td class="top center" style="height:100px;">
        上・左右中央よせ</td>
      <td class="top right" style="height:100px;">
        上・右よせ</td>
    </tr>
    <tr>
      <td class="middle left" style="height:100px;">
        上下中央・左よせ</td>
      <td class="middle center" style="height:100px;">
        上下・左右中央よせ</td>
      <td class="middle right" style="height:100px;">
        上下中央・右よせ</td>
    </tr>
    <tr>
      <td class="bottom left" style="height:100px;">
        下・左よせ</td>
      <td class="bottom center" style="height:100px;">
        下・左右中央よせ</td>
      <td class="bottom right" style="height:100px;">
        下・右よせ</td>
    </tr>
  </tbody>
</table>

A B C
上・左よせ 上・左右中央よせ 上・右よせ
上下中央・左よせ 上下・左右中央よせ 上下中央・右よせ
下・左よせ 下・左右中央よせ 下・右よせ

4.強調表示

強調して表示させたい時に使います。
色は1種類しか用意していないので、色を変えたい場合はstyle属性で別途指定してください。

class="notice"

強調表示

 

<div class="notice">
  <h4>警告！！</h4>
  <p>
    エラーやその他、注意してほしいことや、必ず読んでほしい文章など<br>
    アラートではちょっと大袈裟かもという時に利用します。
  </p>
</div>

警告！！

エラーやその他、注意してほしいことや、必ず読んでほしい文章など
アラートではちょっと大袈裟かもという時に利用します。


5.引用文

引用文を表示したい時に使います。
色は1種類しか用意してないので、色を変えたい場合はstyle属性で別途指定してください。

class="quote"

引用文

 

<div class="quote">
  <blockquote cite="https://sansho.tools">
    <p>
      【引用文】山椒ツールズは、「無料で使えるオンライン便利ツール集」です。
      ちょっとした計算、忘れがちなスクリプトの他にも様々な便利ツールを集めました。
      ブックマークに置きたいサイトを目指してツールを作り続けています。
    </p>
    <div class="source">
      <a href="https://sansho.tools">https://sansho.tools</a>
    </div>
  </blockquote>
</div>

【引用文】山椒ツールズは、「無料で使えるオンライン便利ツール集」です。 ちょっとした計算、忘れがちなスクリプトの他にも様々な便利ツールを集めました。 ブックマークに置きたいサイトを目指してツールを作り続けています。

https://sansho.tools

6.コード表示

プログラムコードやHTML、CSS、JavaScriptなどのコードを表示したいときに使います。

class="pre" 
												コード表示
横に長ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーいコードを書くとスクロールバーが表示されます。

table内でpreタグを使う場合は、table-layoutをfixedに指定してください。



<div class="pre">
  <pre>
    <code>$txt = [a,b,c,d,e,f,g];
foreach($txt as $val) { echo $val; }
								
// 結果
abcdefg</code></pre>
</div>


$txt = [a,b,c,d,e,f,g];
foreach($txt as $val) { echo $val; }

// 結果
abcdefg


フォームコントロール要素のデザイン

1.button

ボタンのデザイン
押せるボタン4種、押せないボタン2種のデザインを用意しています。
style属性にサイズや色を指定することで他のデザインにすることもできます。

デザイン
class="btn1" class="btn2" class="btn3" class="btn4"

押せないボタンデザイン
class="inv-btn1" class="inv-btn2"

使用例:
<button type="button" class="btn1">ボタン</button>
<button type="button" class="btn2">
  ながーーーーーーいテキストも対応しています</button>
<button type="button" class="btn3">
  ボタン内で<br>改行も<br>できます</button>
<button type="button" class="btn4">短</button>

<button type="button" class="inv-btn1">塗りつぶし</button>
<button type="button" class="inv-btn2">縁取り</button>



配置揃え
テーブル内要素同様に、buttonを配置揃えできます。

使用例:
// 左よせ
<div class="left">
  <button type="button" class="btn1">左よせ</button>
  <button type="button" class="btn2">ボタン</button>
</div>
// 中央よせ
<div class="center">
  <button type="button" class="btn3">左右</button>
  <button type="button" class="btn4">中央よせ</button>
  <button type="button" class="inv-btn1">ボタン</button>
</div>
// 右よせ
<div class="right">
  <button type="button" class="inv-btn2">右よせボタン</button>
</div>



2.input

特定のtype属性のものにはデザインが用意してあります。
デザインの詳細は使用例を参考にしてください。

使用例(type=text):
<div class="form-title">テキスト</div>
<div style="margin-bottom:10px;">
  <input type="text" placeholder="標準サイズ" readonly />
</div>
<div style="margin-bottom:10px;">
  <input class="half" type="text" placeholder="サイズ50%" readonly />
</div>
<div style="margin-bottom:10px;">
  <input class="max" type="text" placeholder="サイズ100%" readonly />
</div>

テキスト

使用例(type=password):
<div class="form-title">パスワード</div>
<input class="half" type="password" placeholder="サイズ50%">

パスワード

使用例(type=number):
<div class="side">
 <span>
    <div class="form-title">数字(スピンボタンあり)</div>
    <input type="number">
  </span>
  <span>
    <div class="form-title">数字(スピンボタンなし)</div>
    <input class="no__spin" type="number">
  </span>
</div>

数字(スピンボタンあり)
数字(スピンボタンなし)

使用例(type=date, type=datetime-local, type=time):
<div class="side">
  <span>
    <div class="form-title">日付</div>
    <input type="date" />
  </span>
  <span>
    <div class="form-title">日付と時間</div>
    <input type="datetime-local" />
  </span>
  <span>
    <div class="form-title">時間</div>
    <input type="time" />
  </span>
</div>

日付
日付と時間
時間

使用例(type=radio):
<div class="form-title">1つだけ選択可能</div>
<div class="side">
  <label>
    <input type="radio" name="radio">
      選択１
  </label>
  <label>
    <input type="radio" name="radio">
      選択２
  </label>
  <label>
    <input type="radio" name="radio">
      選択３
  </label>
</div>

1つだけ選択可能

使用例(type=checkbox):
<div class="form-title">複数選択可能</div>
<div class="side">
  <label>
    <input type="checkbox" name="check">
      選択１
  </label>
  <label>
    <input type="checkbox" name="check">
      選択２
  </label>
  <label>
    <input type="checkbox" name="check">
      選択３
  </label>
</div>

複数選択可能

3.textarea

複数行の入力欄を使いたい時に使用します。
使用例:
<div class="form-title">テキストエリアタイトル</div>
<textarea class="max" rows="6" placeholder="サイズ100%"></textarea>

テキストエリアタイトル

4.select

プルダウンメニューを使用したい時に使います。
使用例:
<div class="side">
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
</div>

プルダウンメニュー

5.file

ファイルを選択させたいときに使います。
使用例のようにタグとclass属性を指定すると、ドラッグ&ドロップ対応のデザインにできます。
使用例:
<div class="form-title">ファイルアップロード</div>
<div class="file">
  <label class="file__drop__area">
    <input type="file">
    <img src="/img/file-upload.svg" width="44" height="43">
    <p>
      <span>
        プログラムをZIP形式で圧縮し<br>
        ここにドロップしてください
      </span>
      <span class="file__name">選択されていません</span>
    </p>
  </label>
</div>

ファイルアップロード



土
山椒の木
土 ニョキ！
山椒魚 山椒魚

当ウェブサイトでは、お客様により良いサービスを提供するため、クッキーを利用しています。クッキーの使用に同意いただける場合は「同意する」ボタンをクリックし、詳細については「プライバシーポリシー」をお読みください。