HTML のスニペット集

このページは、HTML のスニペットなどをまとめる予定のページです。

目次

注意

  • コードのライセンスは CC0 (クレジット表示不要、改変可、商用可) です。

スニペット

viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

プルダウン

<select name="month">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
</select>

<select name="day">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
</select>

都道府県

OGP

<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:image" content="">
<meta property="og:url" content="">
<meta property="og:locale" content="ja_JP">
<meta property="og:description" content="">

Twitter ツイートリンク

テキストのみ
<a href="https://twitter.com/intent/tweet?text=【ツイート内容】">ツイート</a>
テキスト + URL
<a href="https://twitter.com/intent/tweet?text=【ツイート内容】&amp;url=【ツイートURL】">ツイート</a>
  • 【ツイート内容】 や 【ツイートURL】 は URL エンコード (パーセントエンコーディング。PHP の場合 rawurlencode()) されている必要があります。
  • Guides — Twitter Developers

Twitter ツイートボタン

公式 (script)
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">ツイート</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Twitter フォローボタン

公式 (script)
<a href="https://twitter.com/test?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @test</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  • test の箇所 (2箇所) をフォローさせたいユーザー名に変更します。
  • Twitter Publish

Facebook シェアボタン