Softonic

SVG グリッドパターン背景

ステップ 1 / 3
次へ

グリッドパターンの背景は、画像ファイルを追加せずに、ランディングページやヒーローセクション、カードに落ち着いた構造を与えます。下でサイズと色を設定すると、画面全体に 1 つのタイルを繰り返す小さな SVG をコピーできます。

グリッドパターン背景の作り方

  1. 1

    領域に合わせる

    カバーしたい領域の幅と高さを入力します。例えば 1200 x 800 です。

  2. 2

    落ち着いたセルサイズを選ぶ

    グリッドサイズを 32 か 40 にすると、線が内容を引き立てて、競合しなくなります。

  3. 3

    線をやわらかくする

    背景よりほんの少し濃い線の色を選び、線の太さは 1 にします。

  4. 4

    SVG をコピーする

    最後のステップでコピーボタンを使い、背景が必要な場所にコードを貼り付けます。

パターン背景の構成

生成されるファイルには、パターンとして 1 度だけ定義される小さなタイルと、そのパターンで全体を塗る長方形が含まれます。ブラウザがタイルを繰り返すため、グリッドが 20 セルでも 2,000 セルでも、ファイルは数百バイト程度で済みます。最初の長方形が背景色を塗り、2 つ目の長方形がその上に線を描きます。

各タイルは上端と左端の線だけを描き、隣接するタイルが残りを補うので、同じ線が 2 度描かれることはありません。その結果、最初の列と行の線はキャンバスの端にちょうど乗り、線の太さの半分がキャンバスの外に出ます。そのため、1 px の線は上と左で半分のピクセルの細い枠線に見えます。キャンバスの幅がセルサイズのちょうど倍数であれば、右端と下端には閉じた線が現れません。

背景として機能する値の選び方

背景は、その上にあるテキストを支えるものであるべきです。次の値は安全な出発点です。

見た目 セルサイズ 線の太さ 背景上の線の色
ほとんど見えない 40 1 #ffffff 上の #eeeeee
やわらかい構造 32 1 #f8fafc 上の #e2e8f0
はっきりした枠 64 1.5 #ffffff 上の #cbd5e1

線と背景のコントラストは低く保ってください。本文のテキストをその上に置く場合、テキストに近い濃さの線は読みづらさの原因になります。

具体例

幅 1200 px、高さ 800 px のヒーローセクションでは、40 px のセルで 30 列 x 20 行、合計 600 セルになります。1200 と 800 はどちらも 40 で割り切れるため、両端でグリッドがきれいに終わります。50 px のセルなら 24 x 16 セルになり、やはりきれいです。45 px のセルでは、1200 を 45 で割った 26.67 になるため、右端と下端に欠けたセルが生じます。

結果の使い方

SVG をマークアップに直接貼り付けるか、ファイルとして保存して画像として参照するか、装飾用のレイヤーとしてコンテンツの背面に置いてください。背景色は SVG の一部であることを忘れないでください。別の色の上にグリッドを重ねたい場合は、コピーしたコードの最初の長方形を編集します。

レイアウトに背景を合わせる

コンテンツの列の幅が 960 px なら、32 px または 40 px のセルがグリッドと列の端を揃えてくれます。960 はどちらでも割り切れるからです。グリッドをレイアウトに合わせると、線がランダムではなく設計されたように見えます。

よくある質問

幅と高さは 50 から 3,000 px、セルサイズは 5 から 500 px まで受け付けます。その範囲外の値は、最も近い上限または下限に丸められます。

各タイルは上端と左端を描くため、最初の行と列はキャンバスの境界にちょうど乗り、線の太さの半分がキャンバスの外に出ます。内側の線は本来の太さで表示されます。

自動では繰り返されません。SVG の幅と高さは固定です。より広い範囲を覆うには、より大きなサイズで生成するか、自分のスタイルシートで SVG を繰り返し背景画像として使ってください。

このジェネレーターは、1 つの線の色と 1 つの太さで描きます。主線と補助線の両方が必要な場合は、SVG を 2 つ作り、別々の背景として重ねてください。

関連ツール

方眼紙ジェネレーター

印刷できる方眼紙をオンラインで作成：方眼またはドット罫を選び、間隔をmmで設定し、A4かLetterと好きな線の色を指定して、印刷または鮮明なSVGでダウンロードできます。

五線譜用紙ジェネレーター

印刷用の五線譜用紙を作成：空白の五線、ト音記号・ヘ音記号、ピアノ用大譜表、ギター用タブ譜。段数、線間隔、A4かレターサイズ、余白を選び、PDFまたはSVGで保存できます。

LEGOモザイク作成ツール

写真を16、32、48、64マス四方のモザイク案に変換。近似色のプレビュー、1×1プレートの色別枚数、番号付き組み立てガイドを確認できます。

新聞メーカー

自分で書いた見出しと記事から新聞風の一面を作り、コピー、プレーンテキストのダウンロード、ブラウザ印刷ができます。

スプライトシート分割ツール

グリッドまたは自動検出でスプライトシートを分割し、各フレームを修正してPNG、ZIP、frames.jsonを端末上で出力します。

SVGドットパターン生成

キャンバス、間隔、半径、色を調整してSVGドットパターンを作成します。CSS背景に使う前に、コピーしたSVGコードをデータURLへエンコードしてください。

このツールは他の言語でも利用できます

使い方ガイドと活用例