国旗画像とアイコンスプライトをダウンロード

下のジェネレーターで国を選択し、単体国旗または結合アイコン画像を選び、アスペクト比とサイズを設定してから、国旗画像を生成してダウンロードします。各コントロールは下の機能一覧、推奨手順は下の使い方の手順を参照してください。

このページのコントロールは、一括選択、国旗スタイル、出力タイプ、サイズ、レイアウト、エクスポートをカバーします。国旗画像を作成する際に利用できる主なオプションは次のとおりです。

• 国名を選択: 完全なリストから選び、大陸で絞り込む （アフリカ、南極、 アジア、ヨーロッパ、オーストラリア、北アメリカ、南アメリカ）、名前で検索、 または必要に応じて行のチェックを入れたり外したりします。
• 国コードを貼り付け: 貼り付けダイアログを開き、JavaScript配列 （例: ['US', 'GB', 'DE']）、1行に1つのISOコードの行区切りリスト、 またはカンマ、コロン、セミコロン、タブ、カスタム区切り文字のCSVなどの区切り文字列から国を一括選択します。有効なコードのみがテーブルに適用され、無効なエントリはApplyをクリックする前に報告されます。
• 国旗スタイル: 単体国旗のダウンロードまたはアイコンスプライトを生成する前に、波打つ効果のある波状国旗または標準的な長方形のフラット国旗を選びます。
• 国の順序をシャッフル: スプライトグリッドに表示される国の順序をランダム化します。iso_USのようなISO クラス名は同じまま、各国旗のキャンバス上の位置のみが変わります。
• 画像タイプを選択: 個別にリサイズした画像にはDownload single flag、選択したすべての国旗を1つの画像にまとめるにはcreate icon flagsを選びます。
• keep ratio: 幅と高さを4:3または16:9のアスペクト比に固定するか、ロックをオフにして カスタム寸法を設定します。
• 画像サイズを設定: 各国旗の幅と高さを入力します。スプライトを小さく保ち、単体ダウンロードを大きくできるよう、単体国旗モードとアイコンモードで上限が異なります。
• 画像を生成: 選択内容からリサイズした国旗または結合アイコンキャンバスを構築します。
• 自動フィットグリッド: アイコン生成後、選択した国数から行と列を自動計算し、手動設定の必要を減らします。
• 地球アイコン: 国旗画像がない国に、スプライトプレビューで地球のプレースホルダーを表示します。
• PNG、zip、JSONをエクスポート: 生成されたPNGのみをダウンロード、flag-icons.pngと一致するHTMLおよびCSSファイル付きのzipアーカイブ、 またはReact、canvas、その他のアプリワークフロー向けのスプライト位置と国メタデータを含むJSONファイルをダウンロードします。
• 国旗コード: アイコン生成後、国旗コードセクションからHTMLとCSSをコピーします。出力は1つのスプライトファイル（flag-icons.png）を使い、flags_imgや iso_AFのようなクラス、それぞれにその国の正しいbackground-positionを持ちます。

このページのオプションを使って国旗画像を作成する手順です。

1. 必要な国名を選択します。大陸フィルターまたは検索ボックスを使い、必要な行だけにチェックを入れます。
2. 画像タイプを選択: 個別ファイルにはDownload single flag、選択したすべての国旗を1つの画像にまとめるにはcreate icon flagsを選びます。
3. 必要に応じてkeep ratioを有効にし、4:3または16:9のアスペクト比を選びます。
4. 選択した画像タイプの上限内で幅と高さを入力して画像サイズを設定します。
5. 画像を生成します。PNGのみはDownload Image、画像+HTML+CSSを1ファイルで取得するにはDownload zip、 ダウンロードせずにコードをコピーするには国旗コードセクションからHTMLとCSSをコピーします。

画像タイプは、多数の個別ファイルを取得するか1つのスプライトを取得するかを制御します。プロジェクトでの国旗の使い方に合ったモードを選びます。

アイコンモードは1カ国以上の選択で動作しますが、4カ国以上のグリッドのほうが実用的なスプライトレイアウトになりやすいです。1カ国のみ、または少数の個別ファイルが必要な場合は単体国旗モードを使います。

keep ratioと画像サイズの設定は連動します。比率ロックがオンのとき、幅または高さを変更するともう一方も更新され、国旗の比率が保たれます。

• 4:3アスペクト比: コンパクトなアイコンやリスト項目向けの一般的な国旗のような形状。
• 16:9アスペクト比: 横長のサムネイルが必要な場合のより広いフレーム。
• これらのプリセットに合わないカスタムの幅と高さが必要な場合はkeep ratioをオフにします。

サイズ上限は画像タイプによって異なります。アイコンモードは各国旗を小さく保ち（幅およそ15pxから100px）、 結合スプライトを管理しやすくします。単体国旗モードは表示やダウンロードアセット向けに より大きな幅（およそ15pxから1000px）を許可します。高さも同じモードのルールに従います。

アイコンスプライトを生成した後、プレビューパネルでダウンロードまたはコードをコピーする前に、 キャンバス上の国旗の配置を調整できます。

