無料ツール

プリセット 毎分 毎時0分 毎日0時 毎週月曜9時 毎月1日0時 5分ごと 平日8〜18時毎時 毎日23:30 Cron式 コピー ビジュアルビルダー 次の10回の実行時刻 ...

※本記事にはアフィリエイト広告が含まれています。 パーセント計算ツール｜割引・値上げ率・割合を自動計算【無料】 割引セールの値引き額、値上がりした商品の新価格、2つの数字の割合など、日常でよく使うパーセント計算を5つのモードで瞬時に計算できる無料ツールです。スライダーや入力フォームで直感的に操作でき、計算式もあわせて表示するので仕組みも一目でわかります。 AのB%はいくら？ AはBの何%？ 変化率 割引計算 値上げ計算 数値 A パーセント B（%） 数値 A（部分） 数値 B（全体） 変更前の値 変更後の値 元の価格（円） 割引率 20% 10% OFF 20% OFF 30% OFF 半額（50%） 元の価格（円） 値上げ率 10% 身近な例：100円の商品が10%値上げで 110円 になります。 パーセント早見表 よくある金額に対する各割引・割合の計算結果一覧です。 ...

linear-gradient(135deg, ...) ランダム生成 CSSをコピー グラデーションの種類 リニア 放射状 コニック 角度 ° 形状 円形 楕円形 中心位置 ↖ ↑ ↗ ← · → ↙ ↓ ↘ 開始角度 ° カラーストップ + カラーストップを追加 プリセット CSSコード コピー CSSグラデーションジェネレーターの使い方 グラデーションの種類を選ぶ — リニア（直線）・放射状・コニック（扇形）の3種類から選択できます。 ...

借入額・年利・返済期間を入力するだけで、毎月の返済額・総支払利息・返済スケジュールをすぐに計算できます。住宅ローン・自動車ローン・教育ローンなど、さまざまなローンに対応した無料シミュレーターです。 ローン条件を入力 借入額（万円） 年利（%） 返済期間 年 ヶ月 返済開始年月 返済方式 元利均等（毎月同額） 元金均等（元金一定） 入力値を確認してください。 計算する 計算結果サマリー 毎月の返済額（初回） — 万円 総支払額 — 万円 総利息額 — 万円 利息割合 — % 元金 vs 利息（円グラフ） 元金 利息 元金・利息の推移（年次） 元金返済累計 利息支払累計 返済スケジュール表 月 返済額（円） 元金（円） 利息（円） 残高（円） 全期間を表示 ローン比較（2件並列） ローン A 借入額（万円） 年利（%） 返済期間（年） 返済方式 元利均等 元金均等 ローン B 借入額（万円） 年利（%） 返済期間（年） 返済方式 元利均等 元金均等 比較する 事業の経費・資金管理もかんたんに ...

SQLを貼り付けるだけで、適切なインデント・キーワード大文字化・シンタックスハイライト付きで整形できます。すべてブラウザ内で完結し、データは一切サーバーに送信されません。 SQLフォーマッター 整形する ミニファイ クリア シンタックスハイライト インデント幅: スペース2 スペース4 入力SQL 整形結果 コピー freee会計で経理・帳簿を自動化しませんか？ SQLで集計する前に、まずはfreeeでデータを一元管理。30日間無料トライアル実施中。 freeeを無料で試す

HTMLを左パネルに貼り付けるだけで、即座にMarkdownへ変換します。サーバー不要・会員登録不要、すべてブラウザ内で完結します。 Markdownの見た目を確認したい → Markdownプレビューツール テーブルをゼロから作りたい → Markdownテーブルジェネレーター 📄 サンプルHTMLを読み込む ✕ クリア GitHub Flavored Markdown 参照スタイルリンク HTML 入力0 文字 Markdown 出力 📋 Markdownをコピー ...

SQL 入力 MongoDB 出力 コピーしました！ 変換する 出力をコピー クリア サンプルSQL SELECT * WHERE フィールド指定 WHERE AND LIKE IN ORDER + LIMIT INSERT UPDATE DELETE 確定申告・会計をもっとラクに？ freee会計 なら、フリーランスの経費管理もクラウドで簡単。まずは無料で試してみましょう。 ...

🖼️ 写真をここにドロップ JPEG・PNG・WebP・GIF対応。アップロード不要、ブラウザ完結 ...

プリセット: ナビバー カードグリッド 聖杯レイアウト サイドバー 中央揃え <!-- コンテナ設定 --> <div class="fa-section"> <div class="fa-section-title">コンテナ</div> <div class="fa-row"> <label>display</label> <select id="fa-display"> <option value="flex" selected>flex</option> <option value="inline-flex">inline-flex</option> </select> </div> <div class="fa-row"> <label>flex-direction</label> <select id="fa-direction"> <option value="row" selected>row</option> <option value="row-reverse">row-reverse</option> <option value="column">column</option> <option value="column-reverse">column-reverse</option> </select> </div> <div class="fa-row"> <label>justify-content</label> <select id="fa-justify"> <option value="flex-start" selected>flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> <option value="space-evenly">space-evenly</option> </select> </div> <div class="fa-row"> <label>align-items</label> <select id="fa-align-items"> <option value="stretch" selected>stretch</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="baseline">baseline</option> </select> </div> <div class="fa-row"> <label>align-content</label> <select id="fa-align-content"> <option value="normal" selected>normal</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> <option value="stretch">stretch</option> </select> </div> <div class="fa-row"> <label>flex-wrap</label> <select id="fa-wrap"> <option value="nowrap" selected>nowrap</option> <option value="wrap">wrap</option> <option value="wrap-reverse">wrap-reverse</option> </select> </div> <div class="fa-row"> <label>gap</label> <input type="text" id="fa-gap" value="0px" style="max-width:90px;"> </div> <div class="fa-row"> <label>height（高さ）</label> <input type="text" id="fa-height" value="260px" style="max-width:90px;"> </div> </div> <!-- アイテム管理 --> <div class="fa-section"> <div class="fa-section-title">アイテム</div> <div style="display:flex;gap:5px;margin-bottom:8px;"> <button class="fa-add-btn" id="fa-add-item">+ 追加</button> <button class="fa-remove-btn" id="fa-remove-item">- 削除</button> </div> <div class="fa-item-tabs" id="fa-item-tabs"></div> </div> <!-- 選択アイテム設定 --> <div class="fa-section" id="fa-item-controls"> <div class="fa-section-title">選択アイテム</div> <div class="fa-row"> <label>flex-grow</label> <input type="number" id="fa-grow" value="0" min="0" max="10" step="1" style="max-width:80px;"> </div> <div class="fa-row"> <label>flex-shrink</label> <input type="number" id="fa-shrink" value="1" min="0" max="10" step="1" style="max-width:80px;"> </div> <div class="fa-row"> <label>flex-basis</label> <input type="text" id="fa-basis" value="auto" style="max-width:80px;"> </div> <div class="fa-row"> <label>order（順序）</label> <input type="number" id="fa-order" value="0" min="-10" max="10" step="1" style="max-width:80px;"> </div> <div class="fa-row"> <label>align-self</label> <select id="fa-align-self"> <option value="auto" selected>auto</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">center</option> <option value="baseline">baseline</option> <option value="stretch">stretch</option> </select> </div> <div class="fa-row"> <label>width（幅）</label> <input type="text" id="fa-item-width" value="auto" style="max-width:80px;"> </div> <div class="fa-row"> <label>height（高さ）</label> <input type="text" id="fa-item-height" value="auto" style="max-width:80px;"> </div> <div class="fa-row"> <label>ラベル</label> <input type="text" id="fa-item-label" value="" style="max-width:80px;"> </div> </div> ライブプレビュー アイテムをクリックして選択 <div class="fa-output-header"> <span>生成CSS</span> <button class="fa-copy-btn" id="fa-copy-btn">CSSをコピー</button> </div> <div class="fa-output" id="fa-output"></div> 関連ツール ボックスシャドウを生成 → CSSボックスシャドウジェネレーター ...

URLを貼り付けるか、以下のフィールドを入力すると、Facebook・Twitter・LinkedIn・Google検索でページがどのように表示されるかをリアルタイムでプレビューできます。 OGプロパティ設定 <div class="og-section-label">基本タグ</div> <div class="og-field"> <label for="og-title">og:title（タイトル）</label> <input type="text" id="og-title" placeholder="ページのタイトル" maxlength="200"> <div class="og-char-info" id="og-title-count">0 / 60</div> </div> <div class="og-field"> <label for="og-description">og:description（説明文）</label> <textarea id="og-description" placeholder="ページ内容の簡潔な説明..."></textarea> <div class="og-char-info" id="og-desc-count">0 / 160</div> </div> <div class="og-field"> <label for="og-url">og:url（ページURL）</label> <input type="url" id="og-url" placeholder="https://example.com/page"> </div> <div class="og-field"> <label for="og-image">og:image（画像URL）</label> <input type="url" id="og-image" placeholder="https://example.com/image.jpg"> <div class="og-img-hint">推奨サイズ: <span>1200 × 630 px</span>（比率 1.91:1）· 最小 600 × 315 px · 最大 8 MB</div> </div> <div class="og-field"> <label for="og-type">og:type（コンテンツ種別）</label> <select id="og-type"> <option value="website">website（Webサイト）</option> <option value="article">article（記事）</option> <option value="product">product（商品）</option> <option value="video.other">video.other（動画）</option> <option value="music.song">music.song（楽曲）</option> <option value="book">book（書籍）</option> <option value="profile">profile（プロフィール）</option> </select> </div> <div class="og-field"> <label for="og-site-name">og:site_name（サイト名）</label> <input type="text" id="og-site-name" placeholder="あなたのサイト名"> </div> <div class="og-section-label" style="margin-top:22px;">Twitterカード設定</div> <div class="og-field"> <label for="tw-card">twitter:card（カード種別）</label> <select id="tw-card"> <option value="summary_large_image">summary_large_image（大きな画像）</option> <option value="summary">summary（正方形の小さな画像）</option> </select> </div> <div class="og-field"> <label for="tw-title">twitter:title <em style="font-weight:400;color:#9ca3af;">（空欄の場合は og:title を使用）</em></label> <input type="text" id="tw-title" placeholder="Twitter専用タイトル（任意）"> <div class="og-char-info" id="tw-title-count">0 / 70</div> </div> <div class="og-field"> <label for="tw-description">twitter:description <em style="font-weight:400;color:#9ca3af;">（空欄の場合は og:description を使用）</em></label> <textarea id="tw-description" placeholder="Twitter専用説明文（任意）"></textarea> <div class="og-char-info" id="tw-desc-count">0 / 200</div> </div> <div class="og-field"> <label for="tw-image">twitter:image <em style="font-weight:400;color:#9ca3af;">（空欄の場合は og:image を使用）</em></label> <input type="url" id="tw-image" placeholder="https://example.com/twitter-image.jpg"> <div class="og-img-hint">summary_large_image: <span>1200 × 628 px</span> · summary: <span>144 × 144 px</span></div> </div> <div class="og-btn-row"> <button class="og-btn og-btn-primary" id="og-generate-btn">HTMLメタタグを生成</button> <button class="og-btn og-btn-secondary" id="og-clear-btn">全てクリア</button> </div> 画像サイズ推奨一覧 <table class="og-dim-table"> <thead> <tr> <th>プラットフォーム</th> <th>推奨サイズ</th> <th>比率</th> <th>上限</th> </tr> </thead> <tbody> <tr> <td><strong>Facebook</strong></td> <td>1200 × 630 px</td> <td>1.91:1</td> <td>8 MB</td> </tr> <tr> <td><strong>Twitter 大画像</strong></td> <td>1200 × 628 px</td> <td>約1.91:1</td> <td>5 MB</td> </tr> <tr> <td><strong>Twitter 小画像</strong></td> <td>144 × 144 px</td> <td>1:1</td> <td>5 MB</td> </tr> <tr> <td><strong>LinkedIn</strong></td> <td>1200 × 627 px</td> <td>1.91:1</td> <td>5 MB</td> </tr> <tr> <td><strong>Google検索</strong></td> <td>（テキストのみ）</td> <td>—</td> <td>—</td> </tr> </tbody> </table> <div style="margin-top:20px;"> <div class="og-section-label">文字数の目安</div> <table class="og-dim-table"> <thead> <tr><th>プラットフォーム</th><th>タイトル</th><th>説明文</th></tr> </thead> <tbody> <tr><td><strong>Facebook OG</strong></td><td>約60文字</td><td>約160文字</td></tr> <tr><td><strong>Twitter</strong></td><td>約70文字</td><td>約200文字</td></tr> <tr><td><strong>LinkedIn</strong></td><td>約119文字</td><td>約300文字</td></tr> <tr><td><strong>Google検索</strong></td><td>約60文字</td><td>約160文字</td></tr> </tbody> </table> </div> <div style="margin-top:20px;"> <div class="og-section-label">設定のコツ</div> <ul style="font-size:12.5px;color:#374151;padding-left:18px;line-height:1.9;"> <li>画像URLは必ずHTTPSを使用してください（HTTPはブロックされる場合があります）。</li> <li>FacebookはOGデータをキャッシュします。<a href="https://developers.facebook.com/tools/debug/" target="_blank" rel="noopener" style="color:#4f6ef7;">シェアデバッガー</a>でキャッシュを更新できます。</li> <li>Twitterは初回シェア時に画像をクロールします。144×144 px未満の画像は無視されます。</li> <li>LinkedInは7日間キャッシュされます。新しいURLを投稿すると再クロールされます。</li> <li>タイトルは60文字以内にするとGoogle検索での切り詰めを防げます。</li> <li>og:titleと&lt;title&gt;タグの重複は可能な限り避けましょう。</li> </ul> </div> ライブプレビュー <!-- Facebook --> <div> <div class="og-card-label">Facebook</div> <div class="og-card-fb" id="prev-fb"> <div class="og-card-img" id="prev-fb-img-wrap"> <span>画像URLを入力してください</span> </div> <div class="og-card-body"> <div class="og-card-domain" id="prev-fb-domain">example.com</div> <div class="og-card-title" id="prev-fb-title">ページタイトルがここに表示されます</div> <div class="og-card-desc" id="prev-fb-desc">ページの説明文がここに表示されます。</div> </div> </div> </div> <!-- Twitter --> <div> <div class="og-card-label">Twitter / X</div> <div class="og-card-tw summary-large" id="prev-tw"> <div class="og-tw-inner"> <div class="og-card-img-tw" id="prev-tw-img-wrap" style="aspect-ratio:2/1;"> <span>画像URLを入力してください</span> </div> <div class="og-card-body-tw"> <div class="og-card-domain-tw" id="prev-tw-domain">example.com</div> <div class="og-card-title-tw" id="prev-tw-title">ページタイトルがここに表示されます</div> <div class="og-card-desc-tw" id="prev-tw-desc">ページの説明文がここに表示されます。</div> </div> </div> </div> </div> <!-- LinkedIn --> <div> <div class="og-card-label">LinkedIn</div> <div class="og-card-li" id="prev-li"> <div class="og-card-img-li" id="prev-li-img-wrap"> <span>画像URLを入力してください</span> </div> <div class="og-card-body-li"> <div class="og-card-title-li" id="prev-li-title">ページタイトルがここに表示されます</div> <div class="og-card-domain-li" id="prev-li-domain">example.com</div> </div> </div> </div> <!-- Google SERP --> <div> <div class="og-card-label">Google検索結果</div> <div class="og-card-google"> <div class="og-serp-url"> <span id="prev-g-sitename">あなたのサイト</span> &rsaquo; <span class="og-serp-breadcrumb" id="prev-g-breadcrumb">example.com</span> </div> <div class="og-serp-title" id="prev-g-title">ページタイトルがここに表示されます</div> <div class="og-serp-desc" id="prev-g-desc">ページの説明文がここに表示されます。Googleはクエリに関連性が高いと判断したページ内のテキストで説明を上書きする場合があります。</div> </div> </div> 生成されたHTMLメタタグ クリップボードにコピー コピーしました! 📊 ビジネスの会計・経理もスマートに管理しませんか？ freeeなら請求書発行・確定申告・給与計算をクラウドで一元管理。個人事業主から法人まで対応。面倒な帳簿作業を自動化して、本業に集中できます。 ...