• 行と列: スプライトグリッドに横方向と縦方向に表示する国旗の数を制御します。
• row spaceとcolumn space: 国旗セル間に水平または垂直の隙間を追加します。
• padding: 結合画像の外周に余白を追加します。
• corner radius: より柔らかいアイコンが必要な場合、角丸クリップで国旗の角を柔らかくします。
• プレビュー画像フィットサイズ: 広いキャンバスをページに合わせ、スプライト全体を確認できます。
• 更新: レイアウト変更後にキャンバスを再構築し、生成CSSと位置を同期します。
• 国旗コード： 国旗コードセクションから生成されたHTMLとCSSをコピーします。選択した各国に、 共有スプライト上で一致するbackground-positionを持つiso_XXクラスが付きます。
• Download Image: 独自のHTMLとCSSがある場合、または画像アセットのみ必要な場合に、 生成されたPNGスプライトのみをエクスポートします。
• Download zip: flag-icons.pngと生成されたHTMLおよびCSSを1つのzipでエクスポートし、 スプライトパッケージ全体を同期します。

ツールに表示される最大幅と高さの上限内にキャンバス合計を保ちます。非常に大きなグリッドは 許可サイズを超えることがあります。サイズ警告が出た場合は行、列、またはアイコンサイズを減らしてください。間隔やサイズを変更した後、 CSSをコピーするかzipをダウンロードする前にプレビューを再度更新し、位置を正確に保ちます。

create icon flagsモードでは、国旗コードセクションが1つのスプライト画像を指す 貼り付け可能なコードを生成します。各国は共有のflags_imgクラスと、その国旗セルの正確な backgroundオフセットを設定するiso_AFのようなISOクラスを使います。

HTMLサンプルは国旗ボックスと国ラベルを組み合わせます。CSSサンプルはflex行、共有スプライトサイズ、 ISOコードごとの1ルールを定義します。ライブ出力は選択した国とレイアウトに合わせて更新されます。

<div class="flex-box">
    <div class="flags_img iso_AF"></div>
    <div>Afghanistan</div>
</div>

<div class="flex-box">
    <div class="flags_img iso_AX"></div>
    <div>Aland Islands</div>
</div>

<div class="flex-box">
    <div class="flags_img iso_AL"></div>
    <div>Albania</div>
</div>

<div class="flex-box">
    <div class="flags_img iso_DZ"></div>
    <div>Algeria</div>
</div>

.flex-box {
    display: flex;
    justify-content: start;
    align-items: center;
}

.flags_img {
    background-image: url('flag-icons.png');
    background-repeat: no-repeat;
    display: inline-block;
    width: 50px;
    height: 28px;
    background-color: transparent;
    vertical-align: middle;
    background-position: 51px 29px;
    margin: 8px;
}

.iso_AF {background-position: 0 0}
.iso_AL {background-position: -102px 0}
.iso_AX {background-position: -51px 0}
.iso_DZ {background-position: -153px 0}

flag-icons.pngをCSSの横に配置する（またはurl()パスを更新する）と、 HTMLとCSSをページに貼り付けられます。画像、HTML、CSSを一致した1パッケージで欲しい場合はDownload zipを選びます。 行、間隔、アイコンサイズを変更するとピクセルオフセットが変わるため、更新をクリックして国旗コードをコピーし直すか レイアウト変更後はzipを再ダウンロードしてください。

国旗アイコンは多くのプロダクト画面に登場します。このツールの画像を使う一般的な場所は次のとおりです。

• ウェブサイトヘッダーの言語・地域切り替え
• 電話番号や住所フォーム横の国選択フィールド
• 店舗検索、配送オプション、チェックアウトの国リスト
• 国別に分析やユーザーをグループ化するダッシュボード
• 利用可能なロケールを表示するモバイルアプリの設定画面
• 対応市場を強調するマーケティングページ
• 1つのPNGリクエストから各国名の横に国旗を表示するCSSスプライトリスト

マークアップやアプリデータでもISOコードとラベルが必要な場合は、国旗アイコンと国名ドロップダウンまたはJSON国リストを組み合わせてください。関連リンクは関連ツールセクションにあります。

単体国旗ダウンロード、アイコンスプライト、CSS background-position、アスペクト比、 サイズ上限、レイアウトオプション、関連SVG国旗に関するよくある質問への回答です。

SVG国旗、国ドロップダウンのマークアップ、別形式の国データが必要ですか？これらのページで近いワークフローをカバーしています。

• SVG国旗ダウンロード スケーラブルなベクター国旗とSVGコード向け。
• HTML国名ドロップダウン ISOコードとラベル付きselectリスト向け。
• JavaScript国名配列 JSONおよびオブジェクト形式の国リスト向け。
• PHP国名配列 サーバーサイドの国データ向け。
• 画像ツールハブ その他の画像ダウンロード・変換ページ向け。
• 画像からWebPコンバーター エクスポートした国旗PNGを最適化したい場合